¿Qué función de CSS vincula el progreso de una animación a la posición de desplazamiento de un contenedor de scroll?
La función `scroll()`.
Flashcards con solución de CSS
¿Qué función de CSS vincula la animación a la posición de un elemento dentro de su puerto de desplazamiento (scrollport)?
La función `view()`.
En las animaciones vinculadas al desplazamiento, ¿qué representan los estados $0\%$ y $100\%$ de los keyframes?
Representan el inicio y el final de la posición de desplazamiento respectivamente.
¿Qué valor predeterminado tiene la propiedad `animation-range` en la función `view()`?
Su valor predeterminado es `cover`.
¿Qué modo de relleno de animación (`animation-fill-mode`) se recomienda para que las animaciones de scroll funcionen hacia adelante y hacia atrás?
Se recomienda usar el valor `both`.
¿Cuál es la función de la propiedad `timeline-scope` en animaciones de scroll complejas?
Permite compartir el progreso de una línea de tiempo con elementos que no son descendientes directos.
¿Cómo se especifica el eje horizontal en la función `scroll()`?
Se utiliza el parámetro `x` o el valor lógico `inline`, como en `scroll(x)`.
Para crear animaciones de scroll que no se ejecuten en el hilo principal (main thread), ¿qué APIs se deben integrar?
Se deben integrar con Web Animations API (WAAPI) o CSS Animations API.
¿Qué unidad de longitud absoluta equivale exactamente a $96$ píxeles o $2.54$ cm?
La pulgada (`in`).
¿Qué unidad de longitud relativa se basa en el tamaño de fuente del elemento raíz?
La unidad `rem`.
¿A qué es relativa la unidad `ch` en CSS?
Es relativa al ancho del carácter "0" (cero) de la fuente actual.
¿Qué porcentaje del viewport representa la unidad `1vw`?
Representa el $1\%$ del ancho del puerto de visión (viewport).
En dispositivos de baja densidad de puntos, ¿a qué equivale habitualmente $1px$?
Equivale a un píxel de dispositivo (punto) de la pantalla.
¿Qué diferencia hay entre usar `opacity` y `rgba()` para la transparencia de un fondo?
`opacity` afecta a todos los hijos del elemento, mientras que `rgba()` solo afecta al color especificado.
¿Cuál es el rango de valores permitido para la propiedad `opacity`?
Un número entre $0.0$ (totalmente transparente) y $1.0$ (totalmente opaco).
¿Qué parámetro adicional añade `RGBA` al modelo de color `RGB`?
El canal alfa (`alpha`), que especifica la opacidad.
¿Cómo se debe declarar una propiedad personalizada (variable) en CSS?
Utilizando un nombre que comience con dos guiones, por ejemplo: `--mi-color`.
¿Qué función se utiliza para acceder al valor de una variable CSS?
La función `var()`.
¿En qué pseudo-clase se suelen declarar las variables CSS para que tengan un alcance global?
En la pseudo-clase `:root`.
¿Qué sucede si una variable CSS se define como `--color-fondo` y se intenta llamar como `var(--Color-Fondo)`?
No funcionará, ya que los nombres de las propiedades personalizadas distinguen entre mayúsculas y minúsculas.
¿Qué ocurre si el navegador encuentra una sustitución inválida mediante `var()` en una propiedad que se puede heredar?
El navegador utiliza el valor heredado o, en su defecto, el valor inicial por defecto.
¿Cómo se definen múltiples valores de sustitución (fallbacks) en la función `var()`?
Anidando funciones `var()` como segundo argumento, por ejemplo: `var(--a, var(--b, red))`.
¿Qué selector de atributo selecciona elementos cuyo valor de atributo comienza exactamente con una cadena específica?
El selector `[atributo^="valor"]`.
¿Qué selector selecciona un elemento `A` si es el único hijo de su padre?
El selector `A:only-child`.
¿Qué hace el selector `:nth-child(3n+2)`?
Selecciona cada tercer elemento empezando por el segundo.
¿Cuál es la diferencia entre `:nth-child(n)` y `:nth-of-type(n)`?
`:nth-child` cuenta todos los hijos, mientras que `:nth-of-type` solo cuenta los hijos del mismo tipo de elemento.
¿Qué selector selecciona elementos que no coinciden con el selector `X`?
El selector `:not(X)`.
¿Qué combinador se usa para seleccionar el elemento `B` que es el hermano adyacente inmediato de `A`?
El combinador de suma, `A + B`.
¿Qué selector selecciona todos los elementos que están vacíos (sin hijos ni texto)?
El selector `:empty`.
¿Qué función de CSS permite recortar un elemento en formas como círculos, elipses o polígonos?
La propiedad `clip-path`.
Para crear una forma compleja con `clip-path`, ¿qué función permite definir puntos mediante coordenadas de porcentaje o longitud?
La función `polygon()`.
¿Qué condición deben cumplir dos formas de `clip-path` para que sea posible realizar una animación o transición entre ellas?
Deben tener el mismo número de puntos.
¿Qué función de gradiente se debe usar para que los colores se repitan infinitamente en todas las direcciones?
La función `repeating-linear-gradient()`.
En un gradiente lineal, ¿qué indica un valor de $0deg$?
Equivale a la dirección `to top` (hacia arriba).
¿Qué es un "color-hint" (pista de color) en la sintaxis de gradientes de CSS?
Un valor de longitud o porcentaje que define el punto medio de la transición entre dos colores adyacentes.
¿Por qué las funciones de gradiente no funcionan en la propiedad `background-color`?
Porque los gradientes son de tipo `<image>` y no de tipo `<color>`.
¿Qué herramienta interactiva permite identificar selectores CSS haciendo clic en elementos de una página web?
SelectorGadget.
¿Qué formato de archivo es esencial para importar iconos personalizados a herramientas como IcoMoon?
El formato SVG (Scalable Vector Graphics).
¿Cuál es la principal ventaja de usar fuentes de iconos frente a imágenes individuales?
Permiten una escalabilidad infinita y se pueden personalizar con CSS (color, tamaño) como si fueran texto.
En el contexto de fuentes de iconos, ¿qué función cumple el archivo `style.css` generado por IcoMoon?
Define las clases CSS y asigna los códigos unicode de la fuente a dichas clases.
¿Qué unidad de longitud absoluta equivale a $1/72$ de pulgada?
El punto (`pt`).
¿Cuál es la relación entre la unidad pica (`pc`) y los puntos (`pt`)?
$1pc = 12pt$.
¿Qué significa que las variables CSS están sujetas a la "cascada"?
Significa que su valor depende de dónde se declaren y que los elementos descendientes las heredan.
¿Qué propiedad se utiliza para definir una propiedad personalizada con seguridad de tipo (type-safe) en navegadores Chromium?
La regla-at `@property`.
En una animación de scroll con `view()`, ¿qué rango indica que la animación comienza cuando el elemento empieza a entrar en el scroller?
El rango `contain`.
¿Qué función de CSS se usa para definir una elipse en la propiedad `clip-path`?
La función `ellipse()`.
¿Qué selector de atributo selecciona elementos cuyo valor de atributo termina exactamente con una cadena específica?
El selector `[atributo$="valor"]`.
¿Qué selector de atributo selecciona elementos cuyo valor de atributo contiene una subcadena específica en cualquier posición?
El selector `[atributo*="valor"]`.
¿Qué selector selecciona el segundo elemento de una lista solo si es un elemento de lista (`li`)?
El selector `li:nth-child(2)`.
¿Cómo se selecciona el penúltimo elemento de un grupo si es un elemento de lista?
Utilizando `li:nth-last-child(2)`.
¿Qué selector selecciona solo los elementos `li` que son impares?
El selector `li:nth-child(odd)` o `li:nth-child(2n+1)`.
¿Qué selector selecciona el primer elemento de su tipo entre un grupo de hermanos?
El selector `:first-of-type`.
¿Qué selector selecciona un elemento solo si es el único de su tipo entre sus hermanos?
El selector `:only-of-type`.
¿Qué combinador selecciona todos los elementos `B` que son hermanos de `A` (pero no necesariamente adyacentes)?
El combinador de tilde, `A ~ B`.
¿Qué combinador selecciona el elemento `B` que es hijo directo de `A`?
El combinador `>`, por ejemplo `A > B`.
¿Qué selector selecciona todos los elementos de la página?
El selector universal `*`.
¿Qué selector selecciona todos los elementos `*` que son descendientes de `A`?
El selector `A *`.
¿Qué propiedad de CSS permite especificar que un elemento debe mantenerse fijo en su lugar mientras se hace scroll?
La propiedad `position: fixed`.
Para respetar la preferencia del usuario de no ver animaciones, ¿qué media query se debe utilizar?
La media query `@media (prefers-reduced-motion: no-preference)`.
¿Qué valor de `animation-timing-function` suele sentirse mejor en animaciones vinculadas al gesto de scroll?
El valor `linear`.
¿Qué herramienta permite depurar y visualizar animaciones de scroll en Chrome DevTools?
La extensión "Scroll-Driven Animations Debugger".
¿Qué propiedad de CSS define el nombre de la línea de tiempo de vista de un elemento para ser referenciada por otros?
La propiedad `view-timeline-name`.
En el diseño de iconos vectoriales para fuentes, ¿por qué deben usarse figuras sólidas planas en lugar de contornos?
Porque los motores de fuentes interpretan mejor los rellenos que los grosores de trazo variables.
Cuando se usa `clip-path: inset()`, ¿qué valores opcionales permiten redondear las esquinas?
Valores similares a `border-radius` precedidos por la palabra clave `round`.
¿Cuál es la longitud de un gradiente que se repite en `repeating-linear-gradient()`?
Es la distancia entre el primer y el último "color stop".
¿Qué unidad de longitud relativa es equivalente al $1\%$ de la dimensión más pequeña del viewport?
La unidad `vmin`.
¿Qué unidad de longitud relativa es equivalente al $1\%$ de la dimensión más grande del viewport?
La unidad `vmax`.
¿Qué sucede si no se especifica una unidad para un valor de longitud de $0$ en CSS?
La unidad se puede omitir sin causar errores.
¿Por qué no se recomiendan las unidades absolutas como `cm` o `mm` para pantallas?
Porque los tamaños de pantalla y las resoluciones varían demasiado entre dispositivos.
¿Qué selector selecciona todos los elementos `p` que tienen la clase `intro`?
El selector `p.intro`.
¿Qué selector selecciona elementos que tienen el foco del teclado?
El selector `:focus`.
¿Qué selector selecciona la primera letra de un elemento de texto?
El pseudo-elemento `::first-letter`.
¿Cómo se selecciona un elemento con el ID `mi-direccion`?
Utilizando `#mi-direccion`.
¿Qué selector selecciona elementos que están deshabilitados en un formulario?
El selector `:disabled`.
¿Qué selector selecciona la primera línea de un párrafo?
El pseudo-elemento `::first-line`.
¿Cuál es la principal ventaja de rendimiento de las animaciones controladas por desplazamiento en CSS en comparación con JavaScript?
Se ejecutan fuera del hilo principal, evitando el bloqueo del renderizado y el jank.
¿Qué propiedad de CSS se utiliza para vincular una animación a una línea de tiempo de desplazamiento o de vista?
Se utiliza la propiedad "animation-timeline".
¿Cómo se diferencia una animación 'scroll-driven' de una 'scroll-triggered'?
La versión 'driven' avanza y retrocede con el scroll, mientras que la 'triggered' se ejecuta completamente al activarse.
Definición: Línea de tiempo de progreso de desplazamiento (Scroll Progress Timeline).
Vincula el progreso de una animación directamente a la posición de desplazamiento de un contenedor.
¿Qué función se utiliza para crear una línea de tiempo de desplazamiento anónima?
Se utiliza la función "scroll()".
¿Cuáles son los dos parámetros opcionales de la función "scroll()"?
Los parámetros son "<scroller>" y "<axis>".
En la función "scroll()", ¿a qué se refiere el valor por defecto "nearest"?
Se refiere al contenedor de desplazamiento ancestro más cercano del elemento actual.
Mencione los tres valores posibles para el parámetro "<scroller>" en una línea de tiempo anónima.
Los valores son "nearest", "root" y "self".
¿Qué ejes de desplazamiento representan los valores "block" e "inline"?
Representan el eje vertical y el eje horizontal, respectivamente, según el modo de escritura.
La función "view()" rastrea la posición relativa de un elemento dentro de un _____.
Scrollport (área visible del contenedor de desplazamiento).
¿Qué sucede con la animación cuando el usuario deja de desplazarse (pausa el scroll)?
La animación se pausa inmediatamente, manteniendo su estado de progreso actual.
¿Cuál es el valor por defecto de "animation-range" en una línea de tiempo de desplazamiento?
El valor por defecto es "normal", que equivale a "0\%" (inicio) y "100\%" (final).
Para usar una línea de tiempo con nombre, ¿qué propiedad debe aplicarse al contenedor de desplazamiento?
Debe aplicarse la propiedad "scroll-timeline-name".
¿Qué formato debe seguir el nombre de una línea de tiempo personalizada en CSS?
Debe ser un identificador que comience con dos guiones, conocido como "<dashed-ident>".
¿Para qué sirve la propiedad "timeline-scope"?
Permite extender el alcance de una línea de tiempo con nombre más allá del subárbol de un elemento.
¿Por qué es recomendable declarar "animation-timeline" después de la propiedad abreviada "animation"?
La propiedad abreviada restablece el valor de "animation-timeline" a su valor inicial.
¿Cuál es la función del parámetro "<inset>" en una línea de tiempo de vista?
Ajusta los bordes del scrollport para determinar cuándo se considera que el elemento está 'a la vista'.
En una línea de tiempo de vista, ¿qué rastrea el rango de animación "cover"?
Rastrea al elemento desde que comienza a entrar en el scrollport hasta que sale completamente.
En una línea de tiempo de vista, ¿qué rastrea el rango de animación "contain"?
Rastrea al elemento desde que está completamente contenido en el scrollport hasta que deja de estarlo.
El rango "entry" en una "view-timeline" rastrea al elemento desde que entra al scrollport hasta que _____.
Está completamente dentro del área visible.
¿Qué rango de animación se debe usar para rastrear un elemento desde que comienza a salir del scrollport hasta que sale del todo?
Se debe utilizar el rango "exit".
¿Cómo se pueden definir puntos de inicio y fin específicos en "animation-range" usando valores de vista?
Se combinan un nombre de rango y un porcentaje, como en "entry 20\% exit 80\%".
¿Qué funcionalidad permite combinar animaciones de entrada y salida en un solo bloque de "@keyframes"?
El uso de selectores de rango de línea de tiempo como "entry 0\%" o "exit 100\%" dentro de la regla.
¿Por qué es preferible usar "overflow: clip" en lugar de "overflow: hidden" al trabajar con estas animaciones?
Evita que el elemento se convierta accidentalmente en un contenedor de desplazamiento no deseado.
¿Cómo afecta el uso de "position: absolute" a las líneas de tiempo de desplazamiento anónimas?
Puede impedir que el elemento encuentre su contenedor de desplazamiento ancestro previsto.
Mencione tres propiedades de CSS que son amigables con la GPU y recomendadas para estas animaciones.
Las propiedades recomendadas son "transform", "opacity" y ciertos filtros.
¿Qué función de sincronización (easing) se recomienda generalmente para barras de progreso de lectura?
Se recomienda una función de sincronización lineal ("linear").
¿Qué regla de CSS permite aplicar estas animaciones solo si el navegador las soporta?
Se utiliza la regla "@supports (animation-timeline: scroll())".
¿Cómo se debe manejar la accesibilidad para usuarios con sensibilidad al movimiento?
Usando la consulta de medios "prefers-reduced-motion: reduce" para desactivar o simplificar las animaciones.
En Firefox, ¿por qué se suele establecer "animation-duration" en $1ms$ para animaciones de desplazamiento?
Porque Firefox requiere una duración distinta de cero para aplicar la animación al elemento.
Diferencia técnica: "scroll()" vs "view()".
"scroll()" se basa en la posición absoluta de la barra de scroll; "view()" se basa en la visibilidad del elemento.
Si se desea rastrear el desplazamiento horizontal, ¿qué valor de eje se debe pasar a la función "scroll()"?
Se debe pasar el valor "inline" o "x".
¿Qué componente de la línea de tiempo de vista controla la dirección del desplazamiento?
La propiedad "view-timeline-axis".
¿Cuál es el propósito de la propiedad "will-change" en este contexto?
Informa al navegador para que promueva el elemento a la GPU y optimice el rendimiento.
En una "view-timeline", ¿qué sucede si se usa un valor de "inset" negativo?
Ajusta los bordes del scrollport hacia afuera, activando la animación antes de que el elemento sea visible.
¿Qué sucede con la animación si el contenido del contenedor no se desborda?
La línea de tiempo no se crea y la animación no se ejecuta.
¿Qué propiedad define el nombre de una línea de tiempo de vista personalizada?
Se utiliza la propiedad "view-timeline-name".
La propiedad abreviada "scroll-timeline" combina las propiedades _____ y _____.
"scroll-timeline-name" y "scroll-timeline-axis".
¿Cómo se calcula la visibilidad inicial de un elemento en una "view-timeline" si tiene una transformación aplicada?
El navegador evalúa el estado del elemento antes de aplicar cualquier transformación como "translate".
Para crear un efecto de parallax, ¿qué propiedad se suele animar en relación al scroll?
Se suele animar el valor de "transform: translateY()" o "background-position".
¿Qué limitación tiene el uso de un 'polyfill' para navegadores no compatibles?
Obliga a que la animación se ejecute en el hilo principal, perdiendo el beneficio de rendimiento nativo.
En el desarrollo de estas animaciones, ¿qué herramienta visual permite entender los rangos de "view-timeline"?
El visualizador de rangos de "view-timeline" creado por Bramus.
Si un elemento tiene "animation-timeline: none", ¿qué línea de tiempo utiliza?
Ninguna, el elemento no se animará en absoluto.
¿Cuál es el eje por defecto para todas las líneas de tiempo de desplazamiento si no se especifica?
El eje por defecto es "block".
Para una barra de progreso que ignora un pie de página de $500px$, ¿cómo se vería el "animation-range"?
Se definiría como "animation-range: normal calc(100\% - 500px)".
¿Qué función de WAAPI (Web Animations API) permite crear líneas de tiempo de desplazamiento en JavaScript?
Se utiliza el constructor "ScrollTimeline".
¿Qué riesgo conlleva el uso excesivo de "will-change"?
Puede provocar un consumo excesivo de memoria en el dispositivo del usuario.
¿Qué valor de la propiedad "overflow" permite el desplazamiento programático pero oculta la barra?
El valor "hidden" actúa como contenedor de desplazamiento, a diferencia de "clip".
¿Cómo se vincula un elemento a la línea de tiempo de un hermano utilizando CSS?
Se asigna un nombre a la línea de tiempo del hermano y se usa "timeline-scope" en un ancestro común.
En una línea de tiempo de vista, el $0\%$ de progreso ocurre cuando el elemento comienza a interceptar el borde de _____.
Entrada (block-end o inline-end) del scrollport.
¿Qué propiedad abreviada se puede usar para configurar el nombre, eje y márgenes de una línea de tiempo de vista?
Se puede usar la propiedad abreviada "view-timeline".
¿Qué término antiguo se usaba antes de 'scroll-driven animations'?
Anteriormente se conocían como "scroll-linked animations".
¿Qué sucede con el progreso de la animación si el usuario se desplaza hacia arriba?
La animación se invierte y retrocede a través de sus fotogramas clave.
¿Cuál es la sintaxis correcta para declarar un nombre y un eje en "scroll-timeline"?
La sintaxis es "scroll-timeline: --nombre-de-linea eje;".
¿Qué propiedad permite animar un elemento a lo largo de una trayectoria curva durante el desplazamiento?
Se utiliza la propiedad "offset-path" junto con la línea de tiempo de desplazamiento.
¿Qué define el modelo de cajas (Box Model) en CSS?
Determina cómo se calculan las dimensiones y el espaciado de cada elemento tratado como una caja rectangular.
¿Cuáles son los cuatro componentes del modelo de cajas de CSS?
Contenido (content), relleno (padding), borde (border) y margen (margin).
En el modelo de cajas, el espacio transparente entre el contenido y el borde se denomina _____.
padding (relleno)
¿Qué componente del modelo de cajas se sitúa fuera del borde y es siempre transparente?
El margen (margin).
Por defecto, las propiedades 'width' y 'height' en CSS se aplican únicamente a la parte del _____.
contenido (content)
¿Cómo se calcula el ancho total real de un elemento en el modelo de cajas estándar?
Sumando el ancho definido más el relleno (izquierdo/derecho) y el borde (izquierdo/derecho).
¿Qué componente del modelo de cajas afecta al espacio que ocupa el elemento en la página pero no se suma al tamaño real de la caja?
El margen (margin).
¿Cómo responden los elementos 'inline' (en línea) a las propiedades 'width' y 'height'?
Estas propiedades son ignoradas, ya que el espacio depende del tamaño de su contenido.
En los elementos 'inline', ¿qué márgenes son ignorados por el navegador?
Los márgenes superiores (top) e inferiores (bottom).
¿Qué propiedad de CSS debe cambiarse para que un elemento 'inline' acepte todas las reglas del modelo de cajas?
La propiedad 'display' (a 'block' o 'inline-block').
¿Cuál es la función principal de la propiedad 'box-sizing' en CSS?
Permite cambiar el comportamiento por defecto del modelo de cajas para definir dimensiones de forma más intuitiva.
¿Qué significa el acrónimo HTML?
HyperText Markup Language (Lenguaje de Marcas de Hipertexto).
¿Qué define el HTML dentro de una página web?
Define el significado y la estructura del contenido web.
El concepto de _____ hace referencia a los enlaces que conectan páginas web entre sí.
Hipertexto
¿Qué nombre recibe el componente de un elemento HTML que proporciona información adicional y se coloca en la etiqueta de inicio?
Atributo.
¿Cuál es la función de la etiqueta '<!DOCTYPE HTML>'?
Indica al navegador que el documento es un archivo HTML5.
¿Qué sección del documento HTML contiene información técnica para el navegador que no es visible para el usuario?
La etiqueta '<head>'.
La etiqueta HTML que engloba todo el contenido que aparecerá visualmente en la página web es '_____'.
<body>
¿Para qué sirve el elemento '<meta charset="utf-8">'?
Define la codificación de caracteres estándar para el sitio web.
¿Qué configuración de 'meta name="viewport"' es esencial para la responsividad móvil?
'width=device-width, initial-scale=1'.
Concepto: HTML Semántico
Uso de etiquetas HTML que describen claramente su significado tanto al navegador como al desarrollador.
¿Cuál es la diferencia entre las etiquetas '<head>' y '<header>'?
'<head>' contiene metadatos técnicos, mientras que '<header>' es una cabecera visual para el usuario.
¿Qué etiqueta semántica se utiliza para definir contenido independiente y autónomo, como una publicación de blog?
<article>
¿Cuál es el propósito de la etiqueta semántica '<nav>'?
Contener un bloque de enlaces de navegación.
¿Para qué se utiliza la etiqueta semántica '<aside>'?
Para contenido relacionado de forma indirecta con el tema principal, como barras laterales.
La etiqueta semántica que representa el pie de página de un documento o sección es '_____'.
<footer>
¿Qué diferencia existe entre el uso de '<strong>' y '<b>'?
'<strong>' indica importancia semántica o palabras clave, mientras que '<b>' solo llama la atención visualmente.
¿Cuál es la función de la etiqueta HTML '<mark>'?
Resaltar fragmentos de texto, simulando el efecto de un rotulador amarillo.
¿Qué etiqueta se utiliza para agrupar fragmentos de texto sin significado inherente para aplicar estilos?
<span>
En HTML, la etiqueta '<div>' se define como una capa o división utilizada para _____.
agrupar varias etiquetas HTML.
¿Qué indica la etiqueta '<hr>' en un documento de texto?
Una separación temática o un cambio de escena.
¿Cuál es la función de una 'pseudo-clase' en CSS?
Permite seleccionar elementos basándose en información externa al árbol del documento, como su estado.
¿Qué sintaxis se utiliza para añadir una pseudo-clase a un selector CSS?
Un signo de dos puntos ( : ) seguido del nombre de la pseudo-clase.
¿Cuándo se aplica la pseudo-clase ':hover'?
Cuando el usuario designa un elemento con un dispositivo apuntador, como al pasar el ratón por encima.
¿Qué estado del elemento activa la pseudo-clase ':active'?
Cuando el elemento está siendo activado por el usuario, por ejemplo, durante un clic.
La pseudo-clase que se activa cuando un elemento (como un campo de texto) recibe el foco del teclado es '_____'.
:focus
¿Qué elementos coinciden con la pseudo-clase ':checked'?
Elementos de formulario como casillas de verificación (checkboxes) o botones de radio que están activados.
¿Para qué sirve la pseudo-clase funcional ':not()'?
Para seleccionar elementos que no coinciden con el argumento pasado entre paréntesis.
¿Qué selecciona la pseudo-clase ':first-child'?
Un elemento que es el primer hijo entre sus hermanos.
La pseudo-clase que representa al elemento raíz del documento (generalmente '<html>') es '_____'.
:root
¿Qué evalúan las pseudo-clases ':valid' e ':invalid' en un formulario?
Si el contenido introducido en un campo cumple o no con las restricciones de validación.
¿Cómo se denominan las pseudo-clases que aceptan una lista de selectores como parámetro (ej. ':is()', ':where()')?
Pseudo-clases funcionales.
¿Qué herramienta web permite consultar tablas de soporte de tecnologías modernas en diferentes navegadores?
Can I use (caniuse.com).
¿Cuál es el propósito del servicio de validación de marcado de la W3C?
Verificar la validez del marcado de documentos web (HTML, XHTML, etc.).
¿Qué es FileZilla?
Una solución de software libre para la transferencia de archivos mediante protocolos FTP.
Además de FTP, ¿qué otros dos protocolos de transferencia segura soporta el cliente FileZilla?
FTPS (FTP sobre TLS) y SFTP.
¿Cuál es la diferencia entre una ruta absoluta y una ruta relativa en el desarrollo web?
La absoluta incluye el protocolo y dominio, mientras que la relativa determina el camino desde el archivo actual.
En el contexto de rutas relativas, ¿qué indica el prefijo '../'?
Subir un nivel en el árbol de directorios.
¿Qué protocolo se utiliza en Facebook para controlar cómo aparece el contenido al ser compartido mediante URLs?
Open Graph.
¿Cómo se llama la plataforma de alojamiento de código donde se encuentra el proyecto 'HEAD' de alvaroadlf?
GitHub.
El componente del modelo de cajas que define el límite visual de la caja es el _____.
borde (border)
¿Qué sucede con el tamaño de una caja si se añade relleno (padding) sin cambiar el valor de 'box-sizing'?
El tamaño total de la caja aumenta.
¿Bajo qué condiciones se ignoran las propiedades 'width' y 'height'?
Cuando se aplican a elementos con comportamiento 'inline' (en línea).
En HTML, las etiquetas para encabezados van desde '<h1>' hasta '_____'.
<h6>
¿Qué etiqueta semántica se utiliza para marcar la dirección o información de contacto del autor de un artículo?
<address>
¿Cuál es la función de la etiqueta '<em>'?
Marcar un fragmento de texto enfatizado respecto a la frase que lo contiene.
¿Qué etiqueta HTML se usa específicamente para representar términos que van a ser definidos?
<dfn>
¿Para qué sirve la etiqueta '<abbr>'?
Para representar abreviaturas o acrónimos.
La etiqueta que se usa para texto preformateado, respetando espacios y saltos de línea, es '_____'.
<pre>
¿Qué utilidad tiene la pseudo-clase ':nth-child(even)'?
Selecciona los elementos hijos que ocupan una posición par en una lista.
¿Qué selecciona la pseudo-clase ':only-child'?
Un elemento que no tiene hermanos dentro de su contenedor.
La pseudo-clase que representa un enlace que ya ha sido visitado por el usuario es '_____'.
:visited
¿Qué significa que una pseudo-clase sea 'functional' en la documentación de MDN?
Que contiene un par de paréntesis para definir argumentos o parámetros.
¿Para qué se utiliza la etiqueta '<link>' dentro del '<head>'?
Principalmente para enlazar hojas de estilo externas (CSS) al documento HTML.
¿Qué propiedad CSS permite centrar un elemento de bloque horizontalmente dentro de su contenedor si tiene un ancho fijo?
'margin: auto' (específicamente 'margin-left: auto' y 'margin-right: auto').
¿Qué tipo de software es FileZilla Server?
Un servidor FTP y FTPS de código abierto y gratuito.
Concepto: CSS Flexbox
Modelo de diseño de CSS que permite organizar elementos de forma flexible en una sola dimensión (fila o columna).
¿Qué permite hacer el sistema de 'Grillas' (CSS Grid)?
Crear diseños complejos bidimensionales (filas y columnas simultáneamente).
¿Qué herramienta permite automatizar la escritura de código HTML y CSS mediante abreviaturas?
Emmet.
¿Cuál es el propósito del archivo 'README.md' en un repositorio de GitHub?
Proporcionar una descripción, instrucciones y documentación general sobre el proyecto.
¿Qué selecciona la pseudo-clase ':enabled'?
Elementos de la interfaz de usuario que están en un estado habilitado.
En CSS, la notación utilizada en pseudo-clases estructurales para seleccionar elementos según una fórmula matemática es '_____'.
$An+B$
¿Qué es una fuente variable (Variable Font)?
Es un solo archivo de fuente que incluye múltiples estilos y pesos mediante ejes paramétricos.
¿Cuál es la principal ventaja de las fuentes variables en cuanto a solicitudes de red?
Sustituyen múltiples archivos estáticos por una única descarga de archivo.
En fuentes variables, ¿qué dimensión controla el eje registrado `wght`?
El peso o grosor de la fuente.
En fuentes variables, ¿qué dimensión controla el eje registrado `wdth`?
La anchura de los caracteres, de condensada a expandida.
En fuentes variables, ¿qué función cumple el eje registrado `ital`?
Actúa como un interruptor para activar o desactivar la cursiva.
En fuentes variables, ¿qué dimensión controla el eje registrado `slnt`?
La inclinación o ángulo de los caracteres.
En fuentes variables, ¿qué optimiza el eje registrado `opsz` (Tamaño Óptico)?
El diseño de los glifos para diferentes tamaños de visualización.
¿Qué propiedad de bajo nivel de CSS permite controlar directamente cualquier eje de una fuente variable?
`font-variation-settings`
¿Por qué las fuentes variables mejoran el rendimiento web (WPO)?
Reducen el número de solicitudes HTTP y, frecuentemente, el tamaño total de los datos transferidos.
¿Cómo benefician las fuentes variables al diseño adaptable (Responsive Design)?
Permiten ajustar pesos o anchuras de forma fluida mediante media queries o container queries.
¿Qué ventaja ofrece el eje de "grado" (`GRAD`) en términos de diseño?
Permite engrosar los trazos sin alterar el ancho físico de las letras.
¿Cuál es el formato de fuente recomendado por su eficacia en compresión y soporte moderno?
WOFF2
¿Qué técnica se recomienda para priorizar la descarga de la fuente principal de un sitio?
El uso de la etiqueta `<link rel="preload">`.
¿Qué valor de `font-display` se recomienda para evitar el texto invisible durante la carga?
`swap`
¿En qué consiste el "subsetting" inteligente de fuentes?
En generar subconjuntos de la fuente que contengan solo los idiomas y glifos necesarios.
¿Qué métrica técnica se ve afectada por el tiempo que tarda en mostrarse el texto legible?
LCP (Largest Contentful Paint)
¿Qué métrica mide los cambios de diseño causados por la sustitución de fuentes durante la carga?
CLS (Cumulative Layout Shift)
En diseño tipográfico, ¿qué es una escala modular?
Es un conjunto de valores armónicos derivados de una proporción matemática para establecer jerarquía.
¿Qué porcentaje de la información en una pantalla digital suele ser tipografía?
Entre el 85% y el 90%.
¿Para qué elementos se recomienda reservar las fuentes de marca con personalidades muy únicas?
Para tamaños de visualización grandes como titulares (headlines).
¿Qué es un "native font-stack" en un sistema de diseño?
Es el uso de las fuentes preinstaladas en el sistema operativo para evitar cargar archivos externos.
¿Cuál es la regla general para establecer un `line-height` inicial en el cuerpo de texto?
Usar un valor de $1.5$ veces el tamaño de la fuente.
¿Qué es una rejilla de línea de base (baseline grid)?
Es una estructura subyacente a la que se mapean todos los tamaños y espacios tipográficos.
¿Qué son las icon-fonts?
Archivos de fuentes tipográficas que contienen caracteres en forma de iconos vectoriales.
¿Cuál es una ventaja de las icon-fonts sobre las imágenes tradicionales?
No se pixelan en dispositivos grandes y permiten cambiar color y tamaño mediante CSS.
¿A través de qué propiedad de CSS3 se invocan las icon-fonts?
`@font-face`
¿Qué pseudoelementos se usan comúnmente para insertar iconos mediante clases CSS?
`:before` y `:after`
En Font Awesome, ¿qué clase se utiliza para aplicar una animación de rotación continua?
`fa-spin`
En Font Awesome, ¿qué clase permite rotar un icono un número específico de grados?
`fa-rotate-*`
Fórmula: ¿Cómo se calcula la distancia de la línea de base (baseline distance)?
$font-size * line-height$
Fórmula: ¿Cómo se calcula el desplazamiento vertical (offset) para alinear un icono al borde superior del texto?
$\frac{baseline\ distance - font\ size}{2}$
Fórmula: ¿Cómo se calcula el desplazamiento vertical si el icono es el doble de grande que el texto?
$\frac{baseline\ distance - icon\ size}{2}$
¿Qué unidad de CSS moderna permite simplificar la alineación de iconos sin usar variables personalizadas?
La unidad `lh` (line-height).
¿Qué combinación de propiedades CSS permite alinear horizontalmente un icono y un texto de forma sencilla?
`display: flex` y `align-items: center`.
¿Cuál es el riesgo de no configurar correctamente el rango de ejes en `@font-face`?
Obliga al navegador a cargar más datos de los necesarios.
¿Por qué el uso de `rem` para posicionar iconos puede causar problemas de alineación?
Porque no responden proporcionalmente si el `font-size` del elemento padre cambia.
¿Qué eje de las fuentes variables ayuda a mejorar la legibilidad en tamaños de texto muy pequeños?
El eje `opsz` (Tamaño Óptico).
¿Qué problema visual previene una pila de fuentes (font-stack) sólida?
Minimiza el impacto visual si la fuente principal (variable) falla al cargar.
¿Qué técnica de Dan Mall utiliza un sistema numérico para hacer la tipografía más intuitiva?
El uso de "canonical presets" (ajustes preestablecidos canónicos).
Concepto: Interpolación en fuentes variables
Es el proceso por el cual el navegador calcula variantes intermedias de la fuente a partir de los ejes definidos.
¿Qué error común ocurre al previsualizar fallbacks tipográficos?
Ignorar la disparidad de tamaños entre la fuente personalizada y la del sistema, causando saltos de diseño.
¿Bajo qué condiciones es preferible usar fuentes variables sobre estáticas?
Cuando el proyecto requiere múltiples pesos y estilos tipográficos.
¿Qué característica de las icon-fonts permite integrarlas como elementos de lista?
Clases específicas como `.fa-ul` y `.fa-li` en frameworks como Font Awesome.
¿Cómo se define el comportamiento de los iconos cuando el texto ocupa varias líneas?
Se debe alinear el icono verticalmente con el centro de la primera línea de texto.
¿Qué propiedad de CSS permite escalar iconos de Font Awesome a tamaños específicos como $2x$ o $3x$?
Clases predefinidas como `.fa-2x` o `.fa-3x`.
En el contexto de accesibilidad, ¿por qué se deben evitar pesos extremos en textos largos?
Porque los trazos muy finos o muy gruesos pueden reducir drásticamente la legibilidad.
¿Qué herramienta permite reducir el peso de una fuente variable eliminando ejes no utilizados?
Herramientas de generación de subconjuntos (subsetting tools).
¿Cuál es la función del archivo `css` en el paquete descargable de Font Awesome?
Define la familia de la fuente mediante `@font-face` y proporciona clases de utilidad para el diseño.
¿Qué relación existe entre el `line-height` y el espaciado en un sistema de diseño?
El `line-height` suele influir en los valores de margen, relleno y espaciado de los componentes de la interfaz.
En fuentes variables, ¿qué significan las siglas de cuatro letras en mayúsculas como `XTRA`?
Representan ejes personalizados definidos por el diseñador de la fuente.
¿Qué significan las siglas CSS?
Cascading Style Sheets (Hojas de Estilo en Cascada).
¿Cuál es la función principal de CSS en el desarrollo web?
Definir y separar la presentación visual (diseño, colores, fuentes) del contenido del documento.
¿Quién propuso CSS por primera vez en 1994?
Håkon Wium Lie.
¿Qué organización internacional mantiene las especificaciones y estándares de CSS?
El World Wide Web Consortium (W3C).
¿En qué año se publicó la recomendación oficial de CSS1?
1996.
En la sintaxis de CSS, ¿qué parte de la regla indica a qué elementos se aplican los estilos?
El selector.
En una declaración CSS, ¿qué símbolo se utiliza para separar la propiedad del valor?
Los dos puntos (:).
En un bloque de declaraciones CSS, ¿qué carácter separa cada declaración individual?
El punto y coma (;).
¿Cómo se delimita un comentario en el código CSS?
Se encierra entre los caracteres /* y */.
¿Qué etiqueta HTML se utiliza para incluir una hoja de estilos externa?
La etiqueta <link>.
¿Qué atributo HTML permite aplicar estilos directamente a un elemento específico (estilos inline)?
El atributo style.
¿Cómo se representa el selector de clase en CSS?
Mediante un punto (.) seguido del nombre de la clase.
¿Cómo se representa el selector de identificador (ID) en CSS?
Mediante una almohadilla (#) seguida del nombre del ID.
¿A qué elementos del documento afecta el selector universal (*)?
Afecta a todos los elementos del documento sin excepción.
¿Qué selector se utiliza para aplicar un estilo a un elemento solo cuando el cursor del ratón está sobre él?
La pseudoclase :hover.
¿Qué es la "especificidad" en CSS?
Es el sistema de pesos que determina qué regla de estilo prevalece cuando varias coinciden en un mismo elemento.
¿Cuál tiene mayor prioridad: un selector de clase o un selector de ID?
El selector de ID.
¿Qué regla permite forzar la aplicación de un estilo, ignorando la cascada y la especificidad normal?
La declaración !important.
¿Cuáles son los cuatro componentes principales del modelo de caja (Box Model) de afuera hacia adentro?
Margen (margin), borde (border), relleno (padding) y contenido (content).
En el modelo de caja, ¿qué propiedad define el espacio transparente entre el contenido y el borde del elemento?
Padding (Relleno).
En el modelo de caja, ¿qué propiedad define el espacio exterior que separa a un elemento de sus vecinos?
Margin (Margen).
¿Qué efecto tiene aplicar la propiedad box-sizing: border-box;?
Hace que el ancho y alto del elemento incluyan el padding y el borde, evitando que la caja crezca al añadirlos.
¿Qué es una unidad de medida absoluta en CSS?
Una unidad con un tamaño fijo que no cambia respecto a otros elementos, como el píxel (px).
¿Qué es una unidad de medida relativa en CSS?
Una unidad cuyo tamaño depende de otro valor, como el tamaño de fuente o el tamaño de la ventana (ej. em, rem, %).
¿A qué hace referencia la unidad rem?
Al tamaño de fuente del elemento raíz del documento (habitualmente la etiqueta html).
¿En qué se basa la unidad em cuando se aplica a la propiedad font-size?
En el tamaño de fuente del elemento padre.
¿Qué función de CSS permite establecer un valor fluido que respeta límites mínimos y máximos?
La función clamp().
¿Qué propiedad controla el espacio vertical entre las líneas de un párrafo?
line-height.
¿Cómo se centran horizontalmente los elementos de bloque (como un div) que tienen un ancho definido?
Asignando margin: auto; a los lados izquierdo y derecho.
¿Cómo se evita que una imagen desborde horizontalmente su contenedor en diseños responsivos?
Aplicando la propiedad max-width: $100 \%$;.
¿Qué propiedad permite cambiar el color de acento de los controles de interfaz de usuario, como botones de radio o casillas?
accent-color.
¿Qué propiedad convierte a un contenedor en un contexto de diseño flexible?
display: flex;
¿Cuál es la diferencia dimensional entre Flexbox y CSS Grid?
Flexbox es unidimensional (maneja filas o columnas) y Grid es bidimensional (maneja ambas simultáneamente).
En Flexbox, ¿qué propiedad se utiliza para alinear los elementos a lo largo del eje principal (main axis)?
justify-content.
En Flexbox, ¿qué propiedad se utiliza para alinear los elementos en el eje secundario (cross axis)?
align-items.
¿Qué propiedad de Flexbox permite que los elementos pasen a una nueva línea si no hay espacio suficiente?
flex-wrap.
¿Cuál es el valor por defecto de flex-direction en un contenedor flex?
row (fila).
En Flexbox, ¿qué propiedad permite cambiar el orden visual de un elemento individual sin modificar el HTML?
order.
¿Qué hace la propiedad flex-grow: 1; aplicada a un elemento flex?
Permite que el elemento crezca para ocupar el espacio disponible en el contenedor.
En CSS Grid, ¿qué unidad representa una fracción del espacio libre en el contenedor?
fr.
¿Qué función de Grid permite definir rápidamente múltiples columnas con el mismo tamaño?
La función repeat().
En CSS Grid, ¿qué propiedad define el nombre y la ubicación de las áreas de la cuadrícula?
grid-template-areas.
¿Qué hace la función minmax(100px, 1fr) en una definición de columnas de Grid?
Garantiza que la columna tenga al menos 100px y crezca hasta ocupar una fracción del espacio si es posible.
¿Qué técnica de CSS permite aplicar estilos diferentes basados en el ancho, alto o resolución del dispositivo?
Media Queries (ej. @media).
¿Para qué se utiliza la pseudoclase :nth-child(odd)?
Para seleccionar y estilar los hijos que ocupan posiciones impares dentro de su padre.
¿Qué valor de la propiedad text-wrap es ideal para equilibrar el texto en encabezados cortos?
balance.
¿Qué valor de la propiedad text-wrap ayuda a evitar palabras sueltas o "viudas" al final de los párrafos?
pretty.
¿Qué media query permite desactivar animaciones para usuarios con sensibilidad al movimiento?
prefers-reduced-motion.
Característica de CSS (2026) que permite realizar lógica condicional nativa en los valores de las propiedades: _____
La función if().
¿Qué funcionalidad de CSS (2026) permite posicionar elementos como menús desplegables en relación con un elemento de referencia?
Anchor Positioning (Posicionamiento de anclaje).
Característica de CSS (2026) que permite crear diseños de cuadrícula tipo "masonry" o cascada de forma nativa: _____
Grid Lanes.
¿Qué permiten las Scroll-driven animations?
Sincronizar el progreso de una animación con el desplazamiento (scroll) de un contenedor.
¿Cuál es la función de la regla @scope en CSS?
Limitar el alcance de los estilos a una sección específica del DOM para evitar conflictos globales.
¿Para qué sirve la regla @starting-style?
Para definir los estilos iniciales de un elemento que entra en el DOM y permitir transiciones suaves desde su aparición.
¿Qué devuelve la función sibling-index()?
La posición numérica de un elemento entre sus hermanos (empezando por 1).
¿Qué ventaja ofrece el modelo de color OKLCH frente a RGB o HSL?
Proporciona un control del color basado en la percepción humana y acceso a gamas de colores más amplias (P3).
¿Qué representa la unidad de medida ch?
El ancho del carácter "0" de la fuente que se esté utilizando.
¿Qué hace el valor position: fixed; en un elemento?
Posiciona al elemento de forma absoluta respecto a la ventana del navegador, manteniéndolo fijo al hacer scroll.
¿Cuál es la diferencia principal entre display: none; y visibility: hidden;?
display: none elimina el elemento del flujo; visibility: hidden lo oculta pero mantiene el espacio que ocupa.
¿Qué propiedad controla el orden de apilamiento vertical de los elementos posicionados?
z-index.
¿Qué función permite realizar operaciones matemáticas entre diferentes unidades de CSS?
calc().
En CSS moderno, ¿qué permite la función light-dark()?
Definir dos colores diferentes que se aplicarán automáticamente según si el usuario prefiere el modo claro u oscuro.
¿Cómo se define una variable personalizada (Custom Property) en CSS?
Usando dos guiones medios seguidos del nombre (ej. --color-primario).
¿Cómo se aplica el valor de una variable de CSS previamente definida?
Mediante la función var() (ej. color: var(--color-primario);).
¿Qué hace el valor position: relative;?
Mueve un elemento respecto a su ubicación original en el flujo normal, sin afectar el espacio de los demás elementos.
¿Qué valor de position permite que un elemento se comporte como fijo solo después de alcanzar una posición específica al hacer scroll?
sticky.
¿Qué propiedad define la transparencia de un elemento y todo su contenido?
opacity (con valores de 0 a 1).
¿Qué propiedad se usa para redondear las esquinas de un elemento?
border-radius.
¿Qué propiedad permite añadir una sombra a la caja de un elemento?
box-shadow.
¿Qué regla permite cargar y utilizar fuentes tipográficas personalizadas que no están instaladas en el sistema del usuario?
@font-face.
¿Qué propiedad controla la alineación del texto dentro de su contenedor?
text-align.
¿Qué unidad de medida equivale al $1 \%$ del ancho de la ventana gráfica (viewport)?
vw.
¿Qué unidad de medida equivale al $1 \%$ del alto de la ventana gráfica (viewport)?
vh.
¿Qué propiedad permite mantener una relación de aspecto fija entre el ancho y el alto de un elemento?
aspect-ratio.
¿Qué palabra clave de color en CSS hereda automáticamente el color del texto del elemento?
currentcolor.
¿Qué propiedad de Flexbox permite distribuir los elementos de modo que el primer elemento esté al inicio y el último al final?
justify-content: space-between;
¿Qué propiedad permite aplicar efectos visuales como desenfoque o saturación a un elemento?
filter.
¿Qué pseudoelemento se usa para estilar únicamente la primera línea de un párrafo?
::first-line.
¿Qué pseudoclase se aplica a un elemento de formulario que no puede ser editado por el usuario?
:disabled.
¿Qué propiedad define si una imagen de fondo debe cubrir todo el contenedor o ajustarse a él?
background-size.
¿Qué hace el valor background-repeat: no-repeat;?
Evita que la imagen de fondo se duplique para llenar el contenedor.
¿Qué propiedad controla el grosor de la fuente (ej. normal o negrita)?
font-weight.
¿Qué propiedad define el espaciado entre los caracteres de un texto?
letter-spacing.
¿Qué propiedad se usa para añadir o quitar el subrayado de los textos?
text-decoration.
¿Qué propiedad controla si un elemento se muestra como bloque o como línea?
display.
¿Qué propiedad permite inclinar, rotar o escalar un elemento en el espacio?
transform.
En las animaciones de CSS, ¿qué regla define los estados intermedios del ciclo de animación?
@keyframes.
¿Qué propiedad establece la duración de una transición entre dos estados de estilo?
transition-duration.
¿Qué selector se utiliza para aplicar estilos al primer hijo de un elemento padre?
La pseudoclase :first-child.
¿Qué propiedad se usa para definir el color de fondo de un elemento?
background-color.
¿Qué hace la propiedad clear: both;?
Asegura que un elemento se coloque debajo de cualquier elemento flotante previo en ambos lados.
¿Qué propiedad de Flexbox define el tamaño base de un elemento antes de distribuir el espacio restante?
flex-basis.
En CSS Grid, ¿qué hace la propiedad gap?
Establece el espacio de separación entre las filas y las columnas de la cuadrícula.
¿Qué pseudoclase selecciona a un elemento que es el destino de un enlace interno (ancla) en la URL actual?
:target.
¿Qué propiedad se utiliza para cambiar el aspecto del puntero del ratón?
cursor.
¿Qué valor de la propiedad font-style se usa para poner el texto en cursiva?
italic.
¿Qué hace la propiedad overflow: hidden;?
Recorta y oculta cualquier contenido que exceda las dimensiones del contenedor.
¿Qué propiedad permite realizar una mezcla de dos colores según un porcentaje específico?
color-mix().
¿Cómo se define el comportamiento del scroll para que sea fluido al pulsar enlaces internos?
Aplicando scroll-behavior: smooth; al contenedor de scroll (habitualmente html).
¿Qué pseudoelemento permite insertar contenido visual antes del contenido real de un elemento desde CSS?
::before.
¿Qué propiedad define la transformación de mayúsculas y minúsculas en un texto?
text-transform.
¿Qué unidad de Grid llena automáticamente el espacio con tantas columnas como quepan sin estirarlas?
auto-fill (dentro de la función repeat).
¿Qué propiedad controla el espacio entre las palabras de un texto?
word-spacing.
¿Qué propiedad define si los bordes de una tabla deben estar separados o colapsados en una sola línea?
border-collapse.
¿Qué hace la propiedad list-style: none;?
Elimina los puntos, números o cualquier marcador visual de los elementos de una lista.
En CSS Grid, ¿cuál es la propiedad abreviada para definir el inicio y fin de un elemento en las columnas?
grid-column.
¿Qué propiedad se utiliza para definir el ancho máximo que puede alcanzar un elemento?
max-width.
¿Qué propiedad define la altura mínima de un elemento independientemente de su contenido?
min-height.
¿Qué pseudoclase se utiliza para excluir elementos de una regla de estilo?
La pseudoclase :not().
¿Qué propiedad permite centrar el contenido de una celda de Grid a lo largo del eje de bloques (filas)?
align-self (aplicada al hijo) o align-items (aplicada al padre).
¿Qué propiedad permite alinear el contenido de una celda de Grid a lo largo del eje de línea (columnas)?
justify-self (aplicada al hijo) o justify-items (aplicada al padre).
¿Qué hace la propiedad visibility: collapse; aplicada a una celda de tabla?
Oculta la celda y elimina el espacio que ocupaba en el layout de la tabla.
En el sistema de color HSLA, ¿qué representa el valor de la "S"?
Saturación (expresada en porcentaje).
¿Qué propiedad permite crear un efecto de desenfoque detrás de un elemento que tiene transparencia?
backdrop-filter.
¿Qué propiedad controla el suavizado o escalado de las imágenes en el navegador?
image-rendering.
¿Qué unidad de medida relativa equivale al $1 \%$ del lado más corto del viewport?
vmin.
¿Qué unidad de medida relativa equivale al $1 \%$ del lado más largo del viewport?
vmax.
¿Qué hace la propiedad user-select: none;?
Evita que el usuario pueda seleccionar el texto contenido en el elemento.
¿Cómo se indica una transición que afecte a todas las propiedades animables de un elemento?
Asignando el valor all a la propiedad transition-property.
¿Qué selector selecciona un elemento <p> que es precedido inmediatamente por un elemento <h1>?
El selector de hermano adyacente h1 + p.
¿Qué selector selecciona a todos los elementos <p> que son hermanos de un <h1> y aparecen después de él?
El selector de hermano general h1 ~ p.
¿Qué propiedad de Grid permite que las filas tengan una altura automática basada en su contenido?
grid-template-rows: auto;
¿Qué hace la propiedad object-fit: cover; aplicada a una imagen o video?
Ajusta el contenido para que llene el contenedor manteniendo su proporción, recortando los bordes si es necesario.
¿Qué propiedad define el color del borde superior de un elemento?
border-top-color.
¿Qué pseudoclase selecciona el último hijo de un elemento padre?
:last-child.
¿Qué propiedad controla la aparición de puntos suspensivos cuando el texto desborda un contenedor de una sola línea?
text-overflow: ellipsis;
¿Qué propiedad permite añadir una sombra al texto?
text-shadow.
¿Qué propiedad define el espaciado entre las celdas de una tabla cuando los bordes no están colapsados?
border-spacing.
¿Qué selector se usa para apuntar a un elemento que es el hijo único de su tipo entre sus hermanos?
:only-of-type.
¿Qué hace la propiedad position: absolute;?
Posiciona el elemento respecto a su ancestro posicionado más cercano, sacándolo del flujo normal del documento.
¿Qué propiedad de Flexbox permite definir si el eje principal fluye en filas o en columnas?
flex-direction.
¿Qué propiedad permite establecer una imagen como fondo de un elemento?
background-image.
¿Qué hace la propiedad display: inline-block;?
Permite que un elemento se alinee en línea con otros pero acepte propiedades de bloque como ancho, alto y márgenes.
¿Qué propiedad define la velocidad de una animación (ej. constante o con aceleración)?
animation-timing-function.
¿Qué propiedad define si una animación debe reproducirse hacia adelante, hacia atrás o alternar?
animation-direction.
¿Qué hace la propiedad cursor: pointer;?
Cambia el cursor al icono de la mano, indicando que el elemento es interactivo o un enlace.
¿Qué propiedad define el color del contorno exterior (outline) de un elemento?
outline-color.
¿Qué propiedad permite separar el contorno (outline) del borde del elemento?
outline-offset.
¿Qué unidad de Grid llena el espacio disponible repartiéndolo equitativamente entre las columnas?
fr (Fractional unit).
¿Qué hace la propiedad box-shadow con el valor inset?
Dibuja la sombra dentro del elemento en lugar de fuera, creando un efecto de profundidad.
¿Qué pseudoelemento se usa para estilar el texto que el usuario ha seleccionado con el ratón?
::selection.
¿Qué propiedad permite controlar si las palabras pueden romperse al final de una línea para evitar desbordamientos?
overflow-wrap (o word-wrap).
¿Qué hace la propiedad table-layout: fixed;?
Hace que el ancho de la tabla dependa del ancho definido de las columnas, no de su contenido.
¿Qué propiedad de Flexbox permite alinear las líneas de un contenedor flex cuando hay varias?
align-content.
¿Qué propiedad de Grid permite especificar el comportamiento de los elementos que no están posicionados explícitamente?
grid-auto-flow.
¿Qué hace la propiedad background-attachment: fixed;?
Fija la imagen de fondo respecto a la ventana, de modo que no se mueve cuando se hace scroll.
¿Qué propiedad controla la visibilidad de la cara posterior de un elemento cuando se rota en 3D?
backface-visibility.
¿Qué propiedad define la perspectiva desde la cual se ven los elementos transformados en 3D?
perspective.
¿Qué pseudoclase selecciona elementos de formulario cuyos valores son válidos según su tipo o patrón?
:valid.
¿Qué pseudoclase selecciona el último elemento de un tipo específico entre sus hermanos?
:last-of-type.
¿Qué propiedad de CSS permite establecer una imagen de máscara sobre un elemento?
mask-image.
¿Qué propiedad define la distancia entre el texto y su subrayado?
text-underline-offset.
¿Qué permite hacer la propiedad accent-color?
Personalizar el color de los elementos de control nativos del navegador, como checkboxes o progress bars.
¿Qué hace la propiedad font-variant: small-caps;?
Convierte todas las letras minúsculas en mayúsculas de menor tamaño (versalitas).
¿Qué propiedad permite controlar el espaciado entre las columnas de un diseño multi-columna?
column-gap.
¿Qué propiedad define el número de columnas en un diseño de texto multi-columna?
column-count.
¿Qué hace la propiedad break-inside: avoid;?
Evita que un elemento se divida entre dos columnas o páginas en diseños multi-columna o de impresión.
¿Qué propiedad permite añadir una sombra interna o externa a un elemento?
box-shadow.
¿Qué propiedad define la forma del cursor al pasar sobre un elemento específico?
cursor.
¿Qué pseudoclase selecciona un elemento que es el primer hijo de su tipo entre sus hermanos?
:first-of-type.
¿Qué propiedad define el estilo de la viñeta en las listas (ej. circle o decimal)?
list-style-type.
¿Qué propiedad se utiliza para definir el ancho de los bordes de una tabla?
border-width (aplicado a td o th).
¿Qué hace la propiedad scroll-snap-type?
Define la rigurosidad con la que el scroll se ajusta a los puntos de parada definidos en el contenedor.
¿Qué propiedad de los hijos define dónde debe detenerse el scroll en un contenedor con scroll-snap?
scroll-snap-align.
Página 1 / 1