CSS

Question 1

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

Answer 1

margin
border
padding

Question 2

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

Answer 2

text/css

Question 3

¿Para qué sirve el siguiente selector?

a[title] { … }

Answer 3

selecciona todas las etiquetas a que tengan definido el atributo title

Question 4

¿Para que sirve el siguiente selector?

[lang] { … }

Answer 4

selecciona todas las etiquetas que tengan definido el atributo lang

Question 5

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

Answer 5

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

Question 6

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

Answer 6

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

Question 7

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

Answer 7

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

Question 8

Nombre dos preprocesadores CSS

Answer 8

less
sass

Question 9

Nombre tres frameworks CSS

Answer 9

bootstrap
foundation
materialize

Question 10

Nombre dos at-rules

Answer 10

@charset
@font-face

Question 11

¿Para qué sirve el siguiente selector?

table , a { … }

Answer 11

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

Question 12

¿Para qué sirve el siguiente selector?

table a { … }

Answer 12

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

Question 13

¿Para que sirve el siguiente selector?

.texto { … }

Answer 13

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

‹etiqueta class=”texto”› …

Question 14

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

Answer 14

identificador { … }

Question 15

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

a:hover { … }

Answer 15

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

Question 16

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

p::first-letter { … }

Answer 16

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

Question 17

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

p { color:red !important; }

Answer 17

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

Question 18

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

Answer 18

A los selectores

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

Question 19

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

color
font-family
margin
text-align

Answer 19

El margin no se hereda por defecto, el resto si

Question 20

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

Answer 20

selector { float:inherit; }

Question 21

¿Qué diferencia fundamental tienen estas dos declaraciones?

display:none
visibility:hidden

Answer 21

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

Question 22

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

Answer 22

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”/›

Question 23

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

Answer 23

@font-face

Question 24

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

Answer 24

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

Question 25

¿Cuál de las siguiente medidas es relativa?

px
cm
rem
pt

Answer 25

rem es una unidad de medida relativa a la fuente definida en la raiz (etiqueta html)

Question 26

¿Qué representa la propiedad z-index?

Answer 26

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