Tema8_seccion2_CSS Flashcards

(26 cards)

1
Q

¿Qué tres parámetros (atributos) se relacionan con el “Modelo de Caja” ?

A
  • Margin
  • Border
  • Padding
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

¿Qué tipo MIME representa a una hoja de estilos?

A

text/css

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

¿Para qué sirve el siguiente selector?

a[title] { … }

A

Selecciona todas las etiquetas a que tengan definido el atributo title

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

¿Para que sirve el siguiente selector?

[lang] { … }

A

Selecciona todas las etiquetas que tengan definido el atributo lang

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

¿Cómo se definen reglas específicas para adaptarse a un dispositivo móvil por ej.?

A

@media only screen and (max-width:640px) { … }

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

¿Qué se toma como referencia cuando decimos position:fixed?

A

La referencia es el documento siendo (0,0) la esquina superior izquierda

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

¿Qué se toma como referencia cuando decimos position:absolute?

A

La referencia es el contenedor en el que este definida la etiqueta afectada por este estilo

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

Nombre dos preprocesadores CSS

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

Nombre tres frameworks CSS

A
  • bootstrap
  • foundation
  • materialize
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Nombre dos at-rules

A
  • @charset
  • @font-face
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

¿Para qué sirve el siguiente selector?

table , a { … }

A

Se aplicarán los estilos sobre las etiquetas table y sobre a

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

¿Para qué sirve el siguiente selector?

table a { … }

A

Se aplicarán los estilos sobre las etiquetas a que estén dentro de una table (en cualquier nivel de profundidad)

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

¿Para que sirve el siguiente selector?

.texto { … }

A

Se aplicarán los estilos sobre todas las etiquetas que hayan declarado su atributo class de esta forma:

‹etiqueta class=”texto”› …

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

¿Cuál es es selector que se refiere a un elemento en base a su identificador?

A

identificador { … }

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

¿Para qué sirve este selector y cómo se le denomina?

a:hover { … }

A

Se le denomina pseudo-clase y en este caso el significado es: se aplicarán estilos sobre los enlaces al pasar el ratón por encima

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

¿Para qué sirve este selector y cómo se le denomina?

p::first-letter { … }

A

Se le denomina pseudo-elemento y en este caso el significado es: se aplicarán estilos sobre la primera letra de los párrafos

17
Q

¿Para qué sirve la siguiente declaración en un archivo css externo por ej?

p { color:red !important; }

A

Para forzar a que los párrafos tengan texto en color rojo aunque haya cualquier otra regla (por ej. en el bloque con mayor prioridad/especificidad que intente cambiarlo

18
Q

¿A que elementos se le aplica la “especificidad”?

A

A los selectores

https://specificity.keegan.st/ (buenísimo)

19
Q

¿Qué propiedad(es) de las siguientes no se heredan entre etiquetas padre e hijos sin tener que forzarlo?

  • color
  • font-family
  • margin
  • text-align
A

El margin no se hereda por defecto, el resto si

20
Q

¿Cómo se fuerza a heredar de tu etiqueta padre el valor que tuviera su propiedad float?

A

selector { float:inherit; }

21
Q

¿Qué diferencia fundamental tienen estas dos declaraciones?

  1. Display:none
  2. Visibility:hidden
A

Aunque las dos provocan que se oculte el elemento, display:none no deja el hueco que ocuparía el elemento y visibility:hidden si deja ese espacio “en blanco”

22
Q

¿Cómo podríamos preparar el contenido de una pagina para que se imprimiera lo mejor posible?

A

Modificando todo tipo de estilos de los elementos de la pagina de cara a imprimirse y usando por ej la regla @page para definir todo lo relativo al comportamiento de las paginas en impresión

  • Con @media print { … } dentro del bloque de la pagina
  • ‹link rel=”stylesheet” type=”text/css” href=”/estilos-impresion.css” media=”print”/›
23
Q

¿Con que etiqueta podríamos hacer uso de fuentes tipográficas externas?

24
Q

¿Qué tipo de unidad de media es “em” y que significa?

A

Es una unidad de medida relativa respecto de la fuente actual (contando con la herencia !ojo! )

25
¿Cuál de las siguiente medidas es relativa? * px * cm * rem * pt
rem es una unidad de medida relativa a la fuente definida en la raíz (etiqueta html)
26
¿Qué representa la propiedad z-index?
Con z-index, que acepta valores numéricos, podemos definir la altura/profundidad de nuestras capas (div por ej). Es decir, pasamos de ver una página en 2D a 3D