Test de Diseño Web Adaptable con CSS3: Evalúa tus Conocimientos

Question 1

¿Cuál de las siguientes propiedades CSS3 se utiliza para adaptar el tamaño de la fuente según el tamaño de la pantalla?

Accepted Answer

font-size

Answer

text-align

Answer

font-weight

Answer

color

Question 2

¿Cuál de los siguientes selectores de CSS3 se utiliza para seleccionar un elemento solo cuando es hijo directo de otro elemento?

Accepted Answer

>

Answer

*

Answer

~

Answer

+

Question 3

¿Qué propiedad CSS3 se utiliza para crear un efecto de desplazamiento de paralaje?

Accepted Answer

background-attachment

Answer

background-color

Answer

background-repeat

Answer

background-position

Question 4

¿Cuál es una ventaja clave del diseño web receptivo?

Accepted Answer

Proporciona una mejor experiencia de usuario en todos los dispositivos

Answer

Incrementa el costo de desarrollo

Answer

Reduce el tiempo de carga de la página

Question 5

¿Qué técnica de diseño web receptivo implica organizar el diseño en una cuadrícula flexible de columnas?

Accepted Answer

Diseño basado en cuadrícula

Answer

Diseño adaptativo

Answer

Diseño de punto de interrupción

Answer

Diseño fluido

Question 6

¿Cuál de las siguientes propiedades CSS3 controla el espacio vertical entre líneas de texto?

Accepted Answer

line-height

Answer

letter-spacing

Answer

text-indent

Answer

word-spacing

Question 7

¿Qué técnica de diseño web receptivo implica utilizar un diseño diferente para diferentes rangos de tamaños de pantalla?

Accepted Answer

Diseño adaptativo

Answer

Diseño fluido

Answer

Diseño basado en cuadrícula

Answer

Diseño elástico

Question 8

¿Cuál de las siguientes propiedades CSS3 se utiliza para especificar el radio de los bordes redondeados?

Accepted Answer

border-radius

Answer

border-color

Answer

border-width

Answer

border-style

Question 9

¿Qué técnica de diseño web receptivo implica utilizar un diseño único que se adapta a todos los tamaños de pantalla?

Accepted Answer

Diseño fluido

Answer

Diseño adaptativo

Answer

Diseño basado en cuadrícula

Question 10

Identifica la propiedad CSS que permite ocultar un elemento cuando el tamaño de la pantalla es inferior a un valor específico:

Accepted Answer

display: none

Answer

visibility: hidden

Answer

opacity: 0

Answer

z-index: -1

Question 11

¿Cuál de los siguientes atributos HTML indica que un elemento debe tener el ancho de su elemento padre?

Accepted Answer

width="100%"

Answer

height="100%"

Answer

max-width="100%"

Answer

min-width="100%"

Question 12

Identifica la pseudo-clase que permite modificar la apariencia de un botón al posicionar el cursor sobre él:

Accepted Answer

:hover

Answer

:focus

Answer

:active

Question 13

Los puntos de interrupción (breakpoints) en CSS3 sirven para:

Accepted Answer

Aplicar diferentes estilos para diferentes tamaños de pantalla.

Answer

Cambiar el orden de los elementos de la página.

Answer

Crear animaciones interactivas.

Question 14

La propiedad CSS3 "flexbox" permite:

Accepted Answer

Organizar elementos dentro de un contenedor según reglas definidas.

Answer

Crear efectos de desplazamiento.

Answer

Cambiar la fuente y el tamaño del texto.

Question 15

¿Cuál de los siguientes es un ejemplo de una consulta de medios en CSS3?

Accepted Answer

@media (max-width: 600px)

Answer

@pantalla

Answer

@móvil

Answer

@dispositivo

Question 16

Para ocultar un elemento en pantallas con un ancho menor o igual a 500 píxeles, se utilizaría la siguiente consulta de medios:

Accepted Answer

@media (max-width: 500px) { display: none; }

Answer

@media (min-width: 500px) { display: none; }

Answer

@media (500px) { display: none; }

Answer

@media (pantalla: 500px) { display: none; }

Question 17

La resolución de una pantalla se refiere a:

Accepted Answer

El número de píxeles por pulgada.

Answer

El tipo de sistema operativo del dispositivo.

Answer

La cantidad de memoria RAM del dispositivo.

Answer

El tamaño de la pantalla en pulgadas.

Question 18

Para crear un diseño de cuadrícula receptivo en CSS3, se puede utilizar la propiedad:

Accepted Answer

grid

Answer

table

Answer

flex

Question 19

¿Qué propiedad CSS se utiliza para controlar el tamaño de fuente que se escala con el tamaño de la pantalla?

Accepted Answer

font-size

Answer

font-family

Answer

font-weight

Answer

font-style

Question 20

¿Qué consulta de medios se utiliza para mostrar un diseño específico para dispositivos móviles con pantallas más pequeñas?

Accepted Answer

@media screen and (max-width: 768px)

Answer

@media screen and (min-width: 1200px)

Answer

@media print and (min-width: 992px)

Answer

@media screen and (max-height: 480px)

Question 21

¿Cuál de los siguientes es un beneficio clave del diseño responsivo?

Accepted Answer

Mejor experiencia de usuario en todos los dispositivos

Answer

Menor tiempo de carga

Answer

Mayor SEO

Answer

Fácil mantenimiento

Question 22

En una disposición de cuadrícula CSS, ¿qué propiedad se utiliza para controlar el orden en el que se colocan los elementos?

Accepted Answer

order

Answer

flex-direction

Answer

grid-column

Answer

justify-content

Question 23

¿Qué valor de la propiedad CSS 'display' es más adecuado para crear un menú desplegable?

Accepted Answer

flex

Answer

block

Answer

inline

Question 24

¿Cuál de las siguientes opciones NO es una ventaja de utilizar preprocesadores CSS como SASS?

Accepted Answer

Menor legibilidad del código

Answer

Nesting anidado

Answer

Código más modular y reutilizable

Answer

Variables y funciones personalizadas

Question 25

En el diseño web responsivo, ¿qué propiedad CSS3 se emplea para definir puntos de ruptura (breakpoints)?

Accepted Answer

@media

Answer

flex-box

Answer

grid

Answer

max-width

Question 26

En un diseño de cuadrícula flexible para una página web adaptable, ¿qué propiedad CSS3 es esencial?

Accepted Answer

display: grid

Answer

position

Answer

float

Answer

margin

Question 27

En un diseño web responsivo, ¿cuál de las siguientes es una unidad de medida relativa?

Accepted Answer

em

Answer

in

Answer

px

Answer

cm

Question 28

En una 'media query' de CSS, ¿cómo se utiliza la propiedad 'min-width'?

Accepted Answer

Para establecer el tamaño mínimo de pantalla en el que se aplicará un estilo específico.

Answer

Para aplicar un estilo específico a un rango de tamaños de pantalla.

Answer

Para definir el tamaño máximo de pantalla donde se aplicará un estilo específico.

Question 29

Al optimizar la carga de imágenes en un diseño web responsivo, ¿cuál de las siguientes estrategias es inadecuada?

Accepted Answer

Usar imágenes de alta resolución para todos los dispositivos.

Answer

Utilizar formatos de imágenes optimizados, como JPEG 2000 o WebP.

Answer

Usar el atributo 'sizes' para escalar las imágenes según el tamaño de la pantalla.

Question 30

¿Cuál de los siguientes NO es un beneficio del diseño web responsivo?

Accepted Answer

Aumenta el tiempo de carga de la página web.

Answer

Mejora la experiencia del usuario en múltiples dispositivos.

Answer

Reduce el uso de datos en dispositivos móviles.

Answer

Aumenta la visibilidad del sitio web en los resultados de búsqueda.

Question 31

En un diseño web responsivo, ¿qué estrategia es la más adecuada para optimizar el contenido de texto para diversas pantallas?

Accepted Answer

Utilizar el atributo 'font-size' con valores relativos para ajustar el tamaño del texto.

Answer

Usar el atributo 'font-family' para cambiar la fuente del texto.

Answer

Usar el atributo 'color' para cambiar el color del texto.

Question 32

Para definir un rango específico de anchos de pantalla en un diseño web adaptable, ¿qué tipo de media query se utiliza?

Accepted Answer

@media (min-width: 768px) and (max-width: 1024px)

Answer

@media only screen

Answer

@media (max-width: 768px)

Answer

@media screen

Question 33

En un diseño responsivo, ¿cuál es la propiedad CSS utilizada para establecer el ancho máximo de un elemento?

Accepted Answer

max-width

Answer

min-width

Answer

height

Answer

width

Question 34

En diseños responsivos, ¿qué función principal cumplen las unidades de medida relativas como 'em' y 'rem'?

Accepted Answer

Ajustar el tamaño de los elementos de forma proporcional al tamaño de la fuente del navegador o del elemento raíz.

Answer

Establecer dimensiones absolutas que no se adaptan a diferentes tamaños de pantalla.

Question 35

Para modificar el orden de los elementos en una página web según el tamaño de la pantalla, se utiliza la propiedad CSS:

Accepted Answer

order

Answer

float

Answer

display

Answer

position

Question 36

Las 'media queries' en CSS3 permiten:

Accepted Answer

Aplicar estilos diferentes a la página web según el tamaño de la pantalla, la orientación del dispositivo y otras características.

Answer

Crear animaciones complejas con transiciones suaves.

Question 37

El atributo 'viewport' en la etiqueta <meta> se utiliza para:

Accepted Answer

Controlar la visualización inicial de la página web en dispositivos móviles, incluyendo el zoom y el tamaño de la pantalla.

Answer

Definir el tamaño de la fuente principal de la página web.

Question 38

¿Qué son los 'breakpoints' en el contexto del diseño responsivo?

Accepted Answer

Puntos de corte en el ancho de la pantalla que activan diferentes estilos CSS.

Answer

Solo para dispositivos móviles.

Answer

Se utilizan para crear animaciones con transiciones suaves.

Question 39

¿Qué propiedad CSS3 se usa principalmente para definir el diseño responsivo?

Accepted Answer

media queries

Answer

float

Answer

display

Answer

position

Question 40

¿Qué propiedad CSS3 se utiliza para cambiar dinámicamente el diseño de un elemento según el tamaño de la pantalla?

Accepted Answer

flexbox

Answer

table

Answer

inline

Answer

grid

Question 41

¿Qué elemento HTML se emplea para definir una sección que modifica su diseño en función del tamaño de la pantalla?

Accepted Answer

Answer

<audio>

Answer

<video>

Answer

<img>

Question 42

¿Qué propiedad CSS3 se utiliza para definir el espacio entre elementos flex?

Accepted Answer

gap

Answer

padding

Answer

margin

Question 43

¿Qué propiedad CSS3 se utiliza para ocultar un elemento en pantallas más pequeñas?

Accepted Answer

display: none

Answer

visibility: hidden

Answer

opacity: 0

Answer

transform: scale(0)

Question 44

Selecciona la propiedad CSS3 que se utiliza para alinear verticalmente los elementos flex.

Accepted Answer

align-items

Answer

flex-direction

Answer

justify-content

Answer

align-content

Question 45

¿Qué propiedad CSS3 se utiliza para especificar los puntos de interrupción (breakpoints) para el diseño responsivo?

Accepted Answer

@media

Answer

float

Answer

display

Answer

width

Question 46

Un sitio web responsivo se adapta a diferentes tamaños de pantalla utilizando...

Accepted Answer

hojas de estilo en cascada (CSS) que se aplican según el tamaño de la pantalla.

Answer

imágenes con diferentes tamaños para cada tipo de dispositivo.

Answer

JavaScript para cambiar el tamaño de los elementos en tiempo real.

Question 47

La etiqueta meta del viewport de CSS se utiliza para...

Accepted Answer

controlar cómo el navegador muestra la página web en dispositivos móviles.

Answer

establecer el ancho de las imágenes para dispositivos móviles.

Answer

definir puntos de interrupción para el diseño responsivo.

Question 48

Un punto de interrupción (breakpoint) se define como...

Accepted Answer

un ancho de pantalla específico que activa un cambio en el diseño.

Answer

un elemento de diseño que se adapta a diferentes tamaños de pantalla.

Answer

una técnica para optimizar imágenes para dispositivos móviles.

Question 49

La etiqueta HTML <meta name='viewport' ...> se coloca dentro de la sección...

Accepted Answer

<head>

Answer

<body>

Answer

Answer

<style>

Question 50

Para optimizar imágenes para diferentes tamaños de pantalla en un diseño responsivo, se recomienda usar...

Accepted Answer

imágenes con diferentes tamaños y el atributo 'srcset' en la etiqueta <img>

Answer

imágenes de alta resolución para todos los dispositivos.

Answer

imágenes de baja resolución para dispositivos móviles.

Question 51

El uso de 'media queries' en CSS3 permite...

Accepted Answer

aplicar diferentes estilos CSS dependiendo del tamaño de la pantalla.

Answer

crear animaciones CSS que se ejecutan en dispositivos móviles.

Answer

redimensionar elementos en tiempo real con JavaScript.

Question 52

El concepto de 'Mobile First' en el diseño responsivo implica...

Accepted Answer

diseñar primero para dispositivos móviles y luego adaptar para pantallas más grandes.

Answer

crear un diseño único que funcione en todos los dispositivos.

Answer

diseñar para pantallas grandes y luego optimizar para dispositivos móviles.