Test cuestionario de HTML y CSS - the question form
Preguntas: 16 · 10 minutos
1. Un campo de correo electrónico obligatorio contiene texto que no coincide con el formato de correo electrónico. ¿Qué selector puede seleccionar ese campo según su estado de validación actual?
input:invalid
input:empty
input:checked
input:disabled
2. Un contenedor flex usa la dirección de fila predeterminada. ¿Qué declaraciones centran a su único elemento hijo tanto horizontal como verticalmente?
text-align: center; vertical-align: middle;
justify-content: space-between; align-content: center;
align-self: center; margin-left: auto;
justify-content: center; align-items: center;
3. Un campo de texto tiene id=""email"". ¿Qué marcado crea una etiqueta asociada explícitamente?
<label name=""email"">Correo electrónico</label>
<label id=""email"">Correo electrónico</label>
<label target=""email"">Correo electrónico</label>
<label for=""email"">Correo electrónico</label>
4. Una hoja de estilos define --brand-color: navy en el elemento :root. ¿Qué declaración usa esa propiedad personalizada como color del texto de un encabezado?
color: var(--brand-color);
color: custom(--brand-color);
color: value(--brand-color);
color: property(--brand-color);
5. Dos reglas CSS con la misma especificidad establecen colores diferentes para el mismo elemento y ninguna usa !important. ¿Qué determina normalmente el color aplicado?
La regla con el selector más corto
La regla cuyo valor de propiedad tiene más caracteres
La regla de la hoja de estilos que se cargó primero
La regla que aparece después en el orden de origen aplicable
6. ¿Qué declaración CSS elimina un elemento del renderizado y también elimina el espacio de maquetación que habría ocupado?
display: none;
visibility: hidden;
opacity: 0;
position: relative;
7. Una imagen debe reducirse cuando su contenedor se vuelva estrecho, conservar su relación de aspecto y evitar crecer más allá de su ancho intrínseco. ¿Qué CSS es el más adecuado?
width: 100vw; height: 100%;
max-width: 100%; height: auto;
min-width: 100%; height: auto;
max-height: 100%; width: auto;
8. Dentro de un formulario, un elemento <button> simple no tiene el atributo type. ¿Qué comportamiento debes esperar en el HTML estándar?
Restablece todos los controles del formulario
No tiene ningún comportamiento de formulario incorporado
Se comporta como type=""button""
Se comporta como type=""submit""
9. ¿Qué línea carga correctamente una hoja de estilos externa llamada styles.css desde la misma carpeta que el archivo HTML?
<link rel=""stylesheet"" href=""styles.css"">
<style src=""styles.css""></style>
<script type=""text/css"" href=""styles.css""></script>
<css link=""styles.css"">
10. Quieres que un contenedor CSS Grid tenga tres columnas del mismo ancho. ¿Qué declaración es la opción más clara?
grid-template-rows: 1fr 1fr 1fr;
grid-auto-flow: column;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: auto auto;
11. Una caja tiene width: 300px, padding: 20px y border: 5px solid. ¿Qué declaración hace que el ancho declarado de 300px incluya el relleno y el borde?
overflow: hidden
box-sizing: border-box
width: auto
display: inline-block
12. ¿Qué consulta de medios aplica estilos cuando el viewport tiene 600 píxeles CSS de ancho o menos?
@media (min-width: 600px)
@media (width-from: 600px)
@media (max-width: 600px)
@media screen-width <= 600px
13. Una página contiene un encabezado del sitio, navegación, un artículo único y un pie de página. ¿Qué elemento debe envolver el contenido principal y único de la página?
<section>
<main>
<aside>
<header>
14. Una imagen muestra una gráfica cuya tendencia es importante para comprender un artículo. ¿Cuál es el atributo alt más apropiado?
Un atributo alt vacío porque las gráficas son visuales
El nombre del archivo de imagen, como alt=""sales-chart.png""
Una descripción concisa de la tendencia relevante de la gráfica
La frase alt=""imagen de una gráfica""
15. De forma predeterminada, ¿qué representa 1rem en CSS?
El tamaño de fuente del elemento padre
El uno por ciento del ancho del viewport
El tamaño de fuente del elemento raíz
El ancho del carácter 0 en la fuente actual
16. Dadas estas reglas, ¿qué selector normalmente prevalece para un elemento que coincide con los cuatro selectores: .note, p.note, .card .note y #panel .note?
.card .note
#panel .note
p.note
.note