Test cuestionario sobre CSS - the question form
Preguntas: 16 · 10 minutos
1. ¿Qué característica de medios permite que CSS responda a la preferencia del sistema operativo del usuario de reducir el movimiento no esencial?
prefers-low-animation
reduced-transitions
prefers-reduced-motion
motion-preference
2. ¿Qué selector coincide con elementos de lista solo cuando son hijos directos de una lista no ordenada?
El selector de descendientes: ul li
El selector de hermanos adyacentes: ul + li
El selector de hijos: ul > li
El selector general de hermanos: ul ~ li
3. Un contenedor flex usa flex-direction: row. ¿Qué propiedad distribuye sus elementos secundarios a lo largo del eje principal horizontal?
align-items
justify-content
place-items
align-content
4. Una caja usa el modelo content-box predeterminado con width: 200px, padding: 20px y border: 5px solid. ¿Cuál es su ancho total renderizado, sin incluir el margen?
200px
250px
220px
290px
5. Un elemento padre tiene color: navy. No se establece ningún color en su elemento hijo <span>. ¿Qué color usará normalmente el texto del span?
El color de fondo del navegador, porque el color del texto no se hereda
Negro, porque los elementos hijos restablecen el color del texto
Transparente, porque el span no tiene una declaración de color
Azul marino, porque color se hereda de forma predeterminada
6. Estas reglas aparecen en la misma hoja de estilos: .notice { color: blue; } y, más adelante, .notice { color: red; }. Si no hay otras reglas coincidentes, ¿de qué color será el texto del aviso?
Rojo, porque la regla posterior prevalece cuando la especificidad y la importancia son iguales
Azul, porque se conserva la primera regla coincidente
Una mezcla de azul y rojo, porque se aplican ambas declaraciones
El color predeterminado del navegador, porque los selectores duplicados se anulan
7. Un botón de ayuda debe permanecer en la misma esquina del área de visualización mientras se desplaza la página. ¿Qué valor de posicionamiento está diseñado para este comportamiento?
position: fixed;
position: relative;
position: static;
position: absolute;
8. Necesitas ocultar un elemento y conservar el espacio que ocupa en la disposición de la página. ¿Qué declaración debes usar?
display: none;
position: absolute;
visibility: hidden;
overflow: hidden;
9. Un elemento tiene width: 300px y box-sizing: border-box. ¿Qué incluye el ancho declarado?
Solo el área de contenido
El contenido, el relleno y el borde, pero no el margen
El contenido y el margen, pero no el relleno ni el borde
El contenido, el relleno, el borde y el margen
10. ¿Qué declaración crea tres columnas del mismo ancho en un contenedor CSS Grid?
grid-template-columns: repeat(3, 1fr);
grid-columns: 1fr 1fr 1fr;
grid-template-columns: 3fr;
grid-template-rows: repeat(3, 1fr);
11. Un elemento tiene id=""promo"", class=""card"" y es un <article>. ¿Qué selector tiene la mayor especificidad?
.card
#promo
article.card
article
12. El elemento raíz tiene font-size: 20px. ¿Qué longitud calculada representa 2rem?
20px
200px
2px
40px
13. ¿Qué regla aplica correctamente estilos cuando el ancho del área de visualización es de 600px o menos?
@media (max-width: 600px) { ... }
@media (min-width: 600px) { ... }
@viewport (width <= 600px) { ... }
@screen max-width(600px) { ... }
14. ¿Para qué se utiliza principalmente CSS en una página web?
Para agregar lógica de aplicación y gestionar eventos
Para definir la estructura semántica del contenido de la página
Para gestionar consultas de bases de datos del lado del servidor
Para controlar la presentación visual y la disposición del contenido HTML
15. ¿Qué selector aplica un estilo cuando un dispositivo apuntador se posiciona sobre un enlace?
a::before, que selecciona un pseudoelemento generado
a:focus, que coincide con un enlace que tiene el foco de entrada
a:active, que coincide con un enlace mientras se está activando
a:hover, que coincide con un enlace ubicado bajo el puntero
16. Se declara una propiedad personalizada como --brand-color: #2457d6;. ¿Cómo debe usarse como color de texto?
color: --brand-color;
color: custom(--brand-color);
color: var(--brand-color);
color: value(--brand-color);