wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

Aplicaciones web html/css

Total questions: 35

Worksheet time: 54mins

Name
Class
Date
1.

¿Qué función cumple la línea <!DOCTYPE html> al inicio del documento?

a)
Especifica la versión de CSS utilizada.
b)
Indica el inicio de un comentario en HTML.
c)
Define el tipo de documento y asegura que el navegador lo interprete como HTML5.
d)
Define el idioma del contenido del documento.
2.

En el CSS, ¿para qué sirve :root?

a)
:root se utiliza para definir variables CSS globales.
b)
:root se utiliza para definir estilos específicos para elementos.
c)
:root se usa para aplicar estilos solo a elementos hijos.
d)
:root es un selector que afecta solo a elementos de tipo texto.
3.

La propiedad box-sizing: border-box; hace que:

a)
El padding se añade al ancho y alto del elemento.
b)
El ancho y alto de un elemento no incluyen el padding ni el borde.
c)
El borde se calcula por separado del ancho y alto del elemento.
d)
Permite que el ancho y alto de un elemento incluyan el padding y el borde.
4.

En el archivo HTML, la etiqueta <link rel="stylesheet" href="css/styles.css"> sirve para:

a)
Enlazar una hoja de estilo CSS externa.
b)
Establecer un título para la página.
c)
Crear un enlace a una página web.
d)
Definir un script de JavaScript.
5.

¿Qué significa display: flex;?

a)
Establece un contenedor rígido para organizar elementos en filas o columnas.
b)
Permite la alineación de texto en un contenedor.
c)
Define un contenedor que solo puede organizar elementos en columnas.
d)
Establece un contenedor flexible para organizar elementos en filas o columnas.
6.

En el HTML, la etiqueta <section> se usa para:

a)
Definir estilos de texto en un documento.
b)
Definir secciones temáticas en un documento.
c)
Crear enlaces a otras páginas web.
d)
Insertar imágenes en un documento.
7.

¿Qué hace la regla @media (min-width: 768px)?

a)
Aplica estilos CSS a pantallas con un ancho máximo de 768 píxeles.
b)
Desactiva todos los estilos CSS en pantallas de al menos 768 píxeles.
c)
Aplica estilos CSS solo a dispositivos móviles.
d)
Aplica estilos CSS a pantallas con un ancho de al menos 768 píxeles.
8.

¿Qué hace la propiedad text-transform: uppercase; en los botones?

a)
Convierte el texto de los botones a mayúsculas.
b)
Cambia el color del texto de los botones.
c)
Elimina el texto de los botones.
d)
Convierte el texto de los botones a minúsculas.
9.

.contenedor {

max-width: 120rem;

margin: 0 auto;

}

según el código que hace?

a)
Crea un contenedor con un ancho fijo de 120 rem.
b)
Establece un contenedor con un margen de 20px.
c)
Crea un contenedor que se expande hasta el ancho de la pantalla.
d)
Crea un contenedor centrado con un ancho máximo de 120 rem.
10.

según la imagen diga, que pasaría si no colocamos la propiedad no-repeat?

a)
La imagen de fondo se repetirá.
b)
La imagen de fondo se mostrará en su tamaño original.
c)
La imagen de fondo se estirará.
d)
La imagen de fondo se ocultará.
11.

Según la imagen diga para que sirve la propiedad cover?

a)
La propiedad 'cover' sirve para escalar la imagen de fondo para que cubra completamente el contenedor.
b)
La propiedad 'cover' se utiliza para centrar la imagen en el contenedor.
c)
La propiedad 'cover' ajusta el color de fondo del contenedor.
d)
La propiedad 'cover' permite que la imagen de fondo se repita en el contenedor.
12.

Para que o porque establecemos el font-size en 62.5% y activamos el boder-box?

a)

para aumentar la legibilidad

b)

Para reducir el tamaño del total al momento de ingresar margenes.

c)

para compatibilidad con dispositivos móviles

d)

se define en 62.5% para simplificar el uso de rems, y evitar que las margenes y paddinsg aumenten el tamaño total

13.

Que hace la propiedad background color en este caso?

4 lines
14.

puedo utilizar align-items sin display:flex?

a)
Sí, se puede utilizar con display:block.
b)
Sí, se puede utilizar con display:inline.
c)
No, se puede utilizar con display:grid.
d)
No, no se puede utilizar align-items sin display:flex.
15.

¿Qué ventajas ofrece el uso de Flexbox o Grid frente a organizar elementos con márgenes o float?

4 lines
16.

Si abres esta página en un teléfono, ¿qué reglas CSS hacen que el diseño se adapte correctamente?

4 lines
17.

¿Por qué es importante usar variables CSS (--primario, --secundario, etc.) en un proyecto web?

a)
Mejoran la velocidad de carga del sitio web.
b)
Eliminan la necesidad de usar CSS.
c)
Son obligatorias para todos los proyectos web.
d)
Es importante usar variables CSS porque mejoran la consistencia, la mantenibilidad y la eficiencia en la gestión de estilos en un proyecto web.
18.

Que hace el width en este caso?

a)
El 'width' define el ancho mínimo del elemento como 60rem o el 100% del contenedor, lo que sea menor.
b)
El 'width' define el margen del elemento.
c)
El 'width' solo afecta a elementos de bloque.
d)
El 'width' establece el alto del elemento.
19.

para que sirve el archivo normalize.css?

a)
Normalize.css es un archivo que se usa para crear gráficos en la web.
b)
Normalize.css sirve para aumentar el tamaño de las fuentes en todos los navegadores.
c)
Normalize.css sirve para normalizar los estilos de los elementos HTML entre diferentes navegadores.
d)
Normalize.css se utiliza para agregar efectos de animación a los elementos HTML.
20.

Que hace .campo: nth-child en este código?

a)
Selecciona el tercer y cuarto elemento hijo de .campo para aplicarles estilos específicos.
b)
Selecciona todos los elementos hijos de .campo.
c)
Aplica estilos a los elementos padre de .campo.
d)
Elimina los elementos hijos de .campo.
21.

De acuerdo al código 1 rem equivale a cuantos pixeles?

a)

10

b)

8

c)

15

d)

14,5

22.

Que hace el hover?

a)
El hover cambia el estilo de un elemento cuando el cursor está sobre él.
b)
El hover cambia el color de fondo de toda la página.
c)
El hover aumenta el tamaño del texto permanentemente.
d)

el hover cambia el estilo de un elemento.

23.

¿Por qué se usan align-items y justify-content?

a)
Para cambiar el color de fondo del contenedor.
b)
Para definir el tamaño de los elementos en el contenedor.
c)
Para aplicar márgenes a los elementos dentro del contenedor.
d)
Se usan para alinear y distribuir elementos en un contenedor Flexbox.
24.

Que hace el grid-template-columns?

a)
Controla el espacio entre los elementos de la cuadrícula.
b)
Define el número de filas en un contenedor de cuadrícula.
c)
Establece el color de fondo del contenedor.
d)
Define el número y tamaño de las columnas en un contenedor de cuadrícula.
25.

grid-template-columns: repeat(3, 1fr)

grid-template-columns: (50%, 50%, 50%)

grid-template-columns: (1fr, 1fr, 1fr)

que hace cada comando?

4 lines
26.

Si quiero aplicar un margen externo que uso en css?

a)
spacing
b)
margin
c)
border
d)
padding
27.

Si quiero aplicar un margen interno que uso en css?

a)
margin
b)
border
c)
outline
d)
padding
28.

¿Qué efecto tiene combinar .boton con .w-100?

4 lines
29.

.titulo span {

color: var(--primario);

}

¿Qué texto cambiaría de color en la página y por qué?

a)
El texto dentro de los elementos

en la clase 'titulo'.

b)
Todo el texto en la página cambiaría de color.
c)

El texto dentro de los elementos en la clase 'titulo' y en la etiqueta span

d)
Solo el texto en negrita cambiaría de color.
30.

Que hace esta línea de código?

4 lines
31.

para que sirve esta linea?

a)
Cargar una imagen para la página.
b)
Pre-cargar una hoja de estilos CSS para mejorar el rendimiento de la carga de la página.
c)
Establecer un script de JavaScript.
d)
Definir un meta tag para SEO.
32.

que hace ese código? y a quien se los aplica?

4 lines
33.

que hace bold?

a)
Cambia el color del texto.
b)
Hace que el texto sea negrita.
c)
Subraya el texto.
d)
Aumenta el tamaño del texto.
34.

Si quiero dividir una seccion en 3 columnas y 4 filas uso flex o grid?

a)
Grid
b)
Flex
35.

como puedo convertir un div en un circulo perfecto usando css?

a)
Usa CSS: div { width: 100px; height: 100px; border-radius: 50%; }
b)
div { width: 200px; height: 100px; border-radius: 0; }
c)
div { width: 100px; height: 100px; border: 1px solid black; }
d)
div { width: 50px; height: 150px; border-radius: 25%; }