Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Web > CSS > Flashcards

CSS Flashcards

1
Q

Hojas de Estilo en Cascada

A

Permite controlar la apariencia de un sitio web.

Permite definir un estilo visual para cada uno de los elementos de HTML.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

CSS separa los contenidos de su presentación en …

A

Desarrollo paralelo

Flexibilidad de apariencia

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Nombre las ventajas de CSS

A

♥Reutilización: se define la estética visual de los elementos una sola vez y se aplica a todas las páginas del sitio.
♥Diseño unificado: todas las páginas del sitio web hacen referencia a un único estilo visual.
♥Optimización de los tiempos de carga y de tráfico en el servidor

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

El selector apunta al …

A

Al elemento HTML al que desea aplicar estilo.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

El bloque de declaración contiene…

A

Una o más declaraciones separadas por punto y coma.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Cada declaración incluye un..

A

Un nombre de propiedad CSS y un valor, separados por dos puntos.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Existen tres (3) formas de incluir una hoja de estilo dentro de un documento HTML:

A

♥En línea (inline)
♥Interno
♥Externo

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

CCS en línea:

A

Se puede usar un estilo en línea para aplicar un estilo único a un solo elemento.
Para usar estilos en línea, se agrega el atributo de style (estilo) al elemento relevante.
h1 style=”color:blue;text-align:center;”>Titulo

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

CSS Interno

A

Se puede utilizar una hoja de estilo interna si una sola página HTML tiene un estilo único.
El estilo interno se define dentro de etiqueta , dentro de la sección de cabecera .

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

CSS Externo

A

Con una hoja de estilo externa, puede cambiar el aspecto de un sitio web completo cambiando solo un archivo.
Cada página HTML debe incluir una referencia al archivo de hoja de estilo externo dentro de la etiqueta , dentro de la sección del encabezado. Y debe guardarse con la extensión .css

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Que son los selectores?

A

Se utilizan para “buscar” (o seleccionar) los elementos HTML a los que se desea aplicar estilo.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Podemos dividir los selectores de CSS en cinco categorías:

A 
♥Simples (elemento, id y class)
♥Combinación (basados ​​en relaciones)
♥Pseudo-clase (por estado)
♥Pseudo-elementos (parte de un elemento)
♥Por atributos (basados ​​en un atributo o valor de atributo)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Selector por elemento:

A

p {
color: red;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Selector por ID:

A

parrafo1 {

text-align: center;
color: blue;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Selector por clase

A

.centrado {
text-align: center;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Selector Universal

A
  • {
    margin: 0;
    }
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Selector de agrupamiento

A

h1, h2, h3 {
text-decoration: underline;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Selector: Pseudo-elemento

A

p::first-line {
color: #ff0000;
font-variant: small-caps;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Selector: Pseudo-clases

A

p:hover {
color: red;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Selector de combinaciones

A

p.azul {
color: darkblue;
}

21
Q

Selector combinado en forma descendente

A

Selecciona todos los elementos de tipo f que están dentro de e sin importar la profundidad. No confundir con el agrupamiento (,).
p a {
color: red;
}

22
Q

Selector combinado: Hijo

A

e > f. Selecciona todos los elementos de tipo f que son hijos directos de e.
p > a {
color: red;
}

23
Q

Selector combinado: Adyacente

A

e + f. Selecciona todos los elementos de tipo f que cumplan las dos siguientes condiciones:
e y f deben ser hermanos
f debe aparecer inmediatamente después de e en el código HTML
h1 + h2 {
color: red; text-decoration: underline;
}

24
Q

Selectores combinados: Hermano general

A

e ~ f. Selecciona todos los elementos de tipo f que cumplan las dos siguientes condiciones:
e y f deben ser hermanos
f debe aparecer inmediatamente después de e en el código HTML
h1 ~ h2 {
color: red; text-decoration: underline;
}

25
Q

Conflictos de reglas

A

Cascada: cuando dos reglas tienen la misma especificidad, se aplica la última.
Especificidad: se aplica la que tenga el selector más específico.
Herencia: algunos valores de propiedades se heredan del elemento padre. Otros no.
Origen: es posible que el usuario configure un CSS para anular el estilo del desarrollador. Aunque esto está en desuso.

26
Q

Herencia

A

inherit: hereda el valor del padre.
initial: en propiedades no heredadas, este valor refuerza el comportamiento por defecto y es necesario sólo para sobrescribir otra regla.
unset: es inherit para propiedades heredadas e initial para no heredadas. Uso especial con “all:”.
revert: revierte el valor al que habría tenido si no se hubiesen hecho cambios.

27
Q

Como podemos declarar reglas para que los estilos tomen precedencia sobre otras reglas de estilo?

A

body{
font-family: verdana, arial !important;
}

28
Q

Que son los frameworks?

A

Conjunto de librerías css que permiten facilitar las tareas comunes que realizan los desarrolladores css.
Se componen de creación de grillas para facilitar la maquetación, conjunto de clases para tipografías, reseteadores de css, facilitan el diseño responsivo, etc.

29
Q

Nombrar los elementos del modelo de caja

A 
Margen
color de fondo
Imagen de fondo
Relleno
Borde
Contenido
30
Q

Como setear el estilo de un border?

A

border-style especifica el tipo de borde.

31
Q

Como setear el ancho de un border?

A

border-width especifica el ancho del borde. Se puede usar las unidades vistas (in px, cm, etc) o thin, medium, o thick.

32
Q

Como setear el color de un borde?

A

border-color setea el color.

33
Q

Todas las propiedades se pueden setear para lados específicos de un borde con….

A

border-top-color.

34
Q

Con …. se puede setear el ancho, estilo (requerido) y el color de una sola vez de un borde

A

border

35
Q

Etiqueta que permite redondear los bordes.

A

border-radius

36
Q

Que hace margin?

A

Crea espacio alrededor de los elementos, fuera de los bordes definidos.

37
Q

Que hace padding?

A

Genera espacio alrededor del contenido de un elemento, dentro de los bordes definidos.

38
Q

Elementos en bloque

A

Los elementos de bloque empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de su contenedor. Pueden contener otros elementos. Ej.: p, h1..h6, ul, ol y div.

39
Q

Elementos en linea

A

Los elementos de línea sólo ocupan el espacio necesario para mostrar sus contenidos. Solo pueden contener otros elementos en línea.Ej.: img, a, b y span

40
Q

Display

A

Permite cambiar la forma de mostrar aunque no el tipo de elemento.

41
Q

Float

A

Permite sacar a un elemento del flujo normal del documento.

El elemento puede ser posicionado a la izquierda o derecha de su misma línea o contenedor tanto como sea posible.

42
Q

Clear

A

se utiliza conjuntamente con float para forzar a que un elemento no fluya alrededor de otro elemento posicionado mediante float.
Sus valores posibles son:
♥left: no permite flotantes a su izquierda
♥right: no permite flotantes a su derecha
♥both: no permite flotantes a ambos lados
♥none: permite otros flotantes a ambos lados

43
Q

Position

A

Especifica el tipo de posicionamiento.
Sus posibles valores son:
static: valor por defecto.
relative: posicionado relativo al contenedor.
fixed: posicionado relativo al viewport.
absolute: posicionado relativo al ancestro posicionado** más cercano.
sticky: posicionado relativo a la posición de desplazamiento del usuario.

44
Q

Visibility

A

Los valores para la propiedad son: visible, hidden y inherit.

45
Q

z-index

A

especifica el orden de apilamiento de un elemento (qué elemento debe colocarse delante o detrás de los demás).

46
Q

Overflow

A

Controla qué sucede cuando los elementos sobrepasan el límite del contenedor.
Sus posibles valores son:
visible: desborde sin recortes, se renderiza fuera del contenedor. (Default).
hidden: desborde recortado y ocultado.
scroll: desborde recortado pero se muestran barras de desplazamiento.
auto: desborde recortado pero se muestran barras de desplazamiento solo si es necesario.

47
Q

Flexbox

A

El módulo de diseño de Flexbox facilita el diseño de una estructura de diseño flexible y receptiva sin usar flotación o posicionamiento

48
Q

Para comenzar a usar el modelo Flexbox, primero debe definir un …..

A

un contenedor flexible estableciendo su propiedad display con el valor flex.
.flex-container {
display: flex;
}

49
Q

Items flexbox

A

Son los hijos directos de un contenedor flexbox.
order: especifica el orden.
flex-grow: especifica cuánto crecerá un elemento flexible en relación con el resto de los elementos flexibles.
flex-shrink: similar al anterior pero al achicar.
flex-basis: especifica la longitud inicial.
flex: flex-grow + flex-shrink + flex-basis,
align-self: especifica la alineación del elemento.

Web (6 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions