Curso CSS

[Link]
Te damos la bienvenida a Learn
CSS.
bookmark_border

En este curso, se desglosan los aspectos básicos de CSS en fragmentos fáciles

de entender y fáciles de entender. En los próximos módulos, aprenderás cómo
funcionan los aspectos centrales de CSS y cómo usarlos de manera efectiva
en tus proyectos. Usa el panel de menú que está junto al logotipo “Learn CSS”
para navegar por los módulos.

Aprenderás los aspectos básicos de CSS, como el modelo de caja, la cascada

y la especificidad, Flexbox, la cuadrícula y el índice z. Además, junto con estos
aspectos básicos, aprenderás sobre funciones, tipos de color, gradientes,
propiedades lógicas y herencia a fin de convertirte en un desarrollador
frontend completo, listo para adoptar cualquier interfaz de usuario.

Cada módulo está lleno de demostraciones interactivas y autodiagnósticos

para que pongas a prueba tus conocimientos. Además de aprender mediante
lecturas y demostraciones, hay un episodio de podcast de cada tema que lo
acompaña como otra forma de aprender y continuar ampliando tus
conocimientos.

Este curso se creó para desarrolladores de CSS principiantes y avanzados por

igual. Puedes revisar la serie de principio a fin para obtener un conocimiento
general de CSS de principio a fin, o puedes usarla como referencia para temas
específicos de estilos. Si no tienes experiencia en el desarrollo web en
general, consulta Aprende HTML para obtener más información sobre cómo
escribir lenguaje de marcado y vincular hojas de estilo.

Aprenderás lo siguiente:

Modelo de caja
Todo lo que muestra CSS es un cuadro. Por lo tanto, comprender cómo
funciona el modelo de caja de CSS es una base fundamental de CSS.

Selectores
Para aplicar CSS a un elemento, debes seleccionarlo. CSS te ofrece varias
formas diferentes de hacerlo, y puedes explorarlas en este módulo.

La cascada
A veces, dos o más reglas de CSS que compiten se pueden aplicar a un
elemento. En este módulo, descubrirás cómo el navegador elige cuál utilizar y
cómo controlar esta selección.
Especificidad
En este módulo, se analiza con más detalle la especificidad, una parte clave
de la cascada.

Herencia
Algunas propiedades de CSS se heredan si no especificas un valor para ellas.
Descubre cómo funciona esto y cómo aprovecharlo en este módulo.

Color
Existen varias formas diferentes de especificar el color en CSS. En este
módulo, veremos los valores de color más usados.

Unidades de tamaño
En este módulo, aprenderás a ajustar el tamaño de los elementos con CSS,
trabajando con el medio flexible de la Web.

Diseño
Una descripción general de los diversos métodos de diseño que puedes elegir
a la hora de crear un componente o un diseño de página.

Flexbox
Flexbox es un mecanismo de diseño diseñado para organizar grupos de
elementos en una dimensión. Aprende a usarlo en este módulo.

Cuadrícula
CSS Grid Layout proporciona un sistema de diseño bidimensional, que
controla el diseño en filas y columnas. En este módulo, descubrirás todo lo
que la cuadrícula tiene para ofrecer.

Propiedades lógicas
Las propiedades y los valores relativos al flujo lógico están vinculados al flujo
de texto, en lugar de a la forma física de la pantalla. Descubre cómo
aprovechar este nuevo enfoque de CSS.

Espacios
Descubre cómo seleccionar el mejor método de espaciado de elementos,
teniendo en cuenta el método de diseño que estás usando y el componente
que necesitas crear.

Seudoelementos
Un seudoelemento es como agregar u orientarse a un elemento adicional sin
tener que agregar más HTML. Cumplen con diversas funciones, y puedes
aprender sobre ellas en este módulo.

Seudoclases
Las seudoclases te permiten aplicar CSS según los cambios de estado. Esto
significa que tu diseño puede reaccionar a las entradas del usuario, como una
dirección de correo electrónico no válida.

Bordes
Un borde proporciona un marco para las casillas. En este módulo, descubrirás
cómo cambiar el tamaño, el estilo y el color de los bordes con CSS.

Sombras
Existen varias formas de agregar sombras al texto y los elementos en CSS. En
este módulo, aprenderás a usar cada opción y conocerás las tareas para las
que se diseñaron.

Enfoque
Comprende la importancia del enfoque en tus aplicaciones web. Descubrirás
cómo administrar el enfoque y cómo asegurarte de que la ruta por tu página
funcione tanto para las personas que usen el mouse como para las que usen
el teclado para navegar.

Índice Z y contextos de pila

En este módulo, aprenderás a controlar el orden en que los elementos se
superponen unos de otros utilizando el índice z y el contexto de apilado.

Funciones
CSS tiene una variedad de funciones integradas. En este módulo, descubrirás
algunas de las funciones clave y cómo usarlas.

Gradientes
En este módulo, descubrirás cómo usar los diferentes tipos de gradientes
disponibles en CSS. Los gradientes se pueden usar para crear una gran
cantidad de efectos útiles, sin necesidad de crear una imagen con una
aplicación de gráficos.

Animaciones
La animación es una excelente manera de destacar elementos interactivos y
agregar interés y diversión a tus diseños. En este módulo, descubrirás cómo
agregar y controlar efectos de animación con CSS.
Filtros
Los filtros en CSS permiten aplicar efectos que solo crees posibles en una
aplicación gráfica. En este módulo, descubrirás las opciones disponibles.

Modos de fusión
Crea efectos de composición combinando dos o más capas, y aprende a aislar
una imagen con un fondo blanco en este módulo sobre los modos de
combinación.

Listas
Una lista, estructuralmente, está compuesta por un elemento contenedor de
lista con elementos de lista. En este módulo, aprenderás a aplicar ajustes de
estilo a todas las partes de una lista.

Transiciones
En este módulo, aprenderás a definir transiciones entre los estados de un
elemento. Usa transiciones para mejorar la experiencia del usuario
proporcionando comentarios visuales a la interacción del usuario.

Sobreflujo
El desbordamiento es la forma de abordar el contenido que no se ajusta a un
tamaño superior establecido. En este módulo, verás ideas innovadoras y
aprenderás a darle estilo a contenido desbordante.

Fondos
En este módulo, aprenderás cómo diseñar fondos de cuadros con CSS.

Texto y tipografía
En este módulo, aprenderás a darle estilo al texto en la Web.

Conclusión y próximos pasos

Más recursos para ayudarte a dar los próximos pasos.

¿Todo listo para aprender CSS? Comencemos.

Nota: La redacción y edición de este curso son expertos de la comunidad de
CSS Andy Bell, Rachel Andrew, Una Kravets, Adam Argyle, Emma Twersky, Camden
Bickel y Kevin Lozandier. Rob Dodson y Jiwoong Lee guiaron el diseño de UX y
producción, junto con la ayuda de Ewa Gasperowicz y Kayce Basques.
Modelo de caja
bookmark_border
El podcast de CSS 001: The Box Model

Supongamos que tienes este fragmento de HTML:

<p>I am a paragraph of text that has a few words in it.</p>

Luego, escribes el siguiente CSS:

p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}

El contenido se separaría del elemento y debe tener 142 px de ancho, en

lugar de 100 px. ¿A qué se debe? El modelo de caja es una base fundamental
de CSS, por lo que comprender cómo funciona, cómo se ve afectado por otros
aspectos de CSS y, lo que es más importante, cómo puedes controlarlo, te
ayudará a escribir CSS más predecibles.

Cuando escribes CSS, o cuando trabajas en la Web como un todo, es muy

importante que recuerdes que todo lo que muestra CSS es un cuadro. Ya sea
un cuadro que usa border-radius para que parezca un círculo o incluso solo
algo de texto, lo clave que debes recordar es que son todos cuadros.

Contenido y tamaño

Las cajas tienen un comportamiento diferente según su valor display, sus

dimensiones establecidas y el contenido dentro de ellas. Este contenido
podría incluir aún más cuadros, generados por elementos secundarios, o
contenido de texto sin formato. De cualquier manera, este contenido afectará
el tamaño del cuadro de forma predeterminada.

Puedes controlar esto mediante el ajuste de tamaño extrínico o puedes

seguir permitiendo que el navegador tome decisiones por ti según el tamaño
del contenido, mediante un tamaño intrínseco.

Veamos rápidamente la diferencia: usemos una demostración para

ayudarnos.
Ten en cuenta que, cuando la caja usa el tamaño extrínico, existe un límite de la
cantidad de contenido que puedes agregar antes de que se desborde fuera de los
límites del cuadro. Esto hace que la palabra "increíble" se desborde.

La demostración tiene las palabras “CSS es genial” en un cuadro con

dimensiones fijas y un borde grueso. La caja tiene un ancho, por lo que su
tamaño es extrínico. Controla el tamaño del contenido secundario. Sin
embargo, el problema con esto es que la palabra "increíble" es demasiado
grande para el cuadro, por lo que se desborda fuera del cuadro de borde del
cuadro superior (más adelante en esta lección). Una forma de evitar este
desbordamiento es permitir que el cuadro tenga un tamaño intrínseco, ya sea
anulando la configuración del ancho o, en este caso, configurando
el width para que sea min-content. La palabra clave min-content le indica al
cuadro que sea tan ancho como el ancho mínimo intrínseco de su contenido
(la palabra "increíble"). Esto permite que el cuadro encaje alrededor de "CSS
es genial", perfectamente.

Veamos algo más complejo para ver el impacto de los diferentes tamaños en
el contenido real:

Activa o desactiva el tamaño intrínseco para obtener un mayor control con el

tamaño extrínseco y permitir que el contenido tenga mayor control con el
tamaño intrínseco. Para ver el efecto que tienen los tamaños intrínsecos y
extrínsecos, agrega algunas oraciones de contenido a la tarjeta. Cuando este
elemento usa el tamaño extrínseco, hay un límite de contenido que puedes
agregar antes de que sobrepase los límites del elemento, pero este no es el
caso cuando está activado el tamaño intrínseco.

De forma predeterminada, este elemento tiene establecidos width y height,

ambos 400px. Estas dimensiones proporcionan límites estrictos a todo lo que
está dentro del elemento, lo que se respetará, a menos que el contenido sea
demasiado grande para el cuadro, en cuyo caso se producirá un
desbordamiento visible. Puedes ver esto en acción si cambias el contenido de
la leyenda, debajo de la imagen de la flor, a algo que exceda la altura del
cuadro, que es unas pocas líneas de contenido.

Término clave: Cuando el contenido es demasiado grande para el cuadro en el que

se encuentra, llamamos a este desbordamiento. Puedes administrar la manera en
que un elemento controla el contenido de desbordamiento usando la
propiedad overflow.

Cuando cambias al tamaño intrínseco, permites que el navegador tome

decisiones por ti según el tamaño del contenido del cuadro. Es mucho más
difícil que haya un desbordamiento de tamaño intrínseco porque nuestro
cuadro cambiará de tamaño con su contenido, en lugar de intentar ajustar el
tamaño del contenido. Es importante recordar que este es el comportamiento
predeterminado y flexible de un navegador. Si bien el tamaño extrínico brinda
más control sobre la superficie, el tamaño intrínseco proporciona la mayor
flexibilidad, la mayor parte del tiempo.
Las áreas del modelo de caja

Las cajas se componen de distintas áreas de modelos de caja que hacen un

trabajo específico.

Las cuatro áreas principales del modelo de cuadro: cuadro de contenido, cuadro de
padding, cuadro de borde y cuadro de margen.

Comenzarás con el cuadro de contenido, que es el área donde se encuentra

el contenido. Como aprendiste antes: este contenido puede controlar el
tamaño de su elemento superior, por lo que suele ser el área de tamaño
variable.

El cuadro de padding rodea el cuadro de contenido y es el espacio que crea

la propiedad padding. Como el padding está dentro del cuadro, su fondo será
visible en el espacio que se cree. Si nuestro cuadro tiene reglas de
desbordamiento configuradas, como overflow: auto o overflow: scroll, las barras
de desplazamiento también ocuparán este espacio.
El cuadro de borde lo rodea y su espacio está ocupado por el valor border. El
cuadro del borde es los límites del cuadro, y el borde del borde es el límite
de lo que puedes ver visualmente. La propiedad border se usa para enmarcar
visualmente un elemento.
La última área, el cuadro de margen, es el espacio alrededor del cuadro,
que se define mediante la regla margin. Las propiedades como outline y box-
shadow también ocupan este espacio porque se pintan en la parte superior,
por lo que no afectan el tamaño de nuestro cuadro. Podrías tener un outline-
width de 200px en nuestra caja y que todo el contenido, incluida la caja del
borde, tenga exactamente el mismo tamaño.
Una analogía útil

El modelo de caja es complejo de entender, así que repasemos lo que has

aprendido con una analogía.

En este diagrama, tienes tres marcos de fotos, montados en una pared, uno al
lado del otro. El diagrama tiene etiquetas que asocian los elementos del
marco con el modelo de caja.

Para desglosar esta analogía:

 El cuadro de contenido es el material gráfico.

 La caja de relleno es la placa de montaje blanca, entre el marco y la obra de
arte.
 El cuadro de borde es el marco que proporciona un borde literal para el
material gráfico.
 El cuadro de margen es el espacio entre cada marco.
 La sombra ocupa el mismo espacio que el cuadro de margen.
Cómo depurar el modelo de caja

Las Herramientas para desarrolladores del navegador proporcionan una

visualización de los cálculos del modelo de cuadro de un cuadro seleccionado,
lo que puede ayudarte a comprender cómo funciona el modelo de cuadro y, lo
que es más importante, cómo afecta al sitio web en el que estás trabajando.

Intenta lo siguiente en tu navegador:

1. Abrir Herramientas para desarrolladores

2. Selecciona un elemento
3. Muestra el depurador de modelos de cuadros

Cómo controlar el modelo de caja

Para entender cómo controlar el modelo de caja, primero debes entender lo

que sucede en tu navegador.

Cada navegador aplica una hoja de estilo de usuario-agente a los documentos

HTML. La CSS que se usa varía según el navegador, pero ofrecen valores
predeterminados confidenciales para facilitar la lectura del contenido. Definen
la apariencia y el comportamiento de los elementos si no hay una CSS
definida. En los estilos de usuario-agente, también se establece
el display predeterminado de un cuadro. Por ejemplo, si estamos en un flujo
normal, el valor predeterminado display de un elemento <div> es block,
un <li> tiene un valor de display predeterminado de list-item y un <span> tiene
un valor de display predeterminado de inline.

Un elemento inline tiene margen de bloque, pero otros elementos no lo

respetarán. Usa inline-block y esos elementos respetarán el margen del
bloque, mientras que el elemento mantendrá la mayoría de los mismos
comportamientos que tenía como un elemento inline. De forma
predeterminada, un elemento block rellenará el espacio
intercalado disponible, mientras que los elementos inline y inline-block solo
serán tan grandes como su contenido.

Además de comprender cómo los estilos de usuario-agente afectan cada

cuadro, también debes comprender box-sizing, que le indica a nuestro cuadro
cómo calcular su tamaño. De forma predeterminada, todos los elementos
tienen el siguiente estilo de usuario-agente: box-sizing: content-box;.

Tener content-box como el valor de box-sizing significa que, cuando configuras

dimensiones, como width y height, se aplicarán al cuadro de contenido. Si
luego configuras padding y border, estos valores se agregarán al tamaño del
cuadro de contenido.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre las propiedades que afectan el tamaño
del modelo de caja
.my-box {
width: 200px;
border: 10px solid;
padding: 20px;
}

¿Qué tan ancho crees que tendrá .my-box?

260px
200px

El ancho real de este cuadro será de 260 px. Como la CSS usa el valor
predeterminado box-sizing: content-box, el ancho aplicado es el ancho del
contenido, y padding y border en ambos lados se agregan a eso. Por lo tanto,
200 px para el contenido + 40 px de relleno + 20 px de borde hacen que el
ancho visible sea de 260 px.

Sin embargo, puedes controlar esto si realizas la siguiente modificación para

usar el modelo de caja alternativo, border-box:

.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}

Este modelo de cuadro alternativo le indica a CSS que aplique width al cuadro
de borde en lugar del cuadro de contenido. Esto significa
que border y padding se envían y, como resultado, cuando configuras .my-
box en 200px de ancho, en realidad se renderiza en 200px.

Mira la siguiente demostración interactiva para ver cómo funciona. Ten en

cuenta que, cuando actives el valor box-sizing, se mostrará, a través de un
fondo azul, la CSS que se está aplicando dentro de nuestro cuadro.

*,
*::before,
*::after {
box-sizing: border-box;
}

Esta regla de CSS selecciona todos los elementos del documento y cada
seudoelemento ::before y ::after, y aplica box-sizing: border-box. Esto significa
que cada elemento ahora tendrá este modelo de caja alternativo.
Debido a que el modelo de caja alternativo puede ser más predecible, los
desarrolladores suelen agregar esta regla a los restablecimientos y
normalizadores, como este.
Recursos
 Introducción al modelo de caja
 ¿Qué son las herramientas para desarrolladores de navegadores?

Hojas de estilo del usuario-agente

 Chromium
 Firefox
 Webkit
Selectores
bookmark_border
El podcast de CSS 002: Selectores

Si tienes texto que solo deseas que sea más grande y rojo si se encuentra en el primer párrafo de
un artículo, ¿cómo lo haces?

<article>
<p>I want to be red and larger than the other text.</p>
<p>I want to be normal sized and the default color.</p>
</article>

Puedes usar un selector CSS para encontrar ese elemento específico y aplicar una regla de CSS
como la siguiente.

article p:first-of-type {
color: red;
font-size: 1.5em;
}

CSS te ofrece muchas opciones para seleccionar elementos y aplicarles reglas, que van desde muy
simples hasta muy complejos para ayudar a resolver situaciones como esta.

Las partes de una regla CSS

Para comprender cómo funcionan los selectores y su función en CSS, es importante conocer las
partes de una regla de CSS. Una regla de CSS es un bloque de código que contiene uno o más
selectores y una o más declaraciones.
En esta regla de CSS, el selector es .my-css-rule, que busca todos los elementos con una clase
de my-css-rule en la página. Hay tres declaraciones entre llaves. Una declaración es un par de
propiedad y valor que aplica estilos a los elementos que coinciden con los selectores. Una regla
CSS puede tener tantas declaraciones y selectores como desees.

Selectores simples

El grupo de selectores más sencillo se orienta a elementos HTML, además de clases, IDs y otros
atributos que se pueden agregar a una etiqueta HTML.

Selector universal

Navegadores compatibles

 1
 12
 1
 1

Origen
Un selector universal, también conocido como comodín, coincide con cualquier elemento.
* {
color: hotpink;
}

Esta regla hace que todos los elementos HTML de la página tengan texto de color activo.

Selector de tipos

Navegadores compatibles

 1
 12
 1
 1

Origen
Un selector de tipo hace coincidir un elemento HTML directamente.
section {
padding: 2em;
}

Esta regla hace que cada elemento <section> tenga un 2em de padding en todos los lados.

Selector de clases

Navegadores compatibles

 1
 12
 1
 1

Origen
Un elemento HTML puede tener uno o más artículos definidos en el atributo class. El selector de
clase coincide con cualquier elemento al que se le haya aplicado esa clase.
<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

Cualquier elemento al que se le haya aplicado la clase se verá de color rojo:

.my-class {
color: red;
}
Observa que . solo está presente en CSS y no en HTML. Esto se debe a que el carácter . le indica
al lenguaje CSS que coincida con los miembros del atributo de clase. Este es un patrón común en
CSS, en el que se usa un carácter especial, o un conjunto de caracteres, para definir los tipos de
selector.

Un elemento HTML que tenga una clase .my-class coincidirá con la regla de CSS anterior,
incluso si tiene varias otras clases, como la siguiente:

<div class="my-class another-class some-other-class"></div>

Esto se debe a que CSS busca un atributo class que contenga la clase definida en lugar de
coincidir exactamente con esa clase.

Nota: El valor de un atributo de clase puede ser casi cualquier cosa que desees que sea. Algo que podría
confundirte es que no puedes iniciar una clase (o un ID) con un número, como .1element. Puedes leer
más en la especificación.

Selector de ID

Navegadores compatibles

 1
 12
 1
 1

Origen
Un elemento HTML con un atributo id debe ser el único elemento en una página con ese valor de
ID. Selecciona elementos con un selector de ID como el siguiente:
#rad {
border: 1px solid blue;
}

Este CSS aplicaría un borde azul al elemento HTML que tiene un id de rad, como el siguiente:

<div id="rad"></div>

Al igual que con el selector de clases ., usa un carácter # para indicarle a CSS que busque un
elemento que coincida con la id que lo sigue.

Nota: Si el navegador encuentra más de una instancia de un id, se aplicarán las reglas de CSS que
coincidan con su selector. Sin embargo, cualquier elemento que tenga un atributo id debe tener un valor
único para él. Por lo tanto, a menos que escribas CSS muy específico para un solo elemento, evita aplicar
estilos con el selector id, ya que significa que no puedes volver a usar esos estilos en otro lugar.
Selector de atributos

Navegadores compatibles

 1
 12
 1
 3

Origen
Puedes buscar elementos que tengan un atributo HTML determinado o que tengan un valor
determinado para un atributo HTML con el selector de atributos. Para indicar a CSS que busque
atributos, encierra el selector con corchetes ([ ]).
[data-type='primary'] {
color: red;
}

Este CSS busca todos los elementos que tienen un atributo de data-type con un valor
de primary, como el siguiente:

<div data-type="primary"></div>

En lugar de buscar un valor específico de data-type, también puedes buscar elementos que
tengan el atributo presente, independientemente de su valor.

[data-type] {
color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

Ambos elementos <div> tendrán texto rojo.

Para usar selectores de atributos que distinguen mayúsculas de minúsculas, agrega un operador s a
tu selector de atributos.

[data-type='primary' s] {
color: red;
}

Esto significa que, si un elemento HTML tiene un data-type de Primary, en lugar de primary,
no obtendría texto rojo. Puedes hacer lo contrario (insensibilidad de mayúsculas y minúsculas) con
un operador i.
Además de los operadores de caso, tienes acceso a operadores que hacen coincidir partes de
strings dentro de los valores de los atributos.

/* A href that contains "[Link]" */

[href*='[Link]'] {
color: red;
}

/* A href that starts with https */

[href^='https'] {
color: green;
}

/* A href that ends with .com */

[href$='.com'] {
color: blue;
}

En esta demostración, el operador `$` de nuestro selector de atributos obtiene el tipo de archivo del
atributo `href`. Esto permite agregar prefijos a la etiqueta, en función de ese tipo de archivo, con un
seudoelemento.

Agrupación de selectores

Un selector no tiene que coincidir con un solo elemento. Para agrupar varios selectores
separándolos con comas:

strong,
em,
.my-class,
[lang] {
color: red;
}

En este ejemplo, se extiende el cambio de color a los elementos <strong> y <em>. También se
extiende a una clase llamada .my-class y un elemento que tenga un atributo lang.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre selectores simples

* {}

¿Qué tipo de selector simple se usa en el fragmento anterior?

universal
atributo

clase

ID

div {}

¿Qué tipo de selector simple se usa en el fragmento anterior?

atributo

clase

tipo

ID

Pseudoclases y pseudoelementos

CSS proporciona tipos de selectores útiles que se enfocan en estados específicos de la plataforma,
como cuando se coloca el cursor sobre un elemento, estructuras dentro de un elemento o partes de
él.

Seudoclases

Los elementos HTML se encuentran en varios estados, ya sea porque se interactúa con ellos o
porque uno de sus elementos secundarios está en un estado determinado.

Por ejemplo, un usuario podría colocar el cursor sobre un elemento HTML con el puntero del
mouse o un elemento secundario también podría hacerlo el usuario. En esas situaciones, usa la
seudoclase :hover.

/* Our link is hovered */

a:hover {
outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */

p:nth-child(even) {
background: floralwhite;
}

Obtén más información en el módulo de seudoclases.

Seudoelemento

Los seudoelementos difieren de las seudoclases porque, en lugar de responder al estado de la

plataforma, actúan como si insertaran un nuevo elemento con CSS. Los seudoelementos también
son sintácticamente diferentes de las seudoclases, ya que, en lugar de usar dos puntos simples (:),
usamos los dos puntos dobles (::).
Nota: Los dos puntos dobles (::) son lo que distingue a un seudoelemento de una seudoclase. Sin
embargo, debido a que esta distinción no estaba presente en versiones anteriores de las especificaciones
de CSS, los navegadores admiten dos puntos simples para los seudoelementos originales,
como :before y :after, para ayudar a brindar retrocompatibilidad con navegadores más antiguos,
como IE8.

.my-element::before {
content: 'Prefix - ';
}

Al igual que en la demostración anterior, en la que prefijaste la etiqueta de un vínculo con el tipo
de archivo que era, puedes usar el seudoelemento ::before para insertar contenido al comienzo de
un elemento o ::after para insertar contenido al final de un elemento.

Sin embargo, los seudoelementos no se limitan a la inserción de contenido. También puedes

usarlos para orientar partes específicas de un elemento. Por ejemplo, supongamos que tienes una
lista. Usa ::marker para aplicar diseño a cada viñeta (o número) de la lista.

/* Your list will now either have red dots, or red numbers */
li::marker {
color: red;
}

También puedes usar ::selection para aplicar estilo al contenido que un usuario destacó.

::selection {
background: black;
color: white;
}

Obtén más información en el módulo sobre pseudoelementos.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre seudoselectores

¿Cuántos dos puntos utilizan los selectores de seudoelementos?

::

:::

p:hover {
background: white;
color: black;
}
¿Qué tipo de pseudoselector se usa en el fragmento anterior?

Seudoelemento

Seudoclase

Selectores complejos

Ya viste una gran variedad de selectores, pero, a veces, necesitarás un control más detallado con
tu CSS. Aquí es donde intervienen los selectores complejos para ayudar.

Vale la pena recordar que, en este punto, aunque los siguientes selectores nos brindan más poder,
solo podemos caer en cascada y seleccionar elementos secundarios. No podemos orientar hacia
arriba y seleccionar un elemento principal. Explicaremos qué es la cascada y cómo funciona en
una lección posterior.

Combinadores

Un combinador es lo que se encuentra entre dos selectores. Por ejemplo, si el selector era p >
strong, el combinador es el carácter >. Los selectores que usan estas combinaciones te ayudan a
seleccionar elementos según su posición en el documento.

Combinador subordinado

Para comprender los combinadores descendientes, primero debes comprender los elementos
superiores y secundarios.

<p>A paragraph of text with some <strong>bold text for

emphasis</strong>.</p>

El elemento superior es el <p> que contiene texto. Dentro de ese elemento <p> hay un
elemento <strong>, con lo que se pone en negrita su contenido. Como se encuentra dentro
de <p>, es un elemento secundario.

Un combinador subordinado nos permite orientar a un elemento secundario. Se usará un espacio ()

para indicarle al navegador que busque elementos secundarios:

p strong {
color: blue;
}

Este fragmento selecciona todos los elementos <strong> que son secundarios de
elementos <p>, por lo que son azules de forma recursiva.

Como el combinador descendiente es recursivo, se aplica el padding agregado a cada elemento

secundario, lo que da como resultado un efecto escalonado.

Este efecto se visualiza mejor en el ejemplo anterior con el selector de combinación, .top div. Esa
regla de CSS agrega padding izquierdo a esos elementos <div>. Debido a que la combinación es
recursiva, a todos los elementos <div> que se encuentran en .top se les aplicará ese mismo
padding.

Observa el panel HTML de esta demostración para ver cómo el elemento .top tiene varios
elementos secundarios <div> que, a su vez, tienen elementos secundarios <div>.

Combinador siguiente del mismo nivel

Puedes buscar un elemento que siga inmediatamente a otro elemento mediante un carácter + en el
selector.

Para agregar espacio entre elementos apilados, usa el siguiente combinador del mismo nivel para
agregar espacio solo si un elemento es el siguiente elemento del mismo nivel de un elemento
secundario de .top.

Puedes agregar margen a todos los elementos secundarios de .top con el siguiente selector:

.top * {
margin-top: 1em;
}

El problema es que, debido a que seleccionas cada elemento secundario de .top, esta regla puede
crear espacio adicional innecesario. El próximo combinador del mismo nivel, combinado con
un selector universal, te permite no solo controlar qué elementos tienen espacio, sino también
aplicar espacio a cualquier elemento. Esto te proporciona flexibilidad a largo plazo, sin importar
qué elementos HTML aparezcan en .top.

Combinadora del mismo nivel posterior

Un combinador posterior es muy similar a un selector del mismo nivel. Sin embargo, en lugar de
un carácter +, usa un carácter ~. La diferencia es que un elemento solo tiene que seguir a otro con
el mismo elemento superior, en lugar de ser el siguiente elemento con el mismo elemento superior.

Usa un selector subsiguiente junto con una seudoclase ":checked" para crear un elemento switch de CSS
puro.

Esta posterior combinación proporciona un poco menos de rigidez, lo que resulta útil en contextos
como el del ejemplo anterior, en el que se cambia el color de un interruptor personalizado cuando
la casilla de verificación asociada tiene el estado :checked.

Combinador secundario

Un combinador secundario (también conocido como subordinado directo) te permite tener más
control sobre la recursividad que viene con los selectores combinados. Si usas el carácter >,
limitas el selector de combinador para que aplique solo a elementos secundarios directos.

Considera el ejemplo anterior del selector del mismo nivel. El espacio se agrega a cada próximo
elemento del mismo nivel, pero si uno de esos elementos también tiene los próximos elementos
del mismo nivel como elementos secundarios, es posible que se generen espacios adicionales no
deseados.

Para solucionar este problema, cambia el siguiente selector del mismo nivel para incorporar un
combinador secundario: > * + *. La regla ahora solo se aplicará a los elementos secundarios
directos de .top.

Selectores compuestos

Puedes combinar selectores para aumentar la especificidad y legibilidad. Por ejemplo, para
orientar elementos <a>, que también tienen una clase de .my-class, escribe lo siguiente:

[Link]-class {
color: red;
}

De esta manera, no se aplicaría un color rojo a todos los vínculos y solo se aplicaría el color rojo
a .my-class if estuviera en un elemento <a>. Para obtener más información al respecto, consulta
el módulo de especificidad.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre selectores complejos

¿Cuál de los siguientes símbolos no es un combinador de selectores?

>

[Link] {
border: 1px solid hotpink;
}

El selector anterior es un ejemplo de...

Combinador

Terminador

Selector compuesto

Recursos
 Referencia de los selectores CSS
 Juego de selectores interactivos
 Referencia de seudoclase y pseudoelementos
  Una herramienta que traduce selectores CSS a explicaciones en inglés sencillo
¿Te resultó útil?
La cascada
bookmark_border
El podcast de CSS - 004: The Cascade

CSS significa Hojas de estilo en cascada. La cascada es el algoritmo para resolver conflictos en los
que se aplican varias reglas CSS a un elemento HTML. Es por esto que el texto del botón con el
siguiente estilo CSS será azul.

button {
color: red;
}

button {
color: blue;
}

Comprender el algoritmo de cascada te permite conocer la manera en que el navegador resuelve

este tipo de conflictos. El algoritmo de cascada se divide en 4 etapas distintas.

1. Posición y orden de aparición: El orden en el que aparecen tus reglas CSS

2. Especificidad: Es un algoritmo que determina qué selector CSS tiene la coincidencia más sólida.

3. Origin: Es el orden en el que aparece y de dónde proviene el CSS, ya sea un estilo de navegador,
CSS de una extensión del navegador o el CSS creado por ti.

4. Importancia: Algunas reglas de CSS tienen un peso mayor que otras, especialmente con el tipo de
regla !important.

Posición y orden de aparición

El orden en el que aparecen tus reglas de CSS y cómo aparecen se toma en cuenta en la cascada
mientras se calcula la resolución de conflictos.

La demostración que aparece justo al comienzo de esta lección es el ejemplo más directo de
posición. Hay dos reglas que tienen selectores de especificidad idéntica, por lo que ganó la última
que se declarará.

Los estilos pueden provenir de varias fuentes en una página HTML, como una etiqueta <link>,
una etiqueta <style> incorporada y CSS intercalado, como se define en el atributo style de un
elemento.

Si tienes un <link> que incluye CSS en la parte superior de tu página HTML, otro <link> que
incluya CSS en la parte inferior: el <link> inferior tendrá más especificidad. Lo mismo sucede
con los elementos <style> incorporados. Son más específicos, cuanto más abajo se encuentran
en la página.
El botón tiene un fondo azul, según lo define el CSS que incluye un elemento <link />. Una regla de CSS
que establece que sea oscuro se encuentra en una segunda hoja de estilo vinculada y se aplica debido a
su posición posterior.

Este orden también se aplica a los elementos <style> incorporados. Si se declaran antes de
un <link>, el CSS de la hoja de estilo vinculada será el que tenga mayor especificidad.

El elemento <style> se declara en <head>, mientras que el elemento <link /> se declara
en <body>. Esto significa que obtiene más especificidad que el elemento <style>.

Un atributo style intercalado con CSS declarado en él anulará todos los demás CSS,
independientemente de su posición, a menos que una declaración tenga !important definido.

La posición también se aplica en el orden de tu regla CSS. En este ejemplo, el elemento tendrá un
fondo púrpura porque background: purple se declaró en último lugar. Como el fondo verde se
declaró antes que el púrpura, ahora el navegador lo ignora.

.my-element {
background: green;
background: purple;
}

Poder especificar dos valores para la misma propiedad puede ser una forma sencilla de crear
resguardos para los navegadores que no admiten un valor en particular. En el siguiente
ejemplo, font-size se declara dos veces. Si el navegador admite clamp(), se descartará la
declaración font-size anterior. Si el navegador no admite clamp(), se respetará la declaración
inicial y el tamaño de la fuente será de 1.5rem.

.my-element {
font-size: 1.5rem;
font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}

Nota: Este enfoque de declarar la misma propiedad dos veces funciona porque los navegadores ignoran
los valores que no entienden. A diferencia de otros lenguajes de programación, CSS no arrojará un error ni
interrumpirá tu programa cuando detecte una línea que no puede analizar; el valor que no puede analizar
no es válido y, por lo tanto, se ignorará. Luego, el navegador continúa procesando el resto del CSS sin
dañar los elementos que ya comprende.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre la cascada

Si tienes el siguiente código HTML en tu página:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/[Link]" />
 </head>
<body>
<button>I am a button</button>
<style>
button {
background: pink;
}
</style>
</body>
</html>

Dentro de [Link], se encuentra la siguiente regla de CSS:

button {
background: yellow;
}

¿De qué color es el fondo del botón?

rosa

amarillo

Especificidad

La especificidad es un algoritmo que determina qué selector de CSS es el más específico,

mediante un sistema de ponderación o puntuación para realizar esos cálculos. Si haces que una
regla sea más específica, puedes hacer que se aplique incluso si otro CSS que coincide con el
selector aparece más adelante en el CSS.

En la siguiente lección, puedes aprender los detalles de cómo se calcula la especificidad. Sin
embargo, tener en cuenta algunos aspectos te ayudará a evitar demasiados problemas de
especificidad.

La segmentación de CSS a una clase en un elemento hará que esa regla sea más específica y, por
lo tanto, se considerará más importante que se aplique que CSS que se oriente solo al elemento.
Esto significa que con el siguiente CSS, h1 tendrá un color rojo, aunque ambas reglas coincidan, y
la regla del selector h1 aparecerá más adelante en la hoja de estilo.

<h1 class="my-element">Heading</h1>

.my-element {
color: red;
}

h1 {
color: blue;
}

Un elemento id hace que el CSS sea aún más específico, por lo que los diseños aplicados a un ID
anularán los aplicados de muchas otras maneras. Este es uno de los motivos por los que, en
general, no es una buena idea adjuntar estilos a un id. Puede resultar difícil reemplazar ese estilo
por otro.

La especificidad es acumulativa

Como podrás descubrir en la siguiente lección, a cada tipo de selector se le otorgan puntos que
indican su especificidad, los puntos de todos los selectores que utilizaste para apuntar a un
elemento se suman juntos. Esto significa que, si orientas un elemento con una lista de selectores
como [Link]-class[href]:hover, obtendrás algo bastante difícil de reemplazar por
otro CSS. Por este motivo, y para que tu CSS sea más reutilizable, te recomendamos que
mantengas los selectores lo más simples posible. Usa la especificidad como una herramienta para
llegar a los elementos cuando lo necesites, pero siempre considera refactorizar listas de selectores
largas y específicas si es posible.

Origen

El CSS que escribes no es el único que se aplica a una página. La cascada tiene en cuenta el origen
del CSS. Este origen incluye la hoja de estilo interna del navegador, los estilos agregados por las
extensiones del navegador o el sistema operativo, y el CSS creado. El orden de especificidad de
estos orígenes, desde el menos específico hasta el más específico, es el siguiente:

1. Estilos de la base de usuario-agente. Estos son los estilos que tu navegador aplica a los elementos
HTML de forma predeterminada.

2. Estilos de usuario locales. Estas pueden provenir del nivel del sistema operativo, como un tamaño
de fuente base, o una preferencia de movimiento reducido. También pueden provenir de
extensiones del navegador, como una extensión del navegador que permite que un usuario
escriba su propio CSS personalizado para una página web.

3. CSS creado. El CSS que creas

4. Autor: !important. Cualquier !important que agregues a las declaraciones creadas.

5. Estilos de usuario local !important. Cualquier !important que provenga del nivel del sistema
operativo o de la CSS a nivel de la extensión del navegador

6. Usuario-agente !important. Cualquier !important definido en el CSS predeterminado que

proporciona el navegador
Si tienes un tipo de regla !important en el CSS que creaste y el usuario tiene un tipo de regla !
important en su CSS personalizado, ¿qué CSS gana?

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre el origen de la cascada

Pon a prueba tus conocimientos sobre los orígenes de cascada y considera las siguientes reglas
de diseño de diversos orígenes:

Estilo usuario-agente

h1 { margin-block-start: 0.83em; }

Arranque

h1 { margin-block-start: 20px; }

Estilos de autor de la página

h1 { margin-block-start: 2ch; }

@media (max-width: 480px) {

h1 { margin-block-start: 1ch; }
}
Estilo personalizado del usuario

h1 { margin-block-start: 2rem !important; }

Luego, con el siguiente código HTML:

<h1>Lorem ipsum</h1>

¿Cuál es el último margin-block-start de h1?

1 canal

20px

2rem

2 canales

0.83em

Importancia

No todas las reglas de CSS se calculan de la misma manera ni se les otorga la misma especificidad
entre sí.

El orden de importancia, del menos importante al más importante, es el siguiente:

1. tipo de regla normal, como font-size, background o color

2. animation tipo de regla

3. !important tipo de regla (en el mismo orden que el origen)

4. transition tipo de regla

Los tipos de reglas de transición y animación activas tienen mayor importancia que las reglas
normales. En el caso de transiciones de mayor importancia que !important tipos de reglas. Esto
se debe a que cuando se activa una animación o transición, su comportamiento esperado es
cambiar el estado visual.

Cómo usar las Herramientas para desarrolladores para averiguar por

qué algunos CSS no se aplican

Por lo general, las Herramientas para desarrolladores del navegador mostrarán todas las CSS que
podrían coincidir con un elemento, con las que no se usan tachadas.
Si el CSS que esperabas aplicar no aparece, quiere decir que no coincide con el elemento. En ese
caso, debes buscar en otro lugar, ya sea porque hay un error tipográfico en el nombre de una clase
o un elemento, o de alguna CSS no válida.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre la cascada

La cascada se puede usar para lo siguiente:

Resolver conflictos cuando se aplican varios estilos a un elemento

Reglas de estilo de puntuación y ponderación

Asegúrate de que solo haya un valor de estilo para cada propiedad al momento de dibujar.

Ordenar y filtrar atributos de estilo

Recursos
 Una explicación muy interactiva de la cascada
 Referencia de cascada de MDN
¿Te resultó útil?
Especificidad
bookmark_border
El podcast de CSS 003: Especificidad

Supongamos que trabajas con los siguientes elementos HTML y CSS:

<button class="branding">Hello, Specificity!</button>

button {
color: red;
}

.branding {
color: blue;
}

Aquí hay dos reglas que compiten entre sí. Uno le coloreará el botón de rojo y
el otro, de color azul. ¿Qué regla se aplica al elemento? Comprender el
algoritmo de la especificación de CSS en lo que respecta a la especificidad es
la clave para comprender cómo CSS decide entre reglas competidoras.

La especificidad es una de las cuatro etapas distintas de la cascada, que se

abordó en el último módulo sobre la cascada.
Puntuación de especificidad

Cada regla del selector obtiene una puntuación. Puedes pensar en la

especificidad como una puntuación total, y cada tipo de selector gana puntos
para alcanzarla. El selector con la puntuación más alta gana.

Con la especificidad en un proyecto real, el equilibrio es asegurarse de que las

reglas de CSS que esperas aplicar realmente se apliquen, a la vez que, por lo
general, se mantienen las puntuaciones bajas para evitar la complejidad. La
puntuación solo debe ser tan alta como sea necesario, en lugar de aspirar a la
puntuación más alta posible. En el futuro, es posible que se deban aplicar
algunos CSS realmente más importantes. Si obtienes la puntuación más alta,
harás que ese trabajo sea difícil.

Puntuación de cada tipo de selector

Cada tipo de selector gana puntos. Agrega todos estos puntos para calcular la
especificidad general de un selector.

Selector universal
Un selector universal (*) no tiene especificidad y obtiene 0 puntos. Esto
significa que cualquier regla que tenga 1 o más puntos la anulará.
* {
color: red;
}

Selector de elemento o seudoelemento

Un selector de elemento (tipo) o pseudoelemento obtiene 1 punto de

especificidad .

Selector de tipos

div {
color: red;
}

Selector de seudoelementos

::selection {
color: red;
}

Selector de clase, pseudoclase o atributo

Un selector de clase, pseudoclase o atributo obtiene 10 puntos de

especificidad.

Selector de clases

.my-class {
color: red;
}

Selector de pseudoclase

:hover {
color: red;
}
Selector de atributos

[href='#'] {
color: red;
}

La seudoclase :not() en sí misma no agrega nada al cálculo de especificidad.

Sin embargo, los selectores pasados como argumentos se agregan al cálculo
de especificidad.
div:not(.my-class) {
color: red;
}

Este ejemplo tendría 11 puntos de especificidad porque tiene un selector de

tipos (div) y una clase dentro de :not().

Selector de ID

Un selector de ID obtiene 100 puntos de especificidad, siempre que uses

un selector de ID (#myID) y no un selector de atributos ([id="myID"]).
#myID {
color: red;
}

Atributo de estilo intercalado

El CSS que se aplica directamente al atributo style del elemento HTML obtiene
una puntuación de especificidad de 1,000 puntos. Esto significa que,
para anularlo en CSS, debes escribir un selector extremadamente específico.

<div style="color: red"></div>

Regla !important

Por último, un elemento !important al final de un valor de CSS obtiene una

puntuación de especificidad de 10,000 puntos. Esta es la especificidad más
alta que puede obtener un elemento individual.

Se aplica una regla !important a una propiedad de CSS, por lo que no todos los
elementos de la regla general (selector y propiedades) obtienen la misma
puntuación de especificidad.

.my-class {
color: red !important; /* 10,000 points */
background: white; /* 10 points */
}

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre la puntuación de especificidad

¿Cuál es la puntuación de especificidad de a[href="#"]?

1
11
5

Especificidad en contexto

La especificidad de cada selector que coincide con un elemento se suma en

conjunto. Considera este código HTML de ejemplo:

<a class="my-class another-class" href="#">A link</a>

Este vínculo tiene dos clases. Agrega el siguiente CSS y obtiene 1 punto de
especificidad:

a {
color: red;
}

Haz referencia a una de las clases de esta regla, que ahora tiene 11 puntos
de especificidad:

[Link]-class {
color: green;
}

Agrega la otra clase al selector; ahora tiene 21 puntos de especificidad:

[Link]-class {
color: rebeccapurple;
}

Agrega el atributo href al selector. Ahora tiene 31 puntos de especificidad:

[Link]-class[href] {
color: goldenrod;
}

Por último, agrega una seudoclase :hover a todo eso; el selector terminará
con 41 puntos de especificidad:

[Link]-class[href]:hover {
color: lightgrey;
}

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre la puntuación de especificidad

¿Cuál de los siguientes selectores vale 21 puntos?

[Link]
article:hover a[href]
article > section

Visualización de la especificidad

En los diagramas y las calculadoras de especificidad, la especificidad a

menudo se visualiza de la siguiente manera:
El grupo izquierdo es id selectores. El segundo grupo son los selectores de
clase, atributo y seudoclase. El grupo final son los selectores de elementos y
pseudoelementos.

Como referencia, el siguiente selector es 0-4-1:

[Link]-class[href]:hover {
color: lightgrey;
}

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre la visualización de especificidad

¿Cuál de los siguientes selectores es 1-2-1?

li#specialty [Link]
section#[Link]
[data-state-rad].dark#specialty:hover
#specialty:hover [Link]
Especificidad que aumenta de manera pragmáticamente

Supongamos que tenemos algunas CSS que se ven de la siguiente manera:

.my-button {
background: blue;
}

button[onclick] {
background: grey;
}

Con HTML que se ve de la siguiente manera:

<button class="my-button" onclick="alert('hello')">Click me</button>

El botón tiene un fondo gris porque el segundo selector obtiene 11 puntos

de especificidad (0-1-1). Esto se debe a que tiene un selector de tipo
(button), que es de 1 punto y un selector de atributos ([onclick]), que es de 10
puntos.

La regla anterior, .my-button, obtiene 10 puntos (0-1-0), porque tiene un

selector de clases.

Si quieres potenciar esta regla, repite el selector de clases de la siguiente

manera:

.[Link]-button {
background: blue;
}

button[onclick] {
background: grey;
}

Ahora, el botón tendrá un fondo azul, ya que el nuevo selector obtiene una
puntuación de especificidad de 20 puntos (0-2-0).

Precaución: Si necesitas aumentar la especificidad de esta manera con frecuencia,

es posible que estés escribiendo selectores demasiado específicos. Considera si
puedes refactorizar tu CSS para reducir la especificidad de otros selectores y evitar
este problema.

Una puntuación de especificidad coincidente registra la victoria de la

instancia más reciente

Por ahora, usemos el ejemplo del botón y cambiemos la CSS a lo siguiente:

.my-button {
background: blue;
}

[onclick] {
background: grey;
}

El botón tiene un fondo gris, porque ambos selectores tienen una

puntuación de especificidad idéntica (0-1-0).

Si cambias las reglas en el orden de origen, el botón será azul.

[onclick] {
background: grey;
}

.my-button {
background: blue;
}

Esta es la única instancia en la que gana el CSS más nuevo. Para hacerlo,
debe coincidir con la especificidad de otro selector que se oriente al mismo
elemento.

Recursos
 Especificidad de CSS
 Calculadora de especificidad
 Especificidad de la MDN
 Especificaciones sobre la especificidad de CSS
 Otra calculadora de especificidad
Inheritance
bookmark_border
El podcast de CSS 005: Herencia

Supongamos que acabas de escribir algunas CSS para que los elementos se
vean como un botón.

<a href="[Link] class="my-button">I am a button link</a>

.my-button {
display: inline-block;
padding: 1rem 2rem;
text-decoration: none;
background: pink;
font: inherit;
text-align: center;
}

Luego, agregas un elemento de vínculo a un artículo de contenido, con un

valor class de .my-button. Sin embargo, hay un problema, el texto no es el
color que esperabas. ¿Cómo ocurrió esto?

Algunas propiedades de CSS se heredan si no especificas un valor para ellas.

En el caso de este botón, heredó el color de este CSS:

article a {
color: maroon;
}

En esta lección, descubrirás por qué sucede esto y cómo la herencia es una
función eficaz para ayudarte a escribir menos CSS.

Flujo de herencia

Veamos cómo funciona la herencia con este fragmento de HTML:

<html>
<body>
<article>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</body>
</html>
El elemento raíz (<html>) no heredará nada porque es el primer elemento del
documento. Agrega CSS al elemento HTML, y el documento comienza en
cascada.

html {
color: lightslategray;
}

Otros elementos heredan la propiedad color de forma predeterminada. El

elemento html tiene color: lightslategray, por lo que todos los elementos que
pueden heredar color ahora tendrán un color de lightslategray.

body {
font-size: 1.2em;
}

Nota: Debido a que en esta demostración se establece el tamaño de fuente en el

elemento body, el elemento html seguirá teniendo el tamaño de fuente inicial
establecido por el navegador (hoja de estilo del usuario-agente),
pero article y p heredarán el tamaño de fuente declarado por body. Esto se debe a
que la herencia solo cae en cascada hacia abajo.

p {
font-style: italic;
}

Solo <p> tendrá texto en cursiva porque es el elemento anidado más

profundo. La herencia solo fluye hacia abajo, no hacia arriba a los elementos
superiores.

¿Qué propiedades se heredan de forma predeterminada?

No todas las propiedades de CSS se heredan de forma predeterminada, pero

hay muchas de ellas. A modo de referencia, a continuación, se muestra la lista
completa de propiedades que se heredan de forma predeterminada, tomada
de la referencia W3 de todas las propiedades de CSS:

 azimut
 border-collapse
 border-spacing
 lado del subtítulo
 color
 cursor
 direction
 celdas-vacías
 familia-de-fuentes
 font-size
 font-style
 font-variant
  font-weight
 fuente
 espaciado-letras
 line-height
 list-style-image
 list-style-position
 list-style-type
 list-style
 huérfanos
 precios
 text-align
 text-indent
 transformación-de-texto
 visibilidad
 white-space
 viudas
 word-spacing
Cómo funciona la herencia

Cada elemento HTML tiene todas las propiedades de CSS definidas de forma
predeterminada con un valor inicial. Un valor inicial es una propiedad que no
se heredó y se muestra como predeterminada si la cascada no puede calcular
un valor para ese elemento.

Las propiedades que pueden heredarse en cascada y los elementos

secundarios obtendrán un valor calculado que representa el valor de su
elemento superior. Esto significa que si un elemento superior tiene font-
weight establecido en bold, todos los elementos secundarios aparecerán en
negrita, a menos que su font-weight esté configurado en un valor diferente o
que la hoja de estilo del usuario-agente tenga un valor de font-weight para ese
elemento.

Cómo heredar y controlar de forma explícita la herencia

La herencia puede afectar los elementos de formas inesperadas, por lo que

CSS tiene herramientas para ayudarte con eso.

La palabra clave inherit

Puedes hacer que cualquier propiedad herede el valor calculado de su

elemento superior con la palabra clave inherit. Una manera útil de usar esta
palabra clave es crear excepciones.

strong {
font-weight: 900;
}

Este fragmento de CSS configura todos los elementos <strong> para que
tengan un font-weight de 900, en lugar del valor predeterminado bold, que
sería equivalente a font-weight: 700.
.my-component {
font-weight: 500;
}

En cambio, la clase .my-component configura font-weight como 500. Para hacer

que los elementos <strong> dentro de .my-component también font-weight: 500,
agrega lo siguiente:

.my-component strong {
font-weight: inherit;
}

Ahora, los elementos <strong> dentro de .my-component tendrán un font-

weight de 500.

Puedes establecer este valor de forma explícita, pero si usas inherit y el CSS
de .my-component cambia en el futuro, puedes garantizar que tu <strong> se
mantenga actualizado con él automáticamente.

La palabra clave initial

La herencia puede causar problemas con tus elementos, y initial te

proporciona una potente opción de restablecimiento.

Anteriormente, aprendiste que cada propiedad tiene un valor predeterminado

en CSS. La palabra clave initial vuelve a configurar una propiedad en ese valor
predeterminado inicial.

aside strong {
font-weight: initial;
}

Este fragmento quitará el grosor en negrita de todos los

elementos <strong> dentro de un elemento <aside> y, en su lugar, los
convertirá en un peso normal, que es el valor inicial.

La palabra clave unset

La propiedad unset se comporta de manera diferente si una propiedad se

hereda de forma predeterminada o no. Si una propiedad se hereda de forma
predeterminada, la palabra clave unset será la misma que inherit. Si la
propiedad no se hereda de forma predeterminada, la palabra clave unset será
igual a initial.

Recordar qué propiedades de CSS se heredan de forma predeterminada

puede ser difícil, unset puede ser útil en ese contexto. Por ejemplo, color se
hereda de forma predeterminada, pero margin no, por lo que puedes escribir
lo siguiente:

/* Global color styles for paragraph in authored CSS */

p {
margin-top: 2em;
color: goldenrod;
}

/* The p needs to be reset in asides, so you can use unset */

aside p {
margin: unset;
color: unset;
}

Ahora, se quita margin y color vuelve a ser el valor calculado heredado.

También puedes usar el valor unset con la propiedad all. Volviendo al ejemplo
anterior, ¿qué sucede si los diseños p globales obtienen algunas propiedades
adicionales? Solo se aplicará la regla que se configuró para margin y color.

/* Global color styles for paragraph in authored CSS */

p {
margin-top: 2em;
color: goldenrod;
padding: 2em;
border: 1px solid;
}

/* Not all properties are accounted for anymore */

aside p {
margin: unset;
color: unset;
}

Si cambias la regla aside p a all: unset, no importa qué diseños globales se

apliquen a p en el futuro, siempre no se establecerán.

aside p {
margin: unset;
color: unset;
all: unset;
}

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre herencia

¿Cuáles de las siguientes propiedades son heredables?

line-height
animation
color
font-size
text-align

¿Qué valor se comporta como inherit, a menos que no haya nada que heredar
y, luego, se comporte como initial?

superset
unset
reset

Recursos
 Referencia de MDN en valores calculados
 Un artículo sobre cómo la herencia puede ser útil en los frontends modulares
Color
bookmark_border
El podcast de CSS 006: Color Parte uno

El color es una parte importante de cualquier sitio web y, en CSS, hay muchas
opciones de tipos de color, funciones y tratamientos.

¿Cómo decides qué tipo de color usar? ¿Cómo puedes hacer que los colores
sean semitransparentes? En esta lección, aprenderás qué opciones tienes a
fin de ayudarte a tomar las decisiones correctas para tu proyecto y equipo.

CSS tiene varios tipos de datos diferentes, como strings y números. El color es
uno de estos tipos y usa otros tipos, como números para sus propias
definiciones.
Colores numéricos

Es muy probable que tu primera exposición a colores en CSS sea mediante

colores numéricos. Podemos trabajar con valores de color numéricos de
diferentes formas.

Colores hexadecimales

h1 {
color: #b71540;
}

La notación hexadecimal (a menudo abreviada como hexadecimal) es una

sintaxis abreviada para RGB, que asigna un valor numérico al rojo, verde y
azul, que son los tres colores primarios.

Nota: Según el Web Almanac, hex es el tipo de sintaxis de color más popular.

Los rangos hexadecimales son 0-9 y A-F. Cuando se usan en una secuencia
de seis dígitos, se traducen a los rangos numéricos RGB que van del 0 al 255,
los cuales corresponden a los canales de color rojo, verde y azul,
respectivamente.

También puedes definir un valor alfa con cualquier color numérico. Un valor
alfa es un porcentaje de transparencia. En el código hexadecimal, agregas
otros dos dígitos a la secuencia de seis dígitos, lo que crea una secuencia de
ocho dígitos. Por ejemplo, para establecer el negro en código hexadecimal,
escribe #000000. Para agregar una transparencia del 50%, cámbiala
a #00000080.

Debido a que la escala hexadecimal es 0-9 y A-F, es probable que los valores
de transparencia no sean exactamente los esperados. Estos son algunos
valores comunes clave que se agregan al código hexadecimal
negro, #000000:

 Un 0% alfa, que es completamente transparente, es 00: #00000000

 Un 50% alfa es 80: #00000080
 75% alfa es BF: #000000BF

Para convertir un hex de dos dígitos en un decimal, toma el primer dígito y

multiplícalo por 16 (porque X es base 16) y, luego, agrega el segundo dígito.
Usando BF como ejemplo para un 75% alfa:

1. B es igual a 11, que cuando multiplicado por 16 equivale a 176

2. F es igual a 15
3. 176 + 15 = 191
4. El valor alfa es del 191 al 75% de 255
Nota: También puedes escribir códigos hexadecimales con una abreviatura de tres
dígitos. Un código hexadecimal de tres dígitos es un atajo a una secuencia
equivalente de seis dígitos. Por ejemplo, #a4e es idéntico a #aa44ee. Para agregar
alfa, #a4e8 se expandiría a #aa44ee88.

RGB (rojo, verde, azul)

h1 {
color: rgb(183, 21, 64);
}

Los colores RGB se definen con la función de color rgb() y usa números o
porcentajes como parámetros. Los números deben estar dentro del rango
de 0-255 y los porcentajes deben estar entre 0-255. RGB funciona en la
escala de 0 a 255, por lo que 255 sería equivalente al 100% y de 0 a 0%.

Para configurar el negro en RGB, defínelo como rgb(0 0 0), que es cero rojo,
cero verde y cero azul. El negro también se puede definir como rgb(0%, 0%,
0%). El blanco es exactamente lo opuesto: rgb(255, 255, 255) o rgb(100%, 100%,
100%).

Un valor alfa se establece en rgb() de una de dos maneras. Agrega

un / después de los parámetros rojo, verde y azul, o usa la función rgba(). El
valor alfa se puede definir con un porcentaje o un decimal entre 0 y 1. Por
ejemplo, para establecer un 50% de alfa de negro en los navegadores
modernos, escribe rgb(0 0 0 / 50%) o rgb(0 0 0 / 0.5). Para una mayor
compatibilidad, con la función rgba(), escribe rgba(0, 0, 0, 50%) o rgba(0, 0, 0,
0.5).
Nota: Se quitaron las comas de la notación rgb() y hsl() porque las funciones de
color más nuevas, como lab() y lch(), usan espacios en lugar de comas como
delimitador. Este cambio proporciona más coherencia no solo con las funciones de
color más recientes, sino también con el CSS en general. Para mejorar la
retrocompatibilidad, puedes seguir usando comas para definir rgb() y hsl().

HSL (matiz, saturación, luminosidad)

h1 {
color: hsl(344, 79%, 40%);
}

HSL significa matiz, saturación y luminosidad. El matiz describe el valor en la

rueda de color, de 0 a 360 grados, y comienza con rojo (es decir, 0 y 360). Un
matiz de 180, o del 50%, estaría dentro del rango azul. Es el origen del color
que vemos.

La saturación es la intensidad del tono seleccionado. Se mostrará en escala

de grises un color completamente desaturado (con una saturación de 0%). Por
último, la luminosidad es el parámetro que describe la escala de luz agregada
de blanco a negro. Una luz de 100% siempre te dará un color blanco.

Con la función de color hsl(), para definir un negro verdadero, escribe hsl(0 0%
0%) o hsl(0deg 0% 0%). Esto se debe a que el parámetro de matiz define el
grado de la rueda de colores, que, si usas el tipo de número, es 0-360.
También puedes usar el tipo de ángulo, que es ( 0deg) o (0turn). Tanto la
saturación como la luminosidad se definen con porcentajes.

Nota: El tipo de ángulo en CSS es excelente para definir el matiz porque representa
muy bien el ángulo de la paleta de colores. Este tipo acepta grados, giros, radianes y
graduados.

Navegadores compatibles

 2
 12
 3.6
 4

Origen
Alfa se define en hsl(), de la misma manera que rgb(), si se agrega
un / después de los parámetros de matiz, saturación y luminosidad, o bien usa
la función hsla(). El valor alfa se puede definir con un porcentaje o un decimal
entre 0 y 1. Por ejemplo, para establecer un 50% de negro alfa, usa hsl(0 0%
0% / 50%) o hsl(0 0% 0% / 0.5). Con la función hsla(), escribe hsla(0, 0%, 0%,
50%) o hsla(0, 0%, 0%, 0.5).
Nota: Pronto se agregarán algunos tipos de color más recientes a CSS. Entre ellos,
se incluyen lab() y lch(), que permiten especificar un rango de color mucho más
amplio que el que es posible en RGB.

Palabras clave de color

Existen 148 colores con nombre en CSS. Estos son nombres simples en inglés,
como morado, tomate y vara de oro. Algunos de los nombres más populares,
según el Almanaco web, son negros, blancos, rojos, azules y grises. Nuestras
favoritas incluyen el dorado, azul alice y rosa.

Además de los colores estándar, también hay palabras clave especiales

disponibles:

 transparent es un color completamente transparente. También es el valor inicial

de background-color.
 currentColor es el valor dinámico contextual calculado de la propiedad color. Si
tienes un color de texto de red y, luego, configuras border-color en currentColor,
también será rojo. Si el elemento en el que defines currentColor no tiene un
valor para color definido, currentColor se calculará mediante la cascada en su
lugar.
Nota: Las palabras clave del sistema son colores que se definen según el tema de tu
sistema operativo. Algunos ejemplos de estos colores son Background, que es el color
de fondo del escritorio o Highlight, que es el color de resaltado de los elementos
seleccionados. Estas son solo dos de muchas opciones. Las palabras clave de colores
no distinguen entre mayúsculas y minúsculas; sin embargo, a menudo verá colores
del sistema con mayúsculas para diferenciarlas de las palabras clave de color
estándar.
Dónde usar el color en las reglas de CSS
Si una propiedad de CSS acepta el tipo de datos <color> como valor, aceptará
cualquiera de los métodos anteriores para expresar el color. Para darle estilo
al texto, usa las propiedades color, text-shadow y text-decoration-color, que
aceptan el color como valor o el color como parte del valor.

Para los fondos, puedes establecer un color como valor

de background o background-color. Los colores también se pueden usar en
gradientes, como linear-gradient. Los gradientes son un tipo de imagen que se
puede definir de manera programática en CSS. Los gradientes aceptan dos o
más colores con cualquier combinación de formato de color, como
hexadecimal, RGB o hsl.

Nota: Hay mucho que aprender con los gradientes, por lo que escribimos una lección
completa sobre cómo usarlos.

Por último, border-color y outline-color establecen el color de los bordes y los

contornos de los cuadros. La propiedad box-shadow también acepta el color
como uno de los valores.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre color

¿Cuáles de los siguientes son colores válidos?

hsl(180deg 50% 50%)

rbga(400 0 1)

hotpink

#0f08

rgb(255, 0, 0)

#OOFZ2

Busca el color hsl no válido.

hsl(0 0% 0% / 20%)

hsl(2rad 50% 50%)

hsl(5, 0%, 90%)

hsl(.5turn 40% 60%)

hsl(0, 0, 0)

Recursos
 Una demostración práctica en la que se muestra cómo usar ángulos con HSL
 Una guía completa sobre el color
 Una guía completa sobre la amplia gama de colores
 [video] Explicación sobre cómo leer códigos hexadecimales
 Cómo funcionan los códigos hexadecimales
Unidades de tallas
bookmark_border
El podcast de CSS 008: Sizing Units

La Web es un medio responsivo, pero a veces es conveniente controlar sus

dimensiones para mejorar la calidad general de la interfaz. Un buen ejemplo
es limitar la longitud de las líneas para mejorar la legibilidad. ¿Cómo harías
eso en un medio flexible como la Web?

En este caso, puedes usar una unidad ch, que equivale al ancho de un
carácter "0" en la fuente renderizada en su tamaño calculado. Esta unidad te
permite limitar el ancho del texto con una unidad diseñada para ajustar el
tamaño del texto, lo que, a su vez, permite un control predecible,
independientemente del tamaño de ese texto. La unidad ch es una de las
pocas unidades que son útiles para contextos específicos, como este ejemplo.

Números

Los números se usan para definir opacity, line-height e incluso para valores de
canal de color en rgb. Los números son números enteros sin unidades (1, 2, 3,
100) y decimales (.1, .2, .3).

Los números tienen un significado según su contexto. Por ejemplo, cuando

defines line-height, un número es representativo de una proporción si la
defines sin una unidad de compatibilidad:

p {
font-size: 24px;
line-height: 1.5;
}

En este ejemplo, 1.5 es igual al 150% del tamaño de fuente de píxeles

calculados del elemento p. Esto significa que si p tiene un font-size de 24px,
la altura de la línea se calculará como 36px.

Nota: Se recomienda usar un valor sin unidades para line-height, en lugar de

especificar una unidad. Como aprendiste en el módulo de herencia, font-size se
puede heredar. La definición de un elemento line-height sin unidades mantiene la
altura de línea en relación con el tamaño de la fuente. Esto proporciona una mejor
experiencia que, por ejemplo, line-height: 15px, que no cambiará y puede verse
extraño con ciertos tamaños de fuente.

Los números también se pueden usar en los siguientes lugares:

 Cuando se establecen valores para los filtros, filter: sepia(0.5) aplica un filtro
sepia 50% al elemento.
  Cuando se configura la opacidad, opacity: 0.5 aplica una opacidad 50%.
 En los canales de color: rgb(50, 50, 50), donde los valores de 0 a 255 son
aceptables para establecer un valor de color. Consulta la lección sobre colores.
 Para transformar un elemento, transform: scale(1.2) escala el elemento en un
120% de su tamaño inicial.

Porcentajes

Cuando usas un porcentaje en el CSS, debes saber cómo se calcula. Por

ejemplo,width se calcula como un porcentaje del ancho disponible en el
elemento superior.

div {
width: 300px;
height: 100px;
}

div p {
width: 50%;
}

En el ejemplo anterior, el ancho de div p es 150px, suponiendo que el diseño

usa el box-sizing: content-box predeterminado.

Si configuras margin o padding como un porcentaje, serán una parte del ancho
del elemento superior, sin importar la dirección.

div {
width: 300px;
height: 100px;
}

div p {
margin-top: 50%; /* calculated: 150px */
padding-left: 50%; /* calculated: 150px */
}

En el fragmento anterior, margin-top y padding-left se calcularán como 150px.

div {
width: 300px;
height: 100px;
}

div p {
width: 50%; /* calculated: 150px */
 transform: translateX(10%); /* calculated: 15px */
}

Si estableces un valor transform como porcentaje, se basa en el elemento con

el conjunto de transformación. En este ejemplo, p tiene un
valor translateX de 10% y un width de 50%. Primero, calcula el ancho: 150px,
porque ocupa el 50% del ancho de su elemento superior. Luego,
toma 10% de 150px, que es 15px.

Término clave: la propiedad de transformación te permite modificar la apariencia y

la posición de un elemento mediante la rotación, la inclinación, el ajuste de tamaño y
la traslación. Esto se puede hacer en un espacio en 2D y 3D.

Dimensiones y longitudes

Si adjuntas una unidad a un número, se convierte en una dimensión. Por

ejemplo, 1rem es una dimensión. En este contexto, la unidad que se adjunta a
un número se conoce en las especificaciones como un token de dimensión.
Las longitudes son dimensiones que hacen referencia a la distancia y
pueden ser absolutas o relativas.

Longitudes absolutas

Todas las longitudes absolutas se resuelven en la misma base, lo que las hace
predecibles en cualquier lugar que se usen en tu CSS. Por ejemplo, si
usas cm para ajustar el tamaño de tu elemento y, luego, imprimir, debería ser
preciso si lo comparas con una regla.

div {
width: 10cm;
height: 5cm;
background: black;
}

Si imprimiras esta página, la div se imprimiría como un rectángulo negro de

10 x 5 cm. Ten en cuenta que CSS se usa no solo para el contenido digital,
sino también para diseñar el contenido impreso. Las longitudes absolutas
pueden resultar útiles a la hora de diseñar contenido impreso.

Unidad Nombre Equivale a

cm Centímetros 1cm = 96px/2.54

mm Milímetros 1 mm = 1/10 de 1 cm

P Un cuarto de milímetro 1Q = 1/40 de 1 cm

in Pulgadas 1 pulgadas = 2.54 cm = 96 px

Unidad Nombre Equivale a

pc Fotos 1pc = 1/6 de 1in

pt Puntos 1 pt = 1/72 de 1 in

px Píxeles 1 px = 1/96 de 1 in

Longitudes relativas

Una longitud relativa se calcula con un valor base, de manera similar a un

porcentaje. La diferencia entre estos y los porcentajes es que puedes ajustar
el tamaño de los elementos contextualmente. Esto significa que CSS tiene
unidades, como ch, que usan el tamaño del texto como base, y vw, que se
basa en el ancho del viewport (la ventana de tu navegador). Las longitudes
relativas son particularmente útiles en la Web debido a su naturaleza
responsiva.

Unidades relativas del tamaño de fuente

CSS proporciona unidades útiles que son relativas al tamaño de los elementos
de la tipografía renderizada, como el tamaño del texto (unidades em) o el
ancho de los caracteres de los tipos de letra (unidades ch).

Unidad en relación con:

en En relación con el tamaño de la fuente, es decir, 1.5em será un 50% más grande que el tamaño de fuente calc
superior. (Históricamente, es la altura de la letra "M" mayúscula).

p. ej. Heurística para determinar si se debe usar la altura de x, una letra "x" o ".5em" en el tamaño de fuente proce
elemento.

mayúscul Altura de las letras mayúsculas en el tamaño de la fuente calculada actual del elemento.
a

ch Avance de caracteres promedio de un glifo estrecho en la fuente del elemento (representada por el glifo "0")

ic El avance de caracteres promedio de un glifo de ancho completo en la fuente del elemento, como se represe
(ideograma de agua CJK, U+6C34).

rem El tamaño de fuente del elemento raíz (el valor predeterminado es de 16 px).

lh Es la altura de línea del elemento.

rlh Altura de línea del elemento raíz.

Unidades relativas del viewport

Puedes usar las dimensiones del viewport (ventana del navegador) como base
relativa. Estas unidades forman parte del espacio de viewport disponible.

Unidad en relación con

vw 1% del ancho de la vista del puerto. Las personas usan esta unidad para realizar trucos interesantes d
tamaño de una fuente del encabezado en función del ancho de la página, de modo que, a medida qu
tamaño, también cambie el tamaño de la fuente.

VH el 1% de la altura del viewport Puedes usar esto para organizar los elementos en una IU, por ejemplo
herramientas de pie de página.

vi El 1% del tamaño del viewport en el eje intercalado del elemento raíz. El eje se refiere a los modos de
escritura horizontales, como el inglés, el eje intercalado es horizontal. En los modos de escritura verti
letra japoneses, el eje intercalado va de arriba abajo.

vb El 1% del tamaño del viewport en el eje de bloque del elemento raíz. Para el eje de bloque, esta sería
Los idiomas de izquierda a derecha, como el inglés, tendrían un eje de bloque vertical, ya que los lect
página de arriba abajo. Un modo de escritura vertical tiene un eje de bloque horizontal.

vmin El 1% de la dimensión más pequeña del viewport.

campaña de máx. El 1% de la dimensión más grande del viewport.

rendimiento

div {
width: 10vw;
}

p {
max-width: 60ch;
}
En este ejemplo, div será el 10% del ancho del viewport, ya que 1vw es el 1%
del ancho del viewport. El elemento p tiene un max-width de 60ch, lo que
significa que no puede exceder el ancho de 60 caracteres "0" en la fuente y el
tamaño calculados.

Objetivo: Ajustar el tamaño del texto con unidades relativas como em o rem, en lugar
de una unidad absoluta, como px, permite que el tamaño del texto responda a las
preferencias del usuario. Esto puede incluir el tamaño de la fuente del sistema o del
elemento superior, como <body>. El tamaño base de em es el elemento superior del
elemento y el tamaño base de rem es el tamaño de fuente base del documento. Si no
defines un font-size en tu elemento html, este tamaño de fuente preferido por el
usuario se respetará si usas longitudes relativas, como em y rem. Si usas
unidades px para el tamaño del texto, se ignorará esta preferencia.

Unidades varias

Hay algunas otras unidades que se han especificado para trabajar con
determinados tipos de valores.

Unidades de ángulo

En el módulo de color, analizamos las unidades de ángulo, que son útiles

para definir valores de grado, como el matiz en hsl. También son útiles para
rotar elementos dentro de las funciones de transformación.
div {
width: 150px;
height: 150px;
transform: rotate(60deg);
}

Con la unidad de ángulo deg, puedes rotar un div 90° en su eje central.

div {
background-image: url('[Link]');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

div {
background-image: url('[Link]');
}
}

Nota: Otras unidades de ángulo incluyen las unidades de

ángulos rad (radianes), grad (grados) y turn, que representan una parte de un
ángulo, donde 1turn = 360deg y 0.5turn = 180deg.
Unidades de resolución

En el ejemplo anterior, el valor de min-resolution es 192dpi. La

unidad dpi significa puntos por pulgada. Un contexto útil para ello es
detectar pantallas de muy alta resolución, como las pantallas Retina en una
consulta de medios, y mostrar una imagen de mayor resolución.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre las tallas

¿Cuáles de las siguientes son dimensiones válidas?

px
8
em
en
cm
ch
ux
p. ej.
ui

¿En qué se diferencian las unidades absolutas y relativas?

La longitud absoluta se calcula con respecto a un único valor base compartido, en el

que se compara una unidad relativa con un valor base que puede cambiar.
Los valores absolutos no pueden cambiar, pero las unidades relativas sí pueden

Las unidades de viewport son absolutas.

Verdadero
Falso

Recursos
 Valores de especificaciones de CSS y unidades de nivel 4
 Tamaño y unidades en MDN
 Todo sobre Ems
 Una explicación de porcentajes
¿Te resultó útil?
Diseño
bookmark_border
El podcast de CSS 009: Layout

Imagina que trabajas como desarrollador y un colega del diseñador te entrega

un diseño para un sitio web nuevo. Tiene todo tipo de diseños y
composiciones interesantes: diseños bidimensionales que tienen en cuenta el
ancho y la altura del viewport, así como diseños que deben ser fluidos y
flexibles. ¿Cómo decides cuál es la mejor manera de aplicarles un estilo con
CSS?

CSS nos proporciona varias formas de resolver problemas de diseño en el eje

horizontal, en el vertical o en ambos. Elegir el método de diseño correcto para
un contexto puede ser difícil y, con frecuencia, es posible que necesites más
de un método de diseño para resolver el problema. Para ayudarte con esto,
en los siguientes módulos, aprenderás sobre las funciones únicas de cada
mecanismo de diseño de CSS para fundamentar esas decisiones.

Diseño: una breve historia

En los inicios de la Web, los diseños más complejos que un documento simple
se presentaban con elementos <table>. La separación del HTML de los estilos
visuales se facilitó cuando los navegadores adoptaron ampliamente CSS a
fines de la década de 1990. CSS abrió las puertas a los desarrolladores para
que pudieran cambiar por completo la apariencia de un sitio web sin tocar
HTML. Esta nueva función inspiró proyectos como CSS Zen Garden, que se
creó para demostrar el poder de CSS y alentar a más desarrolladores a
aprender a usarlo.
CSS evolucionó a medida que evolucionaron nuestras necesidades de diseño
web y tecnología de navegadores. Puedes leer cómo el diseño de CSS y
nuestro enfoque de diseño evolucionaron con el tiempo en este artículo de
Rachel Andrew.
Diseño: el presente y el futuro

El estilo CSS moderno tiene herramientas de diseño excepcionalmente

potentes. Tenemos sistemas exclusivos para el diseño y vamos a analizar en
detalle lo que tenemos a nuestra disposición, antes de profundizar en Flexbox
y Grid en los próximos módulos.

Información sobre la propiedad display

La propiedad display realiza dos tareas. Lo primero que hace es determinar si
el cuadro al que se aplica actúa como intercalado o como bloque.

.my-element {
display: inline;
}

Los elementos intercalados se comportan como las palabras en una oración.

Se ubican uno al lado del otro en la dirección intercalada. Los elementos
como <span> y <strong>, que por lo general se usan para aplicar estilo a
fragmentos de texto que contienen elementos como <p> (párrafo), están
intercalados de forma predeterminada. También conservan los espacios en
blanco circundantes.

No puedes establecer un ancho y una altura explícitos en los elementos

intercalados. Los elementos circundantes ignorarán cualquier margen y
padding a nivel de bloque.
.my-element {
display: block;
}

Los elementos de bloque no deben estar uno junto al otro. Crean una línea
nueva para ellos mismos. A menos que lo modifique otro código CSS, un
elemento de bloque se expandirá hasta el tamaño de la dimensión intercalada
y, por lo tanto, abarcará todo el ancho en un modo de escritura horizontal. Se
respetará el margen en todos los lados de un elemento de bloque.

.my-element {
display: flex;
}

La propiedad display también determina cómo deben comportarse los

elementos secundarios de un elemento. Por ejemplo, si estableces la
propiedad display en display: flex, el cuadro será de nivel de bloque y también
se convertirán sus elementos secundarios en elementos flexibles. Esto habilita
las propiedades flexibles que controlan la alineación, el orden y el flujo.

Flexbox y cuadrícula
Existen dos mecanismos de diseño principales que crean reglas de diseño
para varios elementos: flexbox y cuadrícula. Comparten similitudes, pero
están diseñados para resolver diferentes problemas de diseño.
Nota: En los próximos módulos, profundizaremos en ambos temas, pero aquí
encontrarás una descripción general de lo que son y para qué sirven.

Caja flexible

.my-element {
display: flex;
}

Flexbox es un mecanismo para crear diseños unidimensionales. Diseño en un

solo eje, ya sea horizontal o vertical. De forma predeterminada, Flexbox
alineará los elementos secundarios del elemento uno al lado del otro, en la
dirección intercalada, y los estirará en la dirección del bloque para que todos
tengan la misma altura.

Los elementos permanecerán en el mismo eje y no se ajustarán cuando se

queden sin espacio. En cambio, intentarán aplastarse en la misma línea. Este
comportamiento se puede cambiar con las propiedades align-items, justify-
content y flex-wrap.

Flexbox también convierte los elementos secundarios en elementos

flexibles, lo que significa que puedes escribir reglas sobre cómo se
comportan dentro de un contenedor flexible. Puedes cambiar la alineación, el
orden y la justificación de un elemento individual. También puedes cambiar la
forma en que se reduce o aumenta con la propiedad flex.

.my-element div {
flex: 1 0 auto;
}

La propiedad flex es una abreviatura de flex-grow, flex-shrink y flex-basis.

Puedes expandir el ejemplo anterior de la siguiente manera:

.my-element div {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
}

Los desarrolladores proporcionan estas reglas de bajo nivel para sugerir a un

navegador cómo debe comportarse el diseño cuando se enfrenta a las
dimensiones del contenido y del viewport. Esto lo convierte en un mecanismo
muy útil para el diseño web adaptable.

Cuadrícula

.my-element {
display: grid;
}

La cuadrícula es similar en muchas formas a flexbox, pero está diseñada

para controlar diseños de varios ejes en lugar de diseños de un solo eje
(espacio horizontal o vertical).

La cuadrícula te permite escribir reglas de diseño en un elemento que

tenga display: grid y presenta algunas primitivas nuevas para definir el diseño,
como las funciones repeat() y minmax(). Una unidad de cuadrícula útil es la
unidad fr, que es una fracción del espacio restante. Puedes compilar
cuadrículas tradicionales de 12 columnas, con un espacio entre cada
elemento, con 3 propiedades CSS:

.my-element {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
En el ejemplo anterior, se muestra un diseño de un solo eje. Mientras que
Flexbox trata principalmente a los elementos como un grupo, la cuadrícula te
brinda un control preciso sobre su ubicación en dos dimensiones. Podríamos
definir que el primer elemento de esta cuadrícula ocupa 2 filas y 3 columnas:

.my-element :first-child {
grid-row: 1/3;
grid-column: 1/4;
}

Las propiedades grid-row y grid-column le indican al primer elemento de la

cuadrícula que se extienda hasta el inicio de la cuarta columna, desde la
primera columna y, luego, hasta la tercera fila, desde la primera fila.

Diseño de flujo

Si no usas la cuadrícula o flexbox, tus elementos se muestran en el flujo

normal. Hay una serie de métodos de diseño que puedes usar para ajustar el
comportamiento y la posición de los elementos cuando están en flujo normal.

Bloqueo intercalado

¿Recuerdas que los elementos circundantes no respetan el margen y el

padding del bloque en un elemento intercalado? Con inline-
block, puedes hacer que eso suceda.

p span {
display: inline-block;
}

Cuando usas inline-block, aparece un cuadro que tiene algunas de las

características de un elemento a nivel de bloque, pero que fluye de manera
intercalada con el texto.

p span {
margin-top: 0.5rem;
}

Anuncio flotante

Si tienes una imagen dentro de un párrafo de texto, ¿no sería útil que el texto
envolviera la imagen como la ves en un periódico? Puedes hacerlo con
números de punto flotante.

img {
float: left;
 margin-right: 1em;
}

La propiedad float le indica a un elemento que “flota” en la dirección

especificada. Se indica que la imagen de este ejemplo flote hacia la izquierda,
lo que permite que los elementos del mismo nivel "se unan" a su alrededor.
Puedes indicarle a un elemento que flote left, right o inherit.

Advertencia: Cuando uses float, ten en cuenta que es posible que se ajuste el
diseño de cualquier elemento que siga al elemento flotante. Para evitar esto, puedes
borrar el número de punto flotante, ya sea usando clear: both en un elemento que
siga al elemento flotante o con display: flow-root en el elemento superior de tus
elementos flotantes. Obtén más información en el artículo The end of the clearfix
hack.

Diseño de varias columnas

Si tienes una lista de elementos muy larga, como una lista de todos los países
del mundo, puede provocar que el usuario se desplace mucho y desperdicie
tiempo. También puede crear un espacio en blanco excesivo en la página.
Con las columnas múltiples de CSS, puedes dividir esto en varias columnas
para resolver ambos problemas.

<h1>All countries</h1>
<ul class="countries">
<li>Argentina</li>
<li>Aland Islands</li>
<li>Albania</li>
<li>Algeria</li>
<li>American Samoa</li>
<li>Andorra</li>
…
</ul>

.countries {
column-count: 2;
column-gap: 1em;
}

Esto divide automáticamente esa lista larga en dos columnas y agrega un

espacio entre las dos columnas.

.countries {
width: 100%;
column-width: 260px;
column-gap: 1em;
}

En lugar de configurar la cantidad de columnas en las que se divide el

contenido, también puedes definir un ancho mínimo deseado
mediante column-width. A medida que haya más espacio disponible en el
viewport, se crearán más columnas automáticamente y, a medida que se
reduzca el espacio, también se reducirán las columnas. Esto es muy útil en
contextos de diseño web adaptable.

Posicionamiento

El último de esta descripción general de los mecanismos de diseño es el

posicionamiento. La propiedad position cambia el comportamiento de un
elemento en el flujo normal del documento y la forma en que se relaciona con
otros elementos. Las opciones disponibles son relative, absolute, fixed y sticky,
y el valor predeterminado es static.

.my-element {
position: relative;
top: 10px;
}

Este elemento se desplaza 10 px hacia abajo en función de su posición actual

en el documento, ya que se posiciona respecto de sí mismo. Agregar position:
relative a un elemento también lo convierte en el bloque contenedor de
cualquier elemento secundario con position: absolute. Esto significa que su
elemento secundario ahora se reposicionará a este elemento en particular, en
lugar del elemento superior relativo superior, cuando tenga una posición
absoluta aplicada.

.my-element {
position: relative;
width: 100px;
height: 100px;
}

.another-element {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
}

Cuando configuras position como absolute, se divide el elemento del flujo de

documentos actual. Esto significa dos cosas:
 1. Puedes posicionar este elemento donde quieras, con top, right, bottom y left en
su elemento superior relativo más cercano.
2. Todo el contenido que rodea a un elemento absoluto se reprocesa para llenar
el espacio restante que deja ese elemento.

Un elemento con un valor position de fixed se comporta de una manera similar

a absolute, y su elemento superior es el elemento raíz <html>. Los elementos
de posición fija permanecen anclados desde la parte superior izquierda según
los valores top, right, bottom y left que establezcas.

Puedes lograr los aspectos fijos y fijos de fixed y los aspectos más predecibles
de respetar el flujo de documentos de relative mediante sticky. Con este valor,
a medida que el viewport se desplaza más allá del elemento, permanece
anclado a los valores top, right, bottom y left que establezcas.

Conclusión
El diseño CSS ofrece muchas opciones y flexibilidad. Para conocer más sobre
la potencia de Flexbox y Grid de CSS, continúa con los siguientes módulos.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre diseño

¿Cuáles son las 2 cosas que hace la propiedad display?

Determina el marco de diseño de cuadrícula.

Determina cómo deben comportarse los elementos secundarios.
Determina si el cuadro debe desplazarse.
Determina inline, block o none.

Para fluir varios párrafos en columnas, ¿qué propiedad de CSS es la mejor

para esta tarea?

display: flex

display: grid

column-count

float

¿Qué significa si un bloque está fuera del flujo?

Se le dio un valor de posición top o left.

Ya no está posicionado en función de las posiciones del mismo nivel.
Está atascada a la orilla del río.

¿Flexbox y Grid unen sus elementos secundarios de forma predeterminada?

Falso
Verdadero
¿Te resultó útil?
Caja flexible
bookmark_border
El podcast de CSS - 010: Flexbox

Un patrón de diseño que puede ser complicado en un diseño responsivo es

una barra lateral intercalada con algún contenido. Donde hay espacio de
viewport, este patrón funciona muy bien, pero cuando el espacio se condensa,
ese diseño rígido puede convertirse en un problema.

El modelo de diseño de cuadro flexible (flexbox) es un modelo de diseño

diseñado para contenido unidimensional. Se destaca por tomar muchos
elementos de diferentes tamaños y mostrar el mejor diseño para esos
elementos.

Este es el modelo de diseño ideal para este patrón de barra lateral. Flexbox
no solo ayuda a ubicar la barra lateral y el contenido intercalados, sino que,
cuando no hay suficiente espacio restante, la barra lateral se abrirá en una
línea nueva. En lugar de establecer dimensiones rígidas para que el
navegador las siga, con flexbox, puedes proporcionar límites flexibles para
sugerir cómo podría mostrarse el contenido.

¿Qué puedes hacer con un diseño flexible?

Los diseños flexibles tienen las siguientes características, que podrás explorar
en esta guía.

 Se pueden mostrar como una fila o una columna.

 Respetan el modo de escritura del documento.
 De forma predeterminada, son una sola línea, pero se le puede pedir que se
ajusten a varias líneas.
 Los elementos del diseño se pueden reordenar visualmente, lejos de su orden
en el DOM.
 El espacio se puede distribuir dentro de los elementos, por lo que se hacen
más grandes y pequeños según el espacio disponible en su elemento superior.
 El espacio se puede distribuir entre los elementos y las líneas flexibles en un
diseño unido mediante las propiedades de alineación de cuadros.
 Los elementos en sí se pueden alinear en el eje cruzado.

El eje principal y el eje cruzado

La clave para entender flexbox es entender el concepto de un eje principal y

un eje cruzado. El eje principal es el que establece tu propiedad flex-direction.
Si es row, el eje principal está a lo largo de la fila; si es column, el eje principal
está junto a la columna.
Los elementos flexibles se mueven como un grupo en el eje principal.
Recuerden: tenemos un montón de elementos y estamos tratando de obtener
el mejor diseño para ellos como grupo.

El eje cruzado se ejecuta en la dirección opuesta al eje principal, por lo que,

si flex-direction es row, el eje cruzado se ejecuta a lo largo de la columna.

Puedes realizar dos acciones en el eje cruzado. Puedes mover los elementos
de forma individual o como grupo para que se alineen entre sí y con el
contenedor flexible. Además, si uniste líneas flexibles, puedes tratarlas como
un grupo para controlar cómo se les asigna el espacio. En esta guía, verás
cómo funciona todo esto en la práctica. Por ahora, solo ten en cuenta que el
eje principal sigue tu flex-direction.
Crea un contenedor flexible

Veamos cómo se comporta flexbox tomando un grupo de elementos de

diferentes tamaños y usando flexbox para distribuirlos.

<div class="container" id="container">

<div>One</div>
<div>Item two</div>
<div>The item we will refer to as three</div>
</div>

Para usar Flexbox, debes declarar que deseas usar un contexto de formato
flexible y no un bloque normal ni un diseño intercalado. Para ello, cambia el
valor de la propiedad display a flex.

.container {
display: flex;
}

Como aprendiste en la guía de diseño, esto te proporcionará una caja a nivel

de bloque, con elementos secundarios flexibles. Los elementos flexibles
comienzan a mostrar de inmediato algún comportamiento de flexbox,
mediante sus valores iniciales.
Nota: Todas las propiedades de CSS tienen valores iniciales que controlan el
comportamiento inmediato cuando no aplicas ninguna CSS para cambiar ese
comportamiento inicial. Los elementos secundarios de nuestro contenedor flexible se
convierten en elementos flexibles en cuanto su elemento superior obtiene display:
flex, por lo que estos valores iniciales significan que comenzaremos a ver algún
comportamiento de flexbox.

Los valores iniciales significan lo siguiente:

 Los artículos se muestran como una fila.

 No se unen.
 No crecen para llenar el contenedor.
 Se alinean al comienzo del contenedor.

Controlar la dirección de los elementos

Aunque aún no hayas agregado una propiedad flex-direction, los elementos se

muestran como una fila porque el valor inicial de flex-direction es row. Si
quieres una fila, no necesitas agregar la propiedad. Para cambiar la dirección,
agrega la propiedad y uno de los cuatro valores:

 row: Los elementos se disponen como una fila.

 Con row-reverse:, los elementos se disponen como una fila desde el final del
contenedor flexible.
  column: Los elementos se disponen como una columna.

 column-reverse : Los elementos se disponen como una columna desde el final

del contenedor flexible.

Puedes probar todos los valores con nuestro grupo de elementos en la

siguiente demostración.

Cómo revertir el flujo de elementos y la accesibilidad

Debes tener cuidado cuando uses cualquier propiedad que reordene la

presentación visual en lugar del orden de los elementos en el documento
HTML, ya que puede afectar la accesibilidad de forma negativa. Los
valores row-reverse y column-reverse son un buen ejemplo de esto. El
reordenamiento solo ocurre para el orden visual, no el lógico. Es importante
comprender esto, ya que el orden lógico es el orden en que un lector de
pantalla leerá el contenido, y lo seguirá cualquier persona que navegue con el
teclado.

En el siguiente video, puedes ver cómo en un diseño de fila invertida se

desconecta el tabulador entre vínculos a medida que la navegación con el
teclado sigue el DOM, no la pantalla visual.

Cualquier cosa que pueda cambiar el orden de los elementos en flexbox o en

la cuadrícula puede causar este problema. Por lo tanto, cualquier
reordenamiento debe incluir pruebas exhaustivas que verifiquen que no
dificultará el uso del sitio para algunas personas.

Para obtener más información, consulta:

 Reordenamiento de contenido
 Desconexión de Flexbox y de la navegación con el teclado

Modos y dirección de escritura

Los elementos flexibles se muestran como una fila de forma predeterminada.

Una fila se ejecuta en la dirección en la que las oraciones fluyen en el modo
de escritura y la dirección de la secuencia de comandos. Esto significa que, si
trabajas en árabe, que tiene una dirección de secuencia de comandos de
derecha a izquierda (rtl), los elementos se alinearán a la derecha. El orden de
tabulación también empezaría a la derecha, ya que esta es la forma en que
las oraciones se leen en árabe.

Si trabajas con un modo de escritura vertical, como algunos tipos de letra

japoneses, se ejecutará una fila verticalmente, de arriba abajo. Intenta
cambiar flex-direction en esta demostración, que usa un modo de escritura
vertical.

Por lo tanto, el comportamiento predeterminado de los elementos flexibles

está vinculado al modo de escritura del documento. La mayoría de los
instructivos se escriben en inglés o en otro modo de escritura horizontal, de
izquierda a derecha. Esto haría que sea fácil suponer que los elementos
flexibles se alinean a la izquierda y se ejecutan horizontalmente.

Teniendo en cuenta el eje principal y el cruzado, además del modo de

escritura, podría ser más fácil entender que hablemos de start y end en
lugar de superior, inferior, izquierdo y derecho en Flexbox. Cada eje tiene un
inicio y un final. El inicio del eje principal se conoce como inicio principal. Así
que nuestros artículos flexibles se alinean inicialmente desde el principio. El
final de ese eje es main-end. El inicio del eje cruzado es cross-start y el
final cross-end.

Cómo unir elementos flexibles

El valor inicial de la propiedad flex-wrap es nowrap. Esto significa que, si no hay

suficiente espacio en el contenedor, los elementos se desbordarán.

Una vez
que alcancen el tamaño mínimo de contenido, los elementos flexibles comenzarán a
desbordarse del contenedor.
Los elementos que se muestran con los valores iniciales se reducirán lo más
pequeños posible, hasta el tamaño min-content antes de que se produzca el
desbordamiento.

Para hacer que los elementos unan, agrega flex-wrap: wrap al contenedor
flexible.

.container {
display: flex;
flex-wrap: wrap;
}

Cuando un contenedor flexible se une, crea varias líneas flexibles. En

términos de distribución del espacio, cada línea actúa como un nuevo
contenedor flexible. Por lo tanto, si unes filas, no es posible obtener algo en la
fila 2 que se alinee con algo superior en la fila 1. Esto es lo que significa que
Flexbox sea unidimensional. Puedes controlar la alineación en un eje, una fila
o una columna, no ambos juntos como lo hacemos en la cuadrícula.

La abreviatura del flujo flexible

Puedes configurar las propiedades flex-direction y flex-wrap con la

abreviatura flex-flow. Por ejemplo, para establecer flex-direction en column y
permitir que los elementos se unan:

.container {
display: flex;
flex-flow: column wrap;
}

Cómo controlar el espacio en elementos flexibles

Si suponemos que nuestro contenedor tiene más espacio del necesario para
mostrar los elementos, estos se alinean al principio y no crecen para llenar el
espacio. Dejan de crecer al máximo de contenido. Esto se debe a que el valor
inicial de las propiedades de flex- es el siguiente:

 flex-grow: 0: Los elementos no crecen.

 flex-shrink: 1: Los elementos pueden reducirse a un tamaño más pequeño que

su flex-basis.
 flex-basis: auto: Los elementos tienen un tamaño base de auto.

Esto se puede representar con un valor de palabra clave de flex: initial. La

propiedad abreviada flex o las combinaciones de teclas de flex-grow, flex-
shrink y flex-basis se aplican a los elementos secundarios del contenedor
flexible.
Para hacer que los elementos crezcan, y permitir que los elementos grandes
tengan más espacio que los pequeños, usa flex:auto. Puedes probar esto con
la demostración anterior. Esto establece las propiedades de la siguiente
manera:

 flex-grow: 1: Los elementos pueden ser más grandes que su flex-basis.

 flex-shrink: 1: Los elementos pueden reducirse a un tamaño más pequeño que

su flex-basis.
 flex-basis: auto: Los elementos tienen un tamaño base de auto.

Usar flex: auto implicará que los elementos terminen en diferentes tamaños,
ya que el espacio compartido entre los elementos se comparte después de
que cada uno se presenta como tamaño máximo de contenido. Por lo tanto,
un elemento grande ganará más espacio. Para forzar que todos los elementos
tengan un tamaño coherente e ignorar el tamaño del contenido,
cambia flex:auto a flex: 1 en la demostración.

Esta acción se desempaqueta en:

 flex-grow: 1: Los elementos pueden ser más grandes que su flex-basis.

 flex-shrink: 1: Los elementos pueden reducirse a un tamaño más pequeño que

su flex-basis.
 flex-basis: 0: Los elementos tienen un tamaño base de 0.

El uso de flex: 1 indica que todos los elementos tienen tamaño cero, por lo que
todo el espacio en el contenedor flexible está disponible para distribuirse.
Como todos los elementos tienen un factor flex-grow de 1, todos crecen por
igual y el espacio se comparte por igual.

Nota: También hay un valor de flex: none, que te proporcionará elementos flexibles
inflexibles que no aumentan ni se reducen. Esto podría ser útil si solo usas flexbox
para acceder a las propiedades de alineación, pero no deseas ningún
comportamiento flexible.

Permite que los elementos crezcan a diferentes velocidades.

No debes asignar a todos los elementos un factor flex-grow de 1. Podrías

asignar diferentes factores flex-grow a tus elementos flexibles. En la
demostración que aparece a continuación, el primer elemento tiene flex: 1, el
segundo flex: 2 y el tercero flex: 3. A medida que estos elementos aumentan a
partir de 0, el espacio disponible en el contenedor flexible se comparte en
seis. Se le da una parte al primer elemento, dos partes al segundo y tres
partes al tercero.

Puedes hacer lo mismo desde un flex-basis de auto, aunque deberás

especificar los tres valores. El primer valor es flex-grow, el segundo flex-
shrink y el tercer valor flex-basis.
.item1 {
flex: 1 1 auto;
}

.item2 {
flex: 2 1 auto;
}

Este es un caso de uso menos común, ya que el motivo para usar un flex-
basis de auto es permitir que el navegador determine la distribución del
espacio. Si quisieras hacer que un elemento crezca un poco más de lo que
decide el algoritmo, podría ser útil.

Reordenando elementos flexibles

Los elementos del contenedor flexible se pueden reordenar con la

propiedad order. Esta propiedad permite ordenar los elementos en grupos
ordinales. Los elementos se disponen en la dirección dictada por flex-
direction, primero los valores más bajos. Si más de un artículo tiene el mismo
valor, se mostrará junto con los demás que tengan ese valor.

En el siguiente ejemplo se demuestra este orden.

Advertencia: El uso de order tiene los mismos problemas que los valores row-
reverse y column-reverse de flex-direction. Sería muy fácil crear una experiencia
desconectada para algunos usuarios. No uses order porque estás reparando
elementos desordenados en el documento. Si lógicamente los elementos deberían
estar en un orden diferente, cambia tu HTML.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre Flexbox

El valor predeterminado de flex-direction es

column

row

De forma predeterminada, un contenedor flexible une los elementos

secundarios.

false
true

Un elemento secundario de Flex aparece aplastado, ¿qué propiedad de Flex

ayuda a mitigarlo?

flex-grow
flex-basis

flex-shrink

Descripción general de la alineación de Flexbox

Flexbox incorporó un conjunto de propiedades para alinear elementos y

distribuir espacio entre ellos. Estas propiedades fueron tan útiles que se
trasladaron desde entonces a su propia especificación que también las
encontrarás en Grid Layout. Aquí puedes ver cómo funcionan cuando usas
Flexbox.

El conjunto de propiedades se puede ubicar en dos grupos. Propiedades de la

distribución del espacio y propiedades de la alineación. Las propiedades que
distribuyen el espacio son las siguientes:

 justify-content: Distribución de espacios en el eje principal

 align-content: La distribución del espacio en el eje cruzado.

 place-content: Es una abreviatura para configurar las dos propiedades

anteriores.

Estas son las propiedades que se usan para la alineación en flexbox:

 align-self: Alinea un solo elemento en el eje cruzado.

 align-items: Alinea todos los elementos como un grupo en el eje cruzado.

Si estás trabajando en el eje principal, las propiedades comienzan con justify-.

En el eje cruzado, comienzan con align-.

Distribución del espacio en el eje principal

Con el HTML que se usó antes, los elementos flexibles dispuestos en fila, hay
espacio en el eje principal. Los elementos no son lo suficientemente grandes
como para llenar el contenedor flexible por completo. Los elementos se
alinean al comienzo del contenedor flexible porque el valor inicial de justify-
content es flex-start. Los elementos se alinean al principio y cualquier espacio
adicional está al final.

Agrega la propiedad justify-content al contenedor flexible y asígnale un valor

de flex-end. Los elementos se alinearán al final del contenedor y el espacio
libre se colocará en el comienzo.

.container {
display: flex;
justify-content: flex-end;
}

También puedes distribuir el espacio entre los elementos con justify-content:

space-between.
Prueba algunos de los valores de la demostración y consulta MDN para ver el
conjunto completo de valores posibles.
Nota: Para que la propiedad justify-content realice cualquier acción, debes tener
espacio libre en el contenedor del eje principal. Si tus elementos ocupan el eje, no
hay espacio para compartir, por lo que la propiedad no hará nada.

Con flex-direction: column

Si cambiaste tu flex-direction a column, justify-content funcionará en la columna.

Para tener espacio libre en el contenedor cuando trabajas como columna,
debes otorgarle un height o block-size. De lo contrario, no tendrás espacio libre
para distribuir.

Prueba los diferentes valores, esta vez con un diseño de columnas de flexbox.

Distribución del espacio entre las líneas flexibles

Con un contenedor flexible unido, es posible que haya espacio para distribuir
en el eje cruzado. En este caso, puedes usar la propiedad align-content con los
mismos valores que justify-content. A diferencia de justify-content, que alinea
los elementos con flex-start de forma predeterminada, el valor inicial de align-
content es stretch. Agrega la propiedad align-content al contenedor flexible para
cambiar ese comportamiento predeterminado.

.container {
align-content: center;
}

Pruébalo en la demostración. El ejemplo tiene líneas unidas de elementos

flexibles y el contenedor tiene un block-size para que tengamos espacio libre.

La abreviatura place-content

Para configurar justify-content y align-content, puedes usar place-content con

uno o dos valores. Se usará un solo valor para ambos ejes, si especificas que
se usará el primero para align-content y el segundo para justify-content.

.container {
place-content: space-between;
/* sets both to space-between */
}

.container {
place-content: center flex-end;
/* wrapped lines on the cross axis are centered,
on the main axis items are aligned to the end of the flex container */
}
Alinear elementos en el eje cruzado

En el eje cruzado también puedes alinear tus elementos dentro de la línea

flexible mediante align-items y align-self. El espacio disponible para esta
alineación dependerá de la altura del contenedor flexible, o de la línea flexible
en el caso de un conjunto de elementos unido.

El valor inicial de align-self es stretch, por lo que los elementos flexibles en una
fila se extienden hasta la altura del elemento más alto de forma
predeterminada. Para cambiar esto, agrega la propiedad align-self a cualquiera
de tus elementos flexibles.

.container {
display: flex;
}

.item1 {
align-self: flex-start;
}

Usa cualquiera de los siguientes valores para alinear el elemento:

 flex-start

 flex-end

 center

 stretch

 baseline

Consulta la lista completa de valores en MDN.

La siguiente demostración tiene una sola línea de elementos flexibles con flex-
direction: row. El último elemento define la altura del contenedor flexible. El
primer elemento tiene la propiedad align-self con un valor de flex-start. Intenta
cambiar el valor de esa propiedad para ver cómo se mueve dentro de su
espacio en el eje cruzado.

La propiedad align-self se aplica a elementos individuales. La propiedad align-

items se puede aplicar al contenedor flexible para establecer todas las
propiedades individuales align-self como un grupo.

.container {
display: flex;
align-items: flex-start;
}
En la siguiente demostración, intenta cambiar el valor de align-items para
alinear todos los elementos del eje cruzado como un grupo.

¿Por qué no hay justificado en Flexbox?

Los elementos flexibles actúan como un grupo en el eje principal. Por lo tanto,
no hay el concepto de dividir un elemento individual de ese grupo.

En el diseño de cuadrícula, las propiedades justify-self y justify-items funcionan

en el eje intercalado para alinear los elementos en ese eje dentro de su área
de cuadrícula. Debido a la forma en que los diseños flexibles tratan los
elementos como un grupo, estas propiedades no se implementan en un
contexto flexible.

Vale la pena saber que Flexbox funciona muy bien con los márgenes
automáticos. Si necesitas dividir un elemento de un grupo o separar el grupo
en dos, puedes aplicarle un margen. En el ejemplo a continuación, el último
elemento tiene un margen izquierdo de auto. El margen automático absorbe
todo el espacio en la dirección en la que se aplica. Esto significa que envía el
elemento hacia la derecha y, por lo tanto, divide los grupos.

Cómo centrar un elemento de forma vertical y horizontal

Las propiedades de alineación se pueden usar para centrar un elemento

dentro de otro cuadro. La propiedad justify-content alinea el elemento en el eje
principal, que es la fila. La propiedad align-items en el eje cruzado.

.container {
width: 400px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}

Nota: En el futuro, es posible que podamos realizar esta alineación sin necesidad de
hacer que el elemento superior sea un contenedor flexible. Las propiedades de
alineación se especifican para el diseño intercalado y en bloque. En este momento,
ningún navegador las implementó. Sin embargo, cambiar a un contexto de formato
flexible te brinda acceso a las propiedades. Si necesitas alinear algo, es una
excelente manera de hacerlo.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre Flexbox

.container {
display: flex;
direction: ltr;
}

Para alinear verticalmente con flexbox, usa

alinear palabras clave

justificar palabras clave

.container {
display: flex;
direction: ltr;
}

Para alinearlo horizontalmente con Flexbox, usa

justificar palabras clave

alinear palabras clave

.container {
display: flex;
direction: ltr;
}

De forma predeterminada, los elementos flexibles se alinean con stretch. Si

quieres que el tamaño del contenido se use para elementos secundarios,
¿cuál de los siguientes estilos usarías?

justify-content: flex-start

height: auto

align-items: flex-start

align-content: start

Recursos
 El diseño de cuadro flexible de MDN CSS incluye una serie de guías detalladas
con ejemplos.
 Guía de trucos de CSS para Flexbox
 Qué sucede cuando se crea un contenedor flexible de Flexbox
 Todo lo que necesitas saber sobre la alineación en Flexbox
 ¿Qué tan grande es esa caja flexible?
 Casos de uso de Flexbox
 Cómo inspeccionar y depurar diseños de Flexbox de CSS en las Herramientas
para desarrolladores de Chrome
Grid
bookmark_border
El podcast de CSS - 011: Grid

Un diseño muy común en el diseño web es el diseño de encabezado, barra

lateral, cuerpo y pie de página.

A lo largo de los años, ha habido muchos métodos para resolver este diseño,
pero con la cuadrícula de CSS, no solo es relativamente sencillo, sino que
tienes muchas opciones. La cuadrícula es excepcionalmente útil para
combinar el control que proporciona el tamaño extrínseco con la flexibilidad
del tamaño intrínseco, lo que lo hace ideal para este tipo de diseño. Esto se
debe a que la cuadrícula es un método de diseño diseñado para contenido
bidimensional. Es decir, dispones elementos en filas y columnas al mismo
tiempo.

Al crear un diseño de cuadrícula, debes definir una cuadrícula con filas y

columnas. A continuación, colocas los elementos en esa cuadrícula o permites
que el navegador los ubique automáticamente en las celdas que creaste. Hay
muchas cuadrículas, pero con una visión general de lo que está disponible,
crearás diseños de cuadrícula en muy poco tiempo.

Descripción general

Entonces, ¿qué puedes hacer con la cuadrícula? Los diseños de cuadrícula

tienen las siguientes características. Aprenderás sobre todos ellos en esta
guía.

1. Una cuadrícula se puede definir con filas y columnas. Puedes elegir cómo
ajustar el tamaño de los seguimientos de filas y columnas o reaccionar al
tamaño del contenido.
2. Los elementos secundarios directos del contenedor de cuadrícula se
posicionarán automáticamente en esta cuadrícula.
3. O bien, puedes colocar los elementos en la ubicación exacta que desees.
4. Se puede asignar un nombre a las líneas y áreas de la cuadrícula para facilitar
su ubicación.
5. El espacio libre en el contenedor de cuadrículas se puede distribuir entre los
segmentos.
6. Los elementos de cuadrícula se pueden alinear dentro de su área.

Terminología de cuadrícula

La cuadrícula incluye muchos términos nuevos, ya que es la primera vez que

CSS tiene un sistema de diseño real.

Líneas de cuadrícula

Una cuadrícula se compone de líneas que se ejecutan horizontal y

verticalmente. Si tu cuadrícula tiene cuatro columnas, tendrá cinco líneas de
columna, incluida la que está después de la última columna.

Las líneas se numeran a partir del 1, con la numeración que sigue el modo de
escritura y la dirección de la secuencia de comandos del componente. Esto
significa que la línea de columna 1 estará a la izquierda en un idioma de
izquierda a derecha, como el inglés, y a la derecha, en un idioma de derecha
a izquierda, como el árabe.
Pistas de cuadrícula

Un recorrido es el espacio entre dos líneas de la cuadrícula. Un seguimiento

de fila está entre dos líneas de fila y un seguimiento de columnas entre dos
líneas de columna. Cuando creamos la cuadrícula, creamos estas pistas
asignándoles un tamaño.
Celda de cuadrícula

Una celda de cuadrícula es el espacio más pequeño en una cuadrícula y se

define por la intersección de los seguimientos de filas y columnas. Es como
una celda o una celda de una tabla en una hoja de cálculo. Si defines una
cuadrícula y no colocas ninguno de los elementos, se distribuirán
automáticamente un elemento en cada celda de la cuadrícula definida.
Área de cuadrícula

Varias celdas de la cuadrícula juntas. Para crear áreas de cuadrícula, se

genera un elemento que abarque varias pistas.
Vacíos

Un margen o pasaje entre las vías Para definir el tamaño, funcionan como las
pistas normales. No puedes colocar contenido en un espacio, pero puedes
abarcar elementos de la cuadrícula.
Contenedor de cuadrícula

Es el elemento HTML al que se aplicó display: grid y, por lo tanto, crea un

nuevo contexto de formato de cuadrícula para los elementos secundarios
directos.

.container {
display: grid;
}

Elemento de la cuadrícula

Un elemento de la cuadrícula es un elemento que es un elemento secundario

directo del contenedor de la cuadrícula.

<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Filas y columnas

Para crear una cuadrícula básica, puedes definir una cuadrícula con tres
seguimientos de columnas, dos seguimientos de filas y un espacio de 10
píxeles entre los segmentos, de la siguiente manera.

.container {
display: grid;
grid-template-columns: 5em 100px 30%;
grid-template-rows: 200px auto;
gap: 10px;
}

En esta cuadrícula, se muestran muchos de los elementos descritos en la

sección de terminología. Tiene tres pistas de columna. Cada pista utiliza una
unidad de longitud diferente. Tiene dos seguimientos de filas, uno con una
unidad de longitud y el otro con forma automática. Cuando se usa como pista,
el tamaño de la pista se puede considerar tan grande como el contenido. De
forma predeterminada, el tamaño de las pistas se ajusta automáticamente.

Si el elemento con una clase .container tiene elementos secundarios, se

diseñarán inmediatamente en esta cuadrícula. Puedes ver cómo funciona en
la siguiente demostración.

La superposición de la cuadrícula en las Herramientas para desarrolladores de

Chrome puede ayudarlo a comprender las distintas partes de la cuadrícula.
Abre la demostración en Chrome. Inspecciona el elemento con el fondo gris,
que tiene un ID de container. Para destacar la cuadrícula, selecciona la insignia
de la cuadrícula en el DOM, junto al elemento .container. Dentro de la pestaña
Diseño, selecciona Mostrar números de línea en el menú desplegable para
ver los números de línea en la cuadrícula.
 Una
cuadrícula destacada en las Herramientas para desarrolladores de Chrome que
muestra números de línea, celdas y seguimientos.

Palabras clave de tamaño intrínseco

Además de las dimensiones de longitud y porcentaje, como se describe en la

sección sobre unidades de tamaño, los segmentos de cuadrícula pueden usar
palabras clave intrínsecas de tamaño. Estas palabras clave se definen en la
especificación de tamaño de cuadros y agregan métodos adicionales para
ajustar el tamaño de los cuadros en CSS, no solo en los segmentos de la
cuadrícula.
 min-content
 max-content
 fit-content()

La palabra clave min-content hará que la pista sea lo más pequeña posible sin
desbordar su contenido. Cambiar el diseño de cuadrícula de ejemplo para que
tenga tres seguimientos de columnas con un tamaño de min-content implica
que se volverán tan angostos como la palabra más larga del segmento.
La palabra clave max-content tiene el efecto contrario. La pista será lo
suficientemente ancha para que todo el contenido se muestre en una sola
cadena larga y continua. Esto podría provocar desbordamientos, ya que la
cadena no se unirá.
La función fit-content() actúa como max-content al principio. Sin embargo, una
vez que el segmento alcanza el tamaño que pasas a la función, el contenido
comienza a ajustarse. Por lo tanto, fit-content(10em) creará una pista de menos
de 10 em, si el tamaño de max-content es menor que 10 em, pero nunca
superior a 10.

En la siguiente demostración, prueba las diferentes palabras clave de tamaño

intrínseco. Para ello, cambia el tamaño de las pistas de la cuadrícula.
Nota: En esta demostración, podrías ver que, cuando se usa el modo automático, las
columnas de la cuadrícula se estiran hasta llenar el contenedor. Las pistas con
tamaño automático se estirarán de forma predeterminada si hay espacio adicional en
el contenedor de la cuadrícula.

La unidad fr

Ya tenemos dimensiones de longitud, porcentajes y estas palabras clave

nuevas. También hay un método de tamaño especial que solo funciona en el
diseño de cuadrícula. Esta es la unidad fr, una longitud flexible que describe
una parte del espacio disponible en el contenedor de cuadrícula.

La unidad fr funciona de manera similar al uso de flex: auto en flexbox.

Distribuye el espacio después de que se han dispuesto los elementos. Por lo
tanto, para tener tres columnas que obtengan la misma parte del espacio
disponible:

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

A medida que la unidad fr comparte el espacio disponible, se puede combinar

con un intervalo de tamaño fijo o pistas de tamaño fijo. Para tener un
componente con un elemento de tamaño fijo y la segunda pista ocupa el
espacio restante, puedes usarlo como lista de pistas de grid-template-columns:
200px 1fr.

El uso de valores diferentes para la unidad fr compartirá el espacio

proporcionalmente. Los valores más altos obtienen una mayor parte del
espacio libre. En la siguiente demostración, cambia el valor de la tercera
pista.

La función minmax()

Navegadores compatibles

 57
 16
 52
 10.1

Origen
Esta función permite establecer un tamaño mínimo y uno máximo para un
segmento. Esto puede ser bastante útil. Si tomamos el ejemplo de la
unidad fr anterior que distribuye el espacio restante, se podría escribir
con minmax() como minmax(auto, 1fr). La cuadrícula analiza el tamaño
intrínseco del contenido y distribuye el espacio disponible después de darle
suficiente espacio al contenido. Esto significa que es posible que no obtengas
segmentos que tengan una parte igual de todo el espacio disponible en el
contenedor de cuadrícula.

Para forzar a un recorrido a ocupar la misma parte del espacio en el

contenedor de la cuadrícula menos los espacios, usa el mínimo.
Reemplaza 1fr como tamaño de segmento por minmax(0, 1fr). De esta manera,
el tamaño mínimo de la pista será 0 y no el tamaño mínimo del contenido.
Luego, la cuadrícula tomará todo el tamaño disponible en el contenedor,
deducirá el tamaño necesario para cualquier brecha y compartirá el resto
según tus unidades fr.

Notación repeat()

Navegadores compatibles

 57
 16
 76
 10.1

Origen

Si deseas crear una cuadrícula de seguimiento de 12 columnas con columnas

iguales, puedes usar el siguiente CSS.

.container {
display: grid;
grid-template-columns:
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr);
}

O bien, puedes escribirlo con repeat():

.container {
display: grid;
 grid-template-columns: repeat(12, minmax(0,1fr));
}

La función repeat() se puede usar para repetir cualquier sección de la ficha de

la pista. Por ejemplo, puedes repetir un patrón de pistas. También puedes
tener algunas pistas normales y una sección repetitiva.

.container {
display: grid;
grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6
tracks*/
}

auto-fill y auto-fit

Puedes combinar todo lo que aprendiste sobre el tamaño de la

pista, minmax() y repetir, para crear un patrón útil con el diseño de cuadrícula.
Quizás no desees especificar la cantidad de seguimientos de columnas, sino
que desees crear todas las que caben en tu contenedor.

Para lograrlo, usa repeat() y las palabras clave auto-fill o auto-fit. En la siguiente
demostración, la cuadrícula creará tantos seguimientos de 200 píxeles como
quepan en el contenedor. Abre la demostración en una ventana nueva y
observa cómo cambia la cuadrícula a medida que modificas el tamaño del
viewport.

En la demostración, obtenemos tantas pistas como sea posible. Sin embargo,

las pistas no son flexibles. Aparecerá un espacio al final hasta que haya
espacio suficiente para otra pista de 200 píxeles. Si agregas la
función minmax(), puedes solicitar todas las pistas que se adapten a un
tamaño mínimo de 200 píxeles y un máximo de 1 fr. Luego, la cuadrícula
distribuye los recorridos de 200 píxeles y el espacio restante se distribuye de
forma equitativa entre ellos.

Esto crea un diseño responsivo bidimensional sin necesidad de ninguna

consulta de medios.

Existe una diferencia sutil entre auto-fill y auto-fit. En la siguiente

demostración, se usará un diseño de cuadrícula con la sintaxis explicada
anteriormente, pero con solo dos elementos de cuadrícula en el contenedor
de cuadrículas. Si usas la palabra clave auto-fill, puedes ver que se crearon
pistas vacías. Si cambias la palabra clave a auto-fit, los segmentos se
contraerán y se mostrarán en 0. Esto significa que las ramas flexibles ahora
aumentan para consumir el espacio.

En cambio, las palabras clave auto-fill y auto-fit actúan exactamente de la

misma manera. No hay diferencia entre ellos una vez que se completa la
primera pista.
Colocación automática

Hasta ahora, ya viste la colocación automática de cuadrícula en las

demostraciones. Los elementos se colocan en la cuadrícula, uno por celda, en
el orden en que aparecen en la fuente. Para muchos diseños, esto podría ser
todo lo que necesitas. Si necesitas más control, hay algunas acciones que
puedes realizar. La primera es modificar el diseño de ubicación automática.

Colocar elementos en columnas

El comportamiento predeterminado del diseño de cuadrícula es colocar

elementos a lo largo de las filas. En su lugar, puedes hacer que los elementos
se coloquen en columnas mediante grid-auto-flow: column. Debes definir
seguimientos de filas, de lo contrario, los elementos crearán seguimientos de
columnas intrínsecas y los diseñarán en una sola fila larga.

Estos valores se relacionan con el modo de escritura del documento. Una fila
siempre se ejecuta en la misma dirección que una oración en el modo de
escritura del documento o componente. En la siguiente demostración, puedes
cambiar el modo del valor de grid-auto-flow y la propiedad writing-mode.

Segmentos de seguimiento

Puedes hacer que algunos o todos los elementos de un diseño de ubicación

automática abarquen más de una pista. Usa la palabra clave span más la
cantidad de líneas que se abarcarán como un valor para grid-column-end o grid-
row-end.

.item {
grid-column-end: span 2; /* will span two lines, therefore covering two
tracks */
}

Como no especificaste un grid-column-start, se usa el valor inicial de auto y se

coloca de acuerdo con las reglas de posición automática. También puedes
especificar lo mismo con la abreviatura grid-column:

.item {
grid-column: auto / span 2;
}

Llena los vacíos

Un diseño de ubicación automática con algunos elementos que abarcan varios

segmentos puede generar una cuadrícula con algunas celdas sin completar. El
comportamiento predeterminado del diseño de cuadrícula con un diseño
colocado de forma automática es avanzar siempre. Los elementos se
colocarán según el orden en el que se encuentren en la fuente o cualquier
modificación con la propiedad order. Si no hay suficiente espacio para que
quepa un elemento, la cuadrícula dejará un espacio y pasará a la siguiente
pista.

En la siguiente demostración, se muestra este comportamiento. La casilla de

verificación aplicará el modo de empaquetado denso. Para ello, se le asigna
a grid-auto-flow un valor de dense. Con este valor establecido, la cuadrícula
tomará elementos más adelante en el diseño y los usará para llenar los
espacios. Esto puede significar que la pantalla se desconecta del orden lógico.

Colocación de elementos

Ya tienes muchas funcionalidades de la cuadrícula de CSS. Ahora, veamos

cómo posicionamos los elementos en la cuadrícula que creamos.

Lo primero que hay que recordar es que el diseño de cuadrícula de CSS se

basa en una cuadrícula de líneas numeradas. La manera más sencilla de
colocar los elementos en la cuadrícula es colocarlos de una línea a otra.
Descubrirás otras formas de colocar elementos en esta guía, pero siempre
tendrás acceso a esas líneas numeradas.

Puedes usar las siguientes propiedades para ubicar elementos por número de
línea:

 grid-column-start
 grid-column-end
 grid-row-start
 grid-row-end

Tienen abreviaturas que te permiten establecer las líneas de inicio y

finalización al mismo tiempo:

 grid-column
 grid-row

Para colocar tu elemento, establece las líneas de inicio y finalización del área
de cuadrícula en la que debe colocarse.

.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 200px 100px);
}

.item {
grid-column-start: 1; /* start at column line 1 */
grid-column-end: 4; /* end at column line 4 */
grid-row-start: 2; /*start at row line 2 */
grid-row-end: 4; /* end at row line 4 */
}

Las herramientas para desarrolladores de Chrome pueden brindarle una guía

visual de las líneas que le permitirán verificar dónde se ubica su elemento.

La numeración de las líneas sigue el modo de escritura y la dirección del

componente. En la siguiente demostración, cambia el modo de escritura o la
dirección para ver cómo la posición de los elementos se mantiene coherente
con la forma en que fluye el texto.

Apilar elementos

Con el posicionamiento basado en líneas, puedes colocar elementos en la

misma celda de la cuadrícula. Esto significa que puedes apilar elementos o
hacer que un elemento se superponga parcialmente con otro. Los elementos
que aparezcan más adelante en la fuente se mostrarán sobre los elementos
anteriores. Puedes cambiar este orden de apilado con z-index al igual que con
los elementos posicionados.

Números de línea negativos

Cuando creas una cuadrícula con grid-template-rows y grid-template-columns,

creas lo que se conoce como cuadrícula explícita. Se trata de una
cuadrícula que has definido y dado tamaño a los recorridos.

En ocasiones, tendrás elementos que se mostrarán fuera de esta cuadrícula

explícita. Por ejemplo, puedes definir seguimientos de columnas y, luego,
agregar varias filas de elementos de cuadrícula sin definir los seguimientos de
filas. El tamaño de las pistas se ajustará automáticamente de forma
predeterminada. También puedes colocar un elemento con grid-column-
end que esté fuera de la cuadrícula explícita definida. En ambos casos, la
cuadrícula creará segmentos para que funcione el diseño, que se conocen
como cuadrícula implícita.

La mayoría de las veces, no hará ninguna diferencia si trabajas con una

cuadrícula implícita o explícita. Sin embargo, con las posiciones basadas en
líneas, es posible que encuentres la principal diferencia entre ambas.

Con números de línea negativos, puedes colocar elementos desde la línea

final de la cuadrícula explícita. Esto puede ser útil si deseas que un elemento
abarque desde la primera hasta la última línea de la columna. En ese caso,
puedes usar grid-column: 1 / -1. El elemento se estirará a la derecha de la
cuadrícula explícita.

Sin embargo, esto solo funciona para la cuadrícula explícita. Toma un diseño
de tres filas de elementos ubicados de forma automática en las que desees
que el primer elemento se extienda hasta la línea final de la cuadrícula.
Tal vez creas que puedes asignar grid-row: 1 / -1 a ese elemento. En la
siguiente demostración, verás que esto no funciona. Los segmentos se crean
en la cuadrícula implícita; no hay forma de llegar al final de la cuadrícula
mediante -1.

Cómo ajustar el tamaño de las pistas implícitas

El tamaño de los segmentos creados en la cuadrícula implícita se ajustará

automáticamente de forma predeterminada. Sin embargo, si deseas controlar
el tamaño de las filas, usa la propiedad grid-auto-rows y para las columnas grid-
auto-columns.

Para crear todas las filas implícitas con un tamaño mínimo de 10em y uno
máximo de auto, haz lo siguiente:

.container {
display: grid;
grid-auto-rows: minmax(10em, auto);
}

Para crear columnas implícitas con un patrón de 100 px y 200 px de ancho En

este caso, la primera columna implícita será de 100 px, la segunda de 200 px,
la tercera será de 100 px, y así sucesivamente.

.container {
display: grid;
grid-auto-columns: 100px 200px;
}

Líneas de cuadrícula con nombre

Puede facilitar la colocación de elementos en un diseño si las líneas tienen un

nombre en lugar de un número. Puedes nombrar cualquier línea de la
cuadrícula agregando el nombre que prefieras entre corchetes. Se pueden
agregar varios nombres, separados por un espacio dentro de los mismos
corchetes. Una vez que nombras las líneas, puedes usarlas en lugar de
números.

.container {
display: grid;
grid-template-columns:
[main-start aside-start] 1fr
[aside-end content-start] 2fr
[content-end main-end]; /* a two column layout */
}

.sidebar {
grid-column: aside-start / aside-end;
/* placed between line 1 and 2*/
}

footer {
grid-column: main-start / main-end;
/* right across the layout from line 1 to line 3*/
}

Áreas de plantilla de cuadrícula

También puedes nombrar áreas de la cuadrícula y colocar elementos en esas

áreas con nombre. Esta es una técnica encantadora, ya que te permite ver
cómo se ve tu componente directamente en CSS.

Para comenzar, asigna un nombre a los elementos secundarios directos del

contenedor de cuadrícula con la propiedad grid-area:
header {
grid-area: header;
}

.sidebar {
grid-area: sidebar;
}

.content {
grid-area: content;
}

footer {
grid-area: footer;
}

Puedes elegir el nombre que desees, excepto las palabras clave auto y span.
Una vez que tengan un nombre para todos los elementos, usa la
propiedad grid-template-areas para definir qué celdas de la cuadrícula abarcará
cada uno. Cada fila se define entre comillas.
.container {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-areas:
"header header header header"
"sidebar content content content"
"sidebar footer footer footer";
}

Hay algunas reglas cuando se usa grid-template-areas.

 El valor debe ser una cuadrícula completa sin celdas vacías.

 Para abarcar las pistas, repite el nombre.
 Las áreas creadas al repetir el nombre deben ser rectangulares y no se
pueden desconectar.

Si infringes cualquiera de las reglas anteriores, el valor se considera no válido

y se elimina.

Para dejar espacio en blanco en la cuadrícula, usa . o múltiplos sin espacios

en blanco entre ellos. Por ejemplo, para dejar la primera celda vacía de la
cuadrícula, puedo agregar una serie de caracteres .:

.container {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-areas:
"....... header header header"
"sidebar content content content"
"sidebar footer footer footer";
}

Como todo tu diseño se define en un solo lugar, resulta sencillo redefinirlo

mediante consultas de medios. En el siguiente ejemplo, creé un diseño de dos
columnas que se mueve a tres columnas mediante la redefinición del valor
de grid-template-columns y grid-template-areas. Abre el ejemplo en una ventana
nueva para experimentar con el tamaño del viewport y ver el cambio de
diseño.

También puedes ver cómo se relaciona la propiedad grid-template-

areas con writing-mode y la dirección, al igual que con otros métodos de
cuadrícula.

Propiedades abreviadas

Existen dos propiedades abreviadas que te permiten establecer muchas de

las propiedades de la cuadrícula a la vez. Estas pueden parecer un poco
confusas hasta que analices exactamente cómo se combinan. Tú decides si
quieres usarlas o si prefieres usar atajos.

grid-template

Navegadores compatibles

 57
 16
 52
 10.1

Origen
La propiedad grid-template es una abreviatura de grid-template-rows, grid-
template-columns y grid-template-areas. Las filas se definen primero, junto con
el valor de grid-template-areas. Se agrega el tamaño de columna después de /.
.container {
display: grid;
grid-template:
"head head head" minmax(150px, auto)
"sidebar content content" auto
"sidebar footer footer" auto / 1fr 1fr 1fr;
}

grid propiedad

Navegadores compatibles

 57
 16
 52
 10.1

Origen
La abreviatura grid se puede usar exactamente de la misma manera que la
abreviatura grid-template. Cuando se use de esta manera, restablecerá las
demás propiedades de cuadrícula que acepta a sus valores iniciales. Este es
el conjunto completo:
 grid-template-rows
 grid-template-columns
 grid-template-areas
 grid-auto-rows
 grid-auto-columns
 grid-auto-flow

De forma alternativa, puedes usar esta abreviatura para definir cómo se

comporta la cuadrícula implícita, por ejemplo:

.container {
display: grid;
grid: repeat(2, 80px) / auto-flow 120px;
}

Alineación
El diseño de cuadrícula usa las mismas propiedades de alineación que
aprendiste en la guía de flexbox. En la cuadrícula, las propiedades que
comienzan con justify- siempre se usan en el eje intercalado, la dirección en la
que se ejecutan las oraciones en el modo de escritura.

Las propiedades que comienzan con align- se usan en el eje de bloque, la

dirección en la que se disponen los bloques en el modo de escritura.

 justify-content y align-content: Distribuyen espacio adicional en el contenedor

de cuadrícula alrededor de los segmentos o entre ellos.
 justify-self y align-self: Se aplican a un elemento de la cuadrícula para moverlo
dentro del área de la cuadrícula en la que se coloca.
 justify-items y align-items: se aplican al contenedor de cuadrícula para
establecer todas las propiedades justify-self en los elementos.

Distribución del espacio adicional

En esta demostración, la cuadrícula es más grande que el espacio necesario

para diseñar las pistas de ancho fijo. Esto significa que tenemos espacio tanto
en las dimensiones intercaladas como en las de bloques de la cuadrícula.
Prueba con diferentes valores de align-content y justify-content para ver cómo
se comportan los segmentos.

Observa cómo se aumentan las brechas cuando se usan valores como space-
between, y cualquier elemento de la cuadrícula que abarque dos segmentos
también crece para absorber el espacio adicional agregado a la brecha.
Nota: Al igual que con Flexbox, estas propiedades solo funcionarán si hay espacio
adicional para distribuir. Si los recorridos de tu cuadrícula llenan el contenedor de
forma prolija, no habrá espacio para compartir.

Cómo mover el contenido

Los elementos con un color de fondo parecen llenar el área de cuadrícula en

su totalidad porque el valor inicial para justify-self y align-self es stretch.

Nota: Si el elemento es una imagen o algún otro elemento con una relación de
aspecto intrínseca, el valor inicial será start en lugar de stretch para evitar estirar
elementos fuera de forma.

En la demostración, cambia los valores de justify-items y align-items para ver

cómo esto cambia el diseño. El área de la cuadrícula no cambia de tamaño,
sino que los elementos se mueven dentro del área definida.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre cuadrícula

¿Cuáles de los siguientes son términos de la cuadrícula de CSS?

Círculos
áreas
brechas
recorridos
células
trenes
líneas

main {
display: grid;
}

¿Cuál es la dirección de diseño predeterminada de una cuadrícula?

Columnas
Filas

¿Cuál es la diferencia entre auto-fit y auto-fill?

auto-fit estirará un contenedor para que se ajuste a los elementos secundarios,

mientras que auto-fill hará que los elementos secundarios quepan en el contenedor.
auto-fit estirará las celdas para que se ajusten al contenedor, mientras que auto-
fill no.

¿Qué es min-content?

La letra más pequeña

Igual que el 0%
La palabra o imagen más larga.

¿Qué es max-content?

Es la palabra más larga.

La letra más larga.
La oración más larga o la imagen más grande.

¿Qué es la ubicación automática?

Cuando cuadrícula toma los elementos secundarios y los coloca en el mejor orden
según la heurística del navegador
Cuando los elementos secundarios de la cuadrícula reciben una grid-area y se
colocan en esa celda
Cuando se colocan los elementos de cuadrícula sin asignar a continuación en una
plantilla de diseño

Recursos

En esta guía, se proporciona una descripción general de las diferentes partes

de la especificación del diseño de cuadrícula. Para obtener más información,
consulta los siguientes recursos.

 Diseño de cuadrícula de CSS de MDN

 Guía completa sobre la cuadrícula
 Cómo crear un contenedor de cuadrícula
 Cómo inspeccionar la cuadrícula de CSS en las Herramientas para
desarrolladores de Chrome
 Una colección integral de material de aprendizaje por cuadrícula
Propiedades lógicas
bookmark_border
El podcast de CSS 012: Propiedades lógicas

Un patrón de interfaz de usuario muy común es una etiqueta de texto con un

ícono intercalado complementario.

El ícono se ubica a la izquierda del texto con un pequeño espacio entre los
dos, que proporciona margin-right en el ícono. Sin embargo, hay un problema,
ya que esto solo funcionará cuando la dirección del texto sea de izquierda a
derecha. Si la dirección del texto cambia de derecha a izquierda (que es la
forma en que leen idiomas como el árabe), el ícono se posicionará contra el
texto.

¿Cómo se tiene en cuenta esto en CSS? Las propiedades lógicas te permiten

resolver estas situaciones. Entre muchos otros beneficios, ofrecen asistencia
automática y gratuita para la internacionalización. Ayudan a crear un frontend
más inclusivo y resiliente.

Terminología

Las propiedades físicas de los elementos superior, derecho, inferior e

izquierdo hacen referencia a las dimensiones físicas del viewport. Son como
una rosa de los vientos en un mapa. Las propiedades lógicas, por otro lado, se
refieren a los bordes de un cuadro, ya que se relacionan con el flujo de
contenido. Por lo tanto, pueden cambiar si se modifica la dirección del texto o
el modo de escritura. Este es un gran cambio con respecto a los estilos
direccionales y nos brinda mucha más flexibilidad a la hora de aplicar diseño a
nuestras interfaces.

Flujo de bloqueo

El flujo de bloques es la dirección en la que se colocan los bloques de

contenido. Por ejemplo, si hay dos párrafos, el flujo de bloque irá desde arriba
hacia abajo en el segundo párrafo. Piensa en esto en el contexto de párrafos
de texto uno después del otro, de arriba hacia abajo.
Flujo intercalado

El flujo intercalado es la forma en que fluye el texto en una oración. En un

documento en inglés, el flujo intercalado es de izquierda a derecha. Si
cambiaras el idioma del documento de tu página web al árabe ( <html
lang="ar">), el flujo intercalado sería de derecha a izquierda.
El texto fluye en la dirección que determina el modo de escritura del
documento. Puedes cambiar la dirección en la que se muestra el texto con la
propiedad writing-mode. Se puede aplicar a todo el documento o a elementos
individuales.

Relativo de flujo

Históricamente, en CSS, solo pudimos aplicar propiedades como el margen en

relación con la dirección de sus lados. Por ejemplo, margin-top se aplica a la
parte superior física del elemento. Con las propiedades lógicas, margin-top se
convierte en margin-block-start. Esto significa que, independientemente de la
dirección del idioma y del texto, el flujo de bloque tiene reglas de margen
adecuadas.
Tamaño

Para evitar que un elemento exceda un ancho o una altura determinados,

escribe una regla como la siguiente:

.my-element {
max-width: 150px;
max-height: 100px;
}

Los equivalentes relativos de flujo son max-inline-size y max-block-size. También

puedes usar min-block-size y min-inline-size en lugar de min-height y min-width.

Con propiedades lógicas, esa regla de ancho y altura máximos se vería de la

siguiente manera:

.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}

Inicio y fin

En lugar de usar instrucciones como las de arriba, derecha, inferior e

izquierda, usa las instrucciones de inicio y fin. Esto te proporciona un inicio de
bloque, un final intercalado, un final de bloque y un inicio intercalado. Estas te
permiten aplicar propiedades de CSS que responden a los cambios del modo
de escritura.

Por ejemplo, para alinear el texto a la derecha, puedes usar este CSS:

p {
text-align: right;
}

Si tu objetivo no es alinearte con la derecha física, sino hacia el inicio de la

dirección de lectura, esto no es útil. Con los valores lógicos, hay
valores start y end más útiles que se asignan a la dirección del texto. La regla
de alineación de texto ahora tiene el siguiente aspecto:

p {
text-align: end;
}

Espaciado y posicionamiento

Las propiedades lógicas para margin, padding y inset facilitan y optimizan los
elementos de posicionamiento y determinan cómo interactúan entre sí en los
modos de escritura. Las propiedades relacionadas con el margen y el padding
siguen siendo asignaciones directas a direcciones, pero la diferencia clave es
que cuando cambia un modo de escritura, cambian con él.

.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}

De esta manera, se agrega espacio interior vertical con padding y se lo

desplaza desde la izquierda con margin. La propiedad top también la desplaza
hacia abajo. Con equivalentes de propiedades lógicas, se vería de la siguiente
manera:

.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
De esta manera, se agrega un poco de espacio interno intercalado
con padding y se lo envía desde el inicio intercalado con margin. La
propiedad inset-block lo mueve hacia adentro desde el inicio del bloque.

La propiedad inset-block no es la única opción abreviada con propiedades

lógicas. Esta regla se puede condensar aún más con versiones abreviadas de
las propiedades de margen y padding.

.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}

Bordes

También puedes agregar border y border-radius con propiedades lógicas. Para

agregar un borde en la parte inferior y derecha, con un radio hacia la derecha,
puedes escribir una regla como esta:

.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}

O bien, puedes usar propiedades lógicas como las siguientes:

.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}

El elemento end-end en border-end-end-radius es el final del bloque y el final

intercalado.

Unidades

Las propiedades lógicas aportan dos unidades nuevas: vi y vb. Una

unidad vi es el 1% del tamaño del viewport en la dirección intercalada. El
equivalente no lógico de la propiedad es vw. La unidad vb es el 1% del
viewport en la dirección del bloque. El equivalente no lógico de la propiedad
es vh.
Estas unidades siempre se asignarán a la dirección de lectura. Por ejemplo, si
quieres que un elemento ocupe el 80% del espacio intercalado disponible de
un viewport, cuando usas la unidad vi, ese tamaño se cambiará
automáticamente de arriba abajo si el modo de escritura es vertical.

Usa propiedades lógicas de manera pragmática

Las propiedades lógicas y los modos de escritura no son solo para la

internacionalización. Puedes utilizarlas para producir una interfaz de usuario
más versátil.

Si tienes un gráfico con etiquetas en el eje X y en el eje Y, es posible que

desees que el texto de la etiqueta Y se lea verticalmente.

Debido a que la etiqueta del eje Y en la demostración tiene un writing-

mode de vertical-rl, puedes usar los mismos valores margin en ambas
etiquetas. El valor margin-block-start se aplica a ambas etiquetas porque el
inicio del bloque está a la derecha del eje Y y en la parte superior del eje X.
Los lados de inicio de bloque tienen un borde rojo para que puedas verlos.

Cómo resolver el problema con los íconos

Ahora que hemos cubierto las propiedades lógicas, este conocimiento se

puede aplicar al problema de diseño con el que empezamos.

p {
display: inline-flex;
align-items: center;
}

p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}

Se aplicó el margen a la derecha del elemento del ícono. Para que el

espaciado entre el ícono y el texto sea compatible con todas las direcciones
de lectura, se debe usar la propiedad margin-inline-end en su lugar.

p {
display: inline-flex;
align-items: center;
}

p svg {
width: 1.2em;
 height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}

Ahora, independientemente de la dirección de lectura, el ícono se posicionará

y se ubicará de forma adecuada.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre propiedades lógicas

Cuando escribes con la mano, ¿qué eje lógico se mueve la muñeca?

block

inline

Marca todos los beneficios que pueden aprovechar las propiedades lógicas.

lados de la caja
esquinas de recuadros
colores
tamaños
sombras
alignment

¿Qué lado lógico de una palabra está subrayado?

final intercalado
fin del bloque
inicio intercalado
inicio del bloque
¿Te resultó útil?
Espaciado
bookmark_border
El podcast de CSS 013: Espaciado

Supongamos que tienes un conjunto de tres cuadros, apilados uno encima del
otro, y quieres espacio entre ellos. ¿Cuántas maneras se te ocurren de hacer
eso en CSS?

La propiedad margin podría brindarte lo que necesitas, pero también podría

agregar espacios adicionales que no deseas. Por ejemplo, ¿cómo orientar solo
el espacio entre cada uno de esos elementos? En este caso, algo
como gap podría ser más apropiado. Existen muchas formas de ajustar el
espaciado dentro de una IU, cada una con sus propias fortalezas y
advertencias.

Espaciado de HTML

El mismo HTML proporciona algunos métodos para espaciar elementos. Los

elementos <br> y <hr> te permiten espaciar los elementos en la dirección del
bloque, que, si estás en un idioma basado en latín, es de arriba hacia abajo.
Si usas un elemento <br>, se creará un salto de línea, al igual que si
presionas la tecla Intro en un procesador de texto.

El elemento <hr> crea una línea horizontal con espacio a ambos lados,
conocida como margin.

Además de usar elementos HTML, las entidades HTML pueden crear espacio.
Una entidad HTML es una cadena reservada de caracteres que el navegador
reemplaza por entidades de caracteres. Por ejemplo, si escribiras &copy; en tu
archivo HTML, se convertiría en un carácter ©. La entidad &nbsp; se convierte
en un carácter de espacio de no separación, que proporciona un espacio
intercalado. Sin embargo, ten cuidado, ya que el aspecto no rotundo de este
carácter une los dos elementos, lo que puede generar un comportamiento
extraño.

Nota: Usa elementos HTML para agregar espacio solo cuando el elemento ayude a
comprender el documento. Por ejemplo, una <hr> no solo agrega espacio, sino que
crea una separación lógica de dos fragmentos de contenido. Si solo quieres una línea
con espacio a su alrededor, puede ser más apropiado agregar un borde con CSS.

Margen

Si deseas agregar espacio en el exterior de un elemento, usa la

propiedad margin. El margen es como agregar una almohadilla alrededor de tu
elemento. La propiedad margin es la abreviatura de margin-top, margin-
right, margin-bottom y margin-left.
La abreviatura margin aplica propiedades en un orden particular: arriba,
derecha, inferior e izquierda. Puede recordarlos con problemas: PROBLEMAS.
La abreviatura margin también se puede usar con uno, dos o tres valores.
Agregar un cuarto valor te permite establecer cada lado individual. Estas se
aplican de la siguiente manera:

 Se aplicará un valor en todos los lados. ( margin: 20px).

 Dos valores: el primero se aplicará a los lados superior e inferior, y el segundo
se aplicará a los lados izquierdo y derecho. ( margin: 20px 40px)
 Tres valores: el primero es top, el segundo es left y right, y el tercero es bottom.
(margin: 20px 40px 30px).

El margen se puede definir con una longitud, un porcentaje o un valor

automático, como 1em o 20%. Si usas un porcentaje, el valor se calculará
según el ancho del bloque que lo contiene.

Esto significa que, si el bloque contenedor del elemento tiene un ancho

de 250px y tu elemento tiene un valor margin de 20%, cada lado del elemento
tendrá un margen calculado de 50px.

También puedes usar un valor de auto para el margen. En el caso de los

elementos a nivel de bloque con un tamaño restringido, un
margen auto ocupará el espacio disponible en la dirección a la que se aplique.
Un buen ejemplo es este del módulo flexbox, en el que los elementos se
alejan entre sí.

Otro buen ejemplo de margen auto es un wrapper centrado horizontalmente

que tiene un ancho máximo. Este tipo de wrapper se usa a menudo para crear
una columna central coherente en un sitio web.

.wrapper {
max-width: 400px;
margin: 0 auto;
}

Aquí, el margen se quita de los lados superior e inferior (bloque),

y auto comparte el espacio entre los lados izquierdo y derecho (intercalado).

Nota: En el módulo anterior sobre propiedades lógicas, aprendiste que, en lugar de

especificar margin-top, margin-right, margin-bottom y margin-left, puedes
usar margin-block-start, margin-inline-end, margin-block-end y margin-inline-
start.

Margen negativo

Los valores negativos también se pueden utilizar para el margen. En lugar de

agregar espacio entre elementos del mismo nivel adyacentes, reducirá el
espacio entre ellos. Esto puede generar elementos superpuestos si declaras
un valor negativo mayor que el espacio disponible.

Contraer margen

La contracción de margen es un concepto complicado, pero es algo con lo que

te encontrarás muy frecuentemente cuando compiles interfaces. Supongamos
que tienes dos elementos: un encabezado y un párrafo que tienen un margen
vertical:

<article>
<h1>My heading with teal margin</h1>
<p>A paragraph of text that has blue margin on it, following the heading
with margin.</p>
</article>

h1 {
margin-bottom: 2rem;
}

p {
margin-top: 3rem;
}

A primera vista, no es posible que pienses que el párrafo tendrá un espaciado

de 5em respecto del encabezado, ya que 2rem y 3rem combinados se calculan
como 5rem. Sin embargo, debido a que el margen vertical se contrae, el
espacio en realidad es 3rem.

La contracción de margen funciona mediante la selección del valor más

grande de dos elementos adjuntos con el margen vertical establecido en los
lados contiguos. La parte inferior del h1 se une con la parte superior de la p,
por lo que se selecciona el valor más grande del margen inferior de h1 y del
margen superior de p. Si h1 tuviera un 3.5rem de margen inferior, el espacio
entre ambos sería 3.5rem porque es mayor que 3rem. Solo se contraen los
márgenes de bloqueo, no los intercalados (horizontales).

Nota: Este comportamiento se remonta a cuando la Web solo consistía en

documentos. Contraer los márgenes ayuda a establecer un espaciado coherente
entre los elementos sin crear accidentalmente grandes espacios entre los elementos
que también tienen margen definido.

La contracción de márgenes también ayuda con los elementos vacíos. Si

tienes un párrafo con un margen inferior y superior de 20px, solo
creará 20px de espacio, no 40px. Sin embargo, si se agrega algo dentro de
este elemento, incluido padding, su margen ya no se contraerá y se tratará
como cualquier cuadro con contenido.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre el colapso de los márgenes

Si dos elementos apilados uno encima del otro tienen 20 px de margen

superior y 30 px de margen inferior, ¿cuánto espacio habrá entre ellos?

30px
20px
10px
40px

Evita la contracción de los márgenes

Si usas position: absolute para colocar un elemento en una posición absoluta, el

margen ya no se contraerá. El margen tampoco se contraerá si también usas
la propiedad float.

Si tienes un elemento sin margen entre dos elementos con margen de bloque,
el margen tampoco se contraerá, porque los dos elementos con margen de
bloque ya no son elementos del mismo nivel adyacentes: solo son elementos
del mismo nivel.

En la lección de diseño, aprendiste que los contenedores de Flexbox y de

cuadrícula son muy similares a los contenedores de bloques, pero controlan
sus elementos secundarios de manera muy diferente. Este es el caso también
de la contracción del margen.

Si tomamos el ejemplo original de la lección y aplicamos flexbox con dirección

de columna, los márgenes se combinan en lugar de contraerse. Esto puede
proporcionar previsibilidad con el trabajo de diseño, que es para lo que se
diseñaron los contenedores de Flexbox y de cuadrícula.
La contracción de los márgenes y los márgenes puede ser difícil de entender,
pero es muy útil comprender en detalle cómo funcionan, por lo que te
recomendamos esta explicación detallada.
Padding

En lugar de crear espacio en el exterior del cuadro, como lo hace margin, la

propiedad padding crea espacio en el interior de la caja, como el aislamiento.

Según el modelo de caja que uses (que se analizó en la lección sobre modelos
de cajas), padding también puede afectar las dimensiones generales del
elemento.

La propiedad padding es la abreviatura de padding-top, padding-right, padding-

bottom y padding-left. Al igual que margin, padding también tiene propiedades
lógicas: padding-block-start, padding-inline-end, padding-block-end y padding-
inline-start.

Posicionamiento
También se explica en el módulo layout, si estableces un valor
para position que no sea static, puedes espaciar elementos con las
propiedades top, right, bottom y left. Existen algunas diferencias en el
comportamiento de estos valores direccionales:
 Un elemento con position: relative mantendrá su lugar en el flujo del
documento, incluso cuando configures estos valores. También estarán
relacionados con la posición de tu elemento.
 Un elemento con position: absolute basará los valores direccionales a partir de
la posición del elemento superior relativo.
 Un elemento con position: fixed basará los valores direccionales en el viewport.
 Un elemento con position: sticky solo aplicará los valores direccionales cuando
esté en su estado anclado o bloqueado.

En el módulo de propiedades lógicas, aprenderás sobre las propiedades inset-

block y inset-inline, que te permiten establecer valores direccionales que
respetan el modo de escritura.
Ambas propiedades son abreviaturas que combinan los valores start y end y,
por lo tanto, aceptan un valor que se establecerá para start y end o dos
valores individuales.

Cuadrícula y flexbox

Por último, en la cuadrícula y en Flexbox, puedes usar la propiedad gap para

crear espacio entre elementos secundarios. La propiedad gap es una
abreviatura de row-gap y column-gap; acepta uno o dos valores, que pueden
ser longitudes o porcentajes. También puedes utilizar palabras clave
como unset, initial y inherit. Si defines un solo valor, se aplicará el mismo gap a
las filas y columnas, pero si defines ambos valores, el primer valor es row-
gap y el segundo es column-gap.

Con flexbox y la cuadrícula, también puedes crear espacio mediante sus

capacidades de distribución y alineación, que abarcaremos en los módulos de
cuadrícula y módulo de Flexbox.

Cómo crear espacios coherentes

Es una muy buena idea elegir una estrategia y seguirla para ayudarte a crear
una interfaz de usuario coherente que tenga un buen flujo y ritmo. Una buena
manera de lograr esto es usar medidas coherentes para el espaciado.

Por ejemplo, puedes comprometerte a usar 20px como medida coherente para
todos los espacios entre elementos, conocidos como medianiles, de modo que
todos los diseños se vean y se sientan coherentes. También puedes optar por
usar 1em como el espaciado vertical entre el contenido del flujo, lo que
lograría un espaciado coherente según el font-size del elemento.
Independientemente de lo que elijas, debes guardar estos valores como
variables (o propiedades personalizadas de CSS) para asignar tokens a esos
valores y facilitar un poco la coherencia.

:root {
--gutter: 20px;
--spacing: 1em;
}

h1 {
margin-left: var(--gutter);
margin-top: var(--spacing);
}
Usar propiedades personalizadas como esta te permite definirlas una vez y,
luego, usarlas en todo tu CSS. Cuando se actualizan, ya sea de forma local
dentro de un elemento o globalmente, los valores pasarán a través de la
cascada y se reflejarán los valores actualizados.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre espaciado

Es seguro usar HTML para los espacios cuando...

Es solo una.
Nadie lo notará.
Ayuda a la comprensión del documento.
Es solo para el espacio.

Para crear espacio dentro de una caja, usa...

Padding
HTML
Gap
Margen

Para crear espacio fuera de una caja, usa...

Gap
Margen
Padding
HTML

Para crear espacio entre cuadros, usa...

Gap
Padding
Margen
HTML
Seudoelementos
bookmark_border
El podcast de CSS (014: Pseudoelementos)

Si tienes un artículo de contenido y quieres que la primera letra sea mucho

más grande, ¿cómo lo logras?

En CSS, puedes usar el seudoelemento ::first-letter para lograr este tipo de

detalles de diseño.

p::first-letter {
color: blue;
float: left;
font-size: 2.6em;
font-weight: bold;
line-height: 1;
margin-inline-end: 0.2rem;
}

Un seudoelemento es como agregar u orientarse a un elemento adicional sin

tener que agregar más HTML. Esta solución de ejemplo, en la que se
usa ::first-letter, es uno de los muchos pseudoelementos. Tienen una variedad
de funciones y, en esta lección, aprenderás qué seudoelementos están
disponibles y cómo puedes usarlos.
::before y ::after
Los seudoelementos ::before y ::after crean un elemento secundario dentro de
un elemento solo si defines una propiedad content.
.my-element::before {
content: "";
}

.my-element::after {
content: "";
}

El content puede ser cualquier string, incluso una vacía, pero ten en cuenta
que es probable que un lector de pantalla anuncie cualquier otro elemento
que no sea una string vacía. Puedes agregar una imagen url, que insertará
una imagen en sus dimensiones originales, por lo que no podrás cambiarle el
tamaño. También puedes insertar un counter.
Término clave: Puedes crear un contador con nombre y, luego, aumentarlo en
función de su posición en el flujo del documento. Hay todo tipo de contextos en los
que pueden ser muy útiles, como numerar automáticamente un esquema.

Una vez que se crea un elemento ::before o ::after, puedes diseñarlo como
quieras, sin límites. Solo puedes insertar un elemento ::before o ::after en un
elemento que acepte elementos secundarios (elementos con un árbol de
documentos), por lo que elementos como <img />, <video> y <input> no
funcionarán.
: input[type="checkbox"] es una excepción. Se permite tener pseudoelementos
secundarios.

::first-letter
Conocimos este seudoelemento al comienzo de la lección. Ten en cuenta que
no todas las propiedades de CSS se pueden usar cuando se segmenta a ::first-
letter. Las propiedades disponibles son las siguientes:
 color

 background propiedades (como background-image)

 border propiedades (como border-color)

 float

 font propiedades (como font-size y font-weight)

 propiedades de texto (como text-decoration y word-spacing)

p::first-letter {
color: goldenrod;
font-weight: bold;
}

Nota: Solo puedes usar :first-letter en contenedores de bloques. Por lo tanto, no

funcionará si intentas agregarlo a un elemento que tenga display: inline.
::first-line
El seudoelemento ::first-line te permitirá aplicar diseño a la primera línea de
texto solo si el elemento con ::first-line aplicado tiene un
valor display de block, inline-block, list-item, table-caption o table-cell.
p::first-line {
color: goldenrod;
font-weight: bold;
}

Al igual que el seudoelemento ::first-letter, solo hay un subconjunto de

propiedades de CSS que puedes usar:

 color

 background propiedades

 font propiedades

 text propiedades

::backdrop
Si tienes un elemento que se presenta en modo de pantalla completa,
como <dialog> o <video>, puedes aplicar diseño al fondo (el espacio entre el
elemento y el resto de la página) con el seudoelemento ::backdrop:
video::backdrop {
background-color: goldenrod;
}

El seudoelemento ::backdrop es compatible con todos los navegadores

principales, excepto Safari.

::marker
El seudoelemento ::marker te permite aplicar estilo a la viñeta o al número de
un elemento de la lista o a la flecha de un elemento <summary>.
::marker {
color: hotpink;
}

ul ::marker {
font-size: 1.5em;
}

ol ::marker {
font-size: 1.1em;
}

summary::marker {
 content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
content: '\2212'' '; /* Minus symbol with space */
}

Solo se admite un pequeño subconjunto de propiedades de CSS para ::marker:

 color

 content

 white-space

 font propiedades

 Propiedades animation y transition

Puedes cambiar el símbolo del marcador con la propiedad content. Puedes

usarlo para establecer un símbolo de más y menos para los estados cerrado y
vacío de un elemento <summary>, por ejemplo.

::selection
El seudoelemento ::selection te permite darle estilo al texto seleccionado.
::selection {
background: green;
color: white;
}

Este seudoelemento se puede usar para aplicar estilo a todo el texto

seleccionado, como en la demostración anterior. También se puede usar junto
con otros selectores para lograr un estilo de selección más específico.

p:nth-of-type(2)::selection {
background: darkblue;
color: yellow;
}

Al igual que con otros seudoelementos, solo se permite un subconjunto de

propiedades CSS:

 color

 background-color, pero no background-image

 text propiedades
::placeholder
Navegadores compatibles

 57
 79
 51
 10.1

Origen
Puedes agregar una sugerencia auxiliar a los elementos del formulario,
como <input> con un atributo placeholder. El seudoelemento ::placeholder te
permite aplicar estilo a ese texto.
input::placeholder {
color: darkcyan;
}

El ::placeholder solo admite un subconjunto de reglas CSS:

 color

 background propiedades

 font propiedades

 text propiedades

Nota: Un placeholder no es <label> y no se debe usar en lugar de <label>. Los

elementos del formulario deben estar etiquetados o serán inaccesibles.
::cue
Navegadores compatibles

 26
 79
 55
 7

Origen
El último de este recorrido por los seudoelementos es el ::cue. Esto te permite
definir el estilo de las indicaciones de WebVTT, que son las leyendas de un
elemento <video>.

También puedes pasar un selector a una ::cue, lo que te permite aplicar

diseño a elementos específicos dentro de una leyenda.

video::cue {
color: yellow;
}

video::cue(b) {
color: red;
}

video::cue(i) {
color: lightpink;
}

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre seudoelementos

¿Cuáles de los siguientes no son pseudoelementos?

::after

:active

::pencil

::before

::first-paragraph

::marker

Los seudoelementos se encuentran en un archivo HTML.

Verdadero
Falso
Seudoclases
bookmark_border
El podcast de CSS 015: Seudoclases

Supongamos que tienes un formulario de registro de correo electrónico y deseas que el campo del
formulario de correo electrónico tenga un borde rojo si contiene una dirección de correo
electrónico no válida. ¿Cómo puede hacerlo? Puedes usar una seudoclase :invalid de CSS, que es
una de las muchas seudoclases que proporciona el navegador.

Una seudoclase te permite aplicar estilos según los cambios de estado y factores externos. Esto
significa que tu diseño puede reaccionar a las entradas del usuario, como una dirección de correo
electrónico no válida. Estos se abordan en el módulo de selectores y, en este módulo, los
analizaremos con más detalle.
A diferencia de los seudoelementos, sobre los que puedes obtener más información en el módulo
anterior, las seudoclases se vinculan a estados específicos en los que puede estar un elemento, en
lugar de partes de ese elemento en general de estilo.
Estados interactivos

Las siguientes seudoclases se aplican debido a una interacción que un usuario tiene con tu página.

:hover

Navegadores compatibles

 1
 12
 1
 2

Origen
Si un usuario tiene un dispositivo apuntador, como un mouse o un panel táctil, y lo coloca sobre
un elemento, puedes conectarte a ese estado con :hover para aplicar estilos. Esta es una manera
útil de indicar que se puede interactuar con un elemento.

:active

Navegadores compatibles

 1
 12
 1
 1

Origen
Este estado se activa cuando se interactúa de manera activa con un elemento (como un clic) antes
de que se suelte este. Si se usa un dispositivo apuntador, como un mouse, este estado es cuando
comienza el clic y aún no se suelta.

:focus, :focus-within y :focus-visible

Navegadores compatibles

 1
 12
 1
 1

Origen
Si un elemento puede recibir el enfoque, como un <button>, puedes reaccionar a ese estado con
la seudoclase :focus.
También puedes reaccionar si un elemento secundario de tu elemento recibe el foco con :focus-
within.

Los elementos enfocables, como los botones, mostrarán un anillo de enfoque cuando estén
enfocados, incluso cuando se haga clic en ellos. En este tipo de situación, un desarrollador aplicará
el siguiente CSS:

button:focus {
outline: none;
}

Este CSS quita el anillo de enfoque predeterminado del navegador cuando un elemento recibe el
foco, lo que presenta un problema de accesibilidad para los usuarios que navegan por una página
web con un teclado. Si no hay un estilo de enfoque, no podrán realizar un seguimiento de la
ubicación actual del enfoque cuando usen la tecla Tab. Con :focus-visible, puedes presentar un
estilo de enfoque cuando un elemento recibe el foco mediante el teclado y, al mismo tiempo, usar
la regla outline: none para evitarlo cuando un dispositivo puntero interactúa con él.
button:focus {
outline: none;
}

button:focus-visible {
outline: 1px solid black;
}

:target

Navegadores compatibles

 1
  12
 1
 1.3

Origen
La seudoclase :target selecciona un elemento que tenga una id que coincida con un fragmento de
URL. Supongamos que tienes el siguiente código HTML:
<article id="content">
…
</article>

Puedes adjuntar estilos a ese elemento cuando la URL contenga #content.

#content:target {
background: yellow;
}

Esto es útil para destacar áreas a las que podrían estar vinculadas específicamente, como el
contenido principal de un sitio web, mediante un vínculo de navegación.

Estados históricos
:link

Navegadores compatibles

 1
 12
 1
 1

Origen
La seudoclase :link se puede aplicar a cualquier elemento <a> que tenga un
valor href que todavía no haya visitado.

:visited

Puedes definir el estilo de un vínculo que ya visitó el usuario con la seudoclase :visited. Este es el
estado opuesto a :link, pero tienes menos propiedades de CSS para usar por motivos de seguridad.
Solo puedes aplicar ajustes de estilo a color, background-color, border-color y outline-color,
y al color de SVG fill y stroke.
El orden es importante

Si defines un diseño :visited, se puede anular con una seudoclase de vínculo con al menos la
misma especificidad. Por este motivo, te recomendamos que uses la regla de la LVHA para aplicar
diseño a los vínculos con seudoclases en un orden específico: :link, :visited, :hover y :active.

a:link {}
a:visited {}
a:hover {}
a:active {}

Nota: Por motivos de seguridad, solo puedes cambiar los estilos definidos por un estado :link o no
visitado con la seudoclase :visited, por lo que es importante que primero te asegures de definir los
estilos modificables. Para lograrlo, cumplirás con la regla de la LVHA.

Estados de formularios

Las siguientes seudoclases pueden seleccionar elementos de formulario, en los diversos estados en
los que pueden estar estos elementos durante la interacción con ellos.

:disabled y :enabled

Navegadores compatibles

 1
 12
 1
 3.1

Origen
Si el navegador inhabilita un elemento de formulario, como <button>, puedes conectarte a ese
estado con la seudoclase :disabled. La seudoclase :enabled está disponible para el estado
opuesto, aunque los elementos de forma también son :enabled de forma predeterminada, por lo
que es posible que no alcances esta seudoclase.

:checked y :indeterminate

Navegadores compatibles

 1
 12
 1
 3.1

Origen
La seudoclase :checked está disponible cuando un elemento de formulario complementario,
como una casilla de verificación o un botón de selección, está marcado.
El estado :checked es un estado binario(verdadero o falso), pero las casillas de verificación
tienen un estado intermedio cuando no están marcadas ni desmarcadas. Esto se conoce como el
estado :indeterminate.

Un ejemplo de este estado es cuando tienes un control "seleccionar todo" que marca todas las
casillas de verificación en un grupo. Si el usuario desmarcara una de estas casillas de verificación,
la casilla de verificación raíz ya no representaría que se marquen todas las opciones, por lo que
debería pasar a un estado indeterminado.

El elemento <progress> también tiene un estado indeterminado al que se le puede dar estilo. Un
caso de uso común es darle una apariencia a rayas para indicar que se desconoce cuánto más se
necesita.

:placeholder-shown

Navegadores compatibles

 47
 79
 51
 9

Origen
Si el campo de un formulario tiene un atributo placeholder y sin valor, se puede usar la
seudoclase :placeholder-shown para adjuntar diseños a ese estado. En cuanto haya contenido en
el campo, ya sea que tenga un placeholder o no, este estado dejará de aplicarse.

Estados de validación

Navegadores compatibles

 10
 12
 4
 5

Origen
Puedes responder a la validación de formularios HTML con seudoclases,
como :valid, :invalid y :in-range. Las seudoclases :valid y :invalid son útiles en contextos
como un campo de correo electrónico que tiene un pattern que debe coincidir, a fin de que sea un
campo válido. Este estado de valor válido se puede mostrar al usuario para ayudarlo a comprender
que puede pasar de manera segura al siguiente campo.

La seudoclase :in-range está disponible si una entrada tiene min y max, como una entrada
numérica y el valor está dentro de esos límites.
Con los formularios HTML, puedes determinar si un campo es obligatorio con el
atributo required. La seudoclase :required estará disponible para los campos obligatorios. Los
campos que no son obligatorios se pueden seleccionar con la seudoclase :optional.
Nota: No es una buena idea confiar únicamente en el color para representar los cambios de estado,
especialmente el rojo y el verde, ya que los usuarios daltónicos y con visión reducida pueden tener
dificultades para ver un cambio de estado o, incluso, pasarlo por alto por completo. Una buena idea es
usar el color para respaldar los cambios de estado, junto con los cambios de texto y de íconos para
representar visualmente los cambios.

Seleccionar elementos por índice, orden y caso

Hay un grupo de seudoclases que seleccionan elementos en función de dónde se encuentran en el

documento.

:first-child y :last-child

Navegadores compatibles

 4
 12
 3
 3.1

Origen
Si deseas encontrar el primer o el último elemento, puedes usar :first-child y :last-child. Estas
seudoclases mostrarán el primer o el último elemento en un grupo de elementos del mismo nivel.

:only-child

Navegadores compatibles

 2
 12
 1.5
 3.1

Origen
También puedes seleccionar elementos que no tengan elementos del mismo nivel, con la
seudoclase :only-child.

:first-of-type y :last-of-type

Navegadores compatibles

 1
 12
  3.5
 3.1

Origen
Puedes seleccionar :first-of-type y :last-of-type, que, al principio, parecen hacer lo mismo
que :first-child y :last-child, pero considera el siguiente código HTML:
<div class="my-parent">
<p>A paragraph</p>
<div>A div</div>
<div>Another div</div>
</div>

Y este CSS:

.my-parent div:first-child {
color: red;
}

Ningún elemento sería de color rojo porque el primer elemento secundario es un párrafo y no un
div. La seudoclase :first-of-type es útil en este contexto.

.my-parent div:first-of-type {
color: red;
}

Aunque el primer <div> es el segundo elemento secundario, sigue siendo el primero de tipo
dentro del elemento .my-parent. Por lo tanto, con esta regla, será de color rojo.

:nth-child y :nth-of-type

Navegadores compatibles

 1
 12
 3.5
 3.1

Origen
Tampoco estás limitado a los primeros y últimos tipos secundarios y tipos. Las seudoclases :nth-
child y :nth-of-type te permiten especificar un elemento que está en un índice determinado. La
indexación en los selectores CSS comienza en 1.

También puedes pasar más que un índice a estas seudoclases. Si deseas seleccionar todos los
elementos pares, puedes usar :nth-child(even).
También puedes crear selectores más complejos que encuentren elementos en intervalos
espaciados con regularidad mediante la microsintaxis An+B.
li:nth-child(3n+3) {
background: yellow;
}

Este selector selecciona cada tercer elemento a partir del elemento 3. La n en esta expresión es el
índice, que comienza en cero y el 3 (3n) es el valor por el que se multiplica ese índice.

Supongamos que tienes 7 elementos <li>. El primer elemento que se selecciona es 3

porque 3n+3 se traduce como (3 * 0) + 3. La siguiente iteración elegiría el elemento 6
porque n ahora aumentó a 1, por lo que es (3 * 1) + 3). Esta expresión funciona para :nth-
child y :nth-of-type.

Puedes experimentar con este tipo de selector en este nth-child-tester o en esta herramienta de
selección de cantidad.

:only-of-type

Navegadores compatibles

 1
 12
 3.5
 3.1

Origen
Por último, puedes encontrar el único elemento de un tipo determinado en un grupo de elementos
del mismo nivel con :only-of-type. Esto resulta útil si deseas seleccionar listas con un solo
elemento o si deseas buscar el único elemento en negrita en un párrafo.
Cómo buscar elementos vacíos

A veces, puede ser útil identificar elementos completamente vacíos, y también existe una
seudoclase para eso.

:empty

Navegadores compatibles

 1
 12
 1
 3.1

Origen
Si un elemento no tiene elementos secundarios, se les aplica la seudoclase :empty. Sin embargo,
los elementos secundarios no son solo elementos HTML o nodos de texto: también pueden ser
espacios en blanco, lo que puede resultar confuso cuando depuras el siguiente HTML y te
preguntas por qué no funciona con :empty:
<div>
</div>

Esto se debe a que hay un espacio en blanco entre el <div> de apertura y de cierre, por lo que el
valor vacío no funcionará.

La seudoclase :empty puede ser útil si tienes poco control sobre el HTML y deseas ocultar
elementos vacíos, como un editor de contenido WYSIWYG. En este caso, un editor agregó un
párrafo vacío suelto.

<article class="post">
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
<p></p>
<p>Curabitur blandit tempus porttitor.</p>
</article>

Con :empty, puedes encontrarlo y ocultarlo.

.post :empty {
display: none;
}

Encontrar y excluir varios elementos

Algunas seudoclases te ayudan a escribir una CSS más compacta.

:is()

Navegadores compatibles

 88
 88
 78
 14

Origen

Si deseas encontrar todos los elementos secundarios h2, li y img en un elemento .post, te
recomendamos escribir una lista de selectores como la siguiente:

.post h2,
.post li,
.post img {
…
}

Con la seudoclase :is(), puedes escribir una versión más compacta:

.post :is(h2, li, img) {
…
}

La seudoclase :is no solo es más compacta que una lista de selección, sino que también permite
mayor flexibilidad. En la mayoría de los casos, si hay un error o un selector no compatible en una
lista de selectores, la lista completa de selectores dejará de funcionar. Si hay un error en los
selectores pasados en una seudoclase :is, se ignorará el selector no válido, pero se usarán los que
sean válidos.

:not()

Navegadores compatibles

 1
 12
 1
 3.1

Origen
También puedes excluir elementos con la seudoclase :not(). Por ejemplo, puedes usarlo para
definir el estilo de todos los vínculos que no tengan un atributo class.
a:not([class]) {
color: blue;
}

Una seudoclase :not también puede ayudarte a mejorar la accesibilidad. Por ejemplo,
un <img> debe tener un alt, incluso si es un valor vacío, por lo que puedes escribir una regla de
CSS que agregue un contorno rojo grueso a las imágenes no válidas:

img:not([alt]) {
outline: 10px red;
}

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre seudoclases

Las pseudoclases actúan como si una clase se aplicara de forma dinámica a un elemento, mientras
que los seudoelementos actúan sobre un elemento en sí.
Falso

Verdadero

¿Cuáles de las siguientes son una seudoclase funcional?

:is()

:empty

:not()

:target

¿Cuáles de las siguientes seudoclases se deben a una interacción del usuario?

:focus-within

:squeeze

:hover

:press

:target

¿Cuáles de las siguientes son seudoclases de estado <form>?

:checked

:loading

:in-range

:enabled

:valid

:indeterminate

:fresh

¿Te resultó útil?

Bordes
bookmark_border
El podcast de CSS 016: Borders
En el módulo modelo de caja, consideramos una analogía de las tramas para
describir cada sección del modelo de caja.

El cuadro de borde es el marco de tus cuadros, y las propiedades border te

ofrecen una gran variedad de opciones para crear ese marco casi con
cualquier estilo que se te ocurra.

Propiedades del borde

Las propiedades border individuales proporcionan una forma de aplicar diseño

a las distintas partes de un borde.

Navegadores compatibles

 1
 12
 1
 1

Origen
Estilo

Para que aparezca un borde, debes definir el border-style. Puedes elegir entre
las siguientes opciones:

Cuando se usan los estilos ridge, inset, outset y groove, el navegador oscurece
el color del borde del segundo color mostrado para proporcionar contraste y
profundidad. Este comportamiento puede variar entre los navegadores, en
especial para colores oscuros como black. En Chrome, estos estilos de borde
parecerán ser sólidos y, en Firefox, se aclararán para ofrecer un segundo color
más oscuro.

El comportamiento del navegador también puede variar en otros estilos de

bordes, por lo que es importante que pruebes tu sitio en distintos
navegadores. Un ejemplo común de esta diferencia es la forma en que cada
navegador renderiza los estilos dotted y dashed.

Bordes
que se muestran en Chrome, Firefox y Safari.

Para establecer un diseño de borde a cada lado del cuadro, puedes usar los
elementos border-top-style, border-right-style, border-left-style y border-bottom-
style.

Abreviatura

Al igual que con margin y padding, puedes usar la propiedad

abreviada border para definir todas las partes del borde en una sola
declaración.
.my-element {
border: 1px solid red;
}

El orden de los valores en la abreviatura border es border-width, border-style y,

luego, border-color.

Color

Puedes configurar el color en todos los lados del cuadro o en cada lado
individual con border-color. De forma predeterminada, usa el color de texto
actual del cuadro: currentColor. Esto significa que si solo declaras propiedades
del borde, como el ancho, el color será el valor calculado, a menos que lo
configures de forma explícita.
.my-element {
color: blue;
border: solid; /* Will be a blue border */
}

.my-element {
color: blue;
border: solid yellow;
}

Para establecer un color de borde a cada lado de la caja, usa border-top-

color, border-right-color, border-left-color y border-bottom-color.

Ancho

El ancho de un borde es el grosor de la línea, y lo controla border-width. El

ancho de borde predeterminado es medium. Sin embargo, esta sección no
estará visible a menos que definas un estilo. Puedes usar otros anchos con
nombre, como thin y thick.
Las propiedades border-width también aceptan una unidad de longitud
como px, em, rem o %. Para establecer el ancho de borde a cada lado del
cuadro, usa border-top-width, border-right-width, border-left-width y border-bottom-
width.
Propiedades lógicas
En el módulo Propiedades lógicas, descubriste cómo hacer referencia al flujo
de bloques y al flujo intercalado, en lugar de hacer referencia al flujo de
bloques y al flujo intercalado, en lugar de al lado explícito superior, derecho,
inferior o izquierdo.

También tienes esta capacidad con bordes:

.my-element {
border: 2px dotted;
border-inline-end: 2px solid red;
}

En este ejemplo, .my-element tiene todos los lados definidos por tener un
borde punteado 2px que es el color actual del texto. El borde inline-end se
define como 2px, sólido y rojo. Esto significa que en los idiomas de izquierda a
derecha, como el inglés, el borde rojo estará en el lado derecho del cuadro. En
los idiomas que se leen de derecha a izquierda, como el árabe, el borde rojo
estará en el lado izquierdo del cuadro.

La compatibilidad del navegador es variada en cuanto a las propiedades

lógicas en los bordes, así que asegúrate de verificar la compatibilidad antes
de usarla.

Radio del borde

Para agregar esquinas redondeadas a un cuadro, usa la propiedad border-
radius.
.my-element {
border-radius: 1em;
}

Esta abreviatura agrega un borde coherente a cada esquina del cuadro. Al

igual que con las otras propiedades del borde, puedes definir el radio del
borde de cada lado con border-top-left-radius, border-top-right-radius, border-
bottom-right-radius y border-bottom-left-radius.

También puedes especificar el radio de cada esquina en la abreviatura,

siguiendo el orden: arriba a la izquierda, arriba a la derecha, abajo a la
derecha y abajo a la izquierda.

.my-element {
border-radius: 1em 2em 3em 4em;
}

Cuando defines un solo valor para una esquina, usas otra abreviatura porque
un radio de borde se divide en dos partes: la vertical y la horizontal. Esto
significa que cuando configuras border-top-left-radius: 1em, configuras el radio
superior izquierdo-superior y el superior izquierdo-izquierda.

Puedes definir ambas propiedades por esquina de la siguiente manera:

.my-element {
border-top-left-radius: 1em 2em;
}

Esto agrega un valor border-top-left-top de 1em y un valor border-top-left-

left de 2em. Esto convierte el radio del borde izquierdo superior en un radio
elíptico, en lugar del radio circular predeterminado.
Puedes definir estos valores en la abreviatura border-radius, con un / para
definir los valores de la elíptica, después de los valores estándar. Esto te
permite ser creativo y crear algunas formas complejas.

.my-element {
border: 2px solid;
border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

Imágenes del borde

No solo tienes que usar un borde basado en trazos en CSS. También puedes
usar cualquier tipo de imagen con border-image. Esta propiedad abreviada te
permite establecer la imagen de origen, cómo se divide la imagen, el ancho,
qué tan alejado se aleja el borde del borde y cómo debe repetirse.
.my-element {
border-image-source: url([Link]
[Link]);
border-image-slice: 61 58 51 48;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
}

La propiedad border-image-width es como border-width: es la forma en que

configuras el ancho de la imagen del borde. La propiedad border-image-
outset te permite establecer la distancia entre la imagen de borde y el cuadro
que se ajusta.

border-image-source

border-image-source (fuente de la imagen del borde) puede ser url para

cualquier imagen válida, incluidas las gradientes de CSS.
.my-element {
border-image-source: url('path/to/[Link]');
}

.my-element {
border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

La propiedad border-image-slice es una propiedad útil que te permite dividir

una imagen en 9 partes, compuestas por 4 líneas divididas. Funciona como la
abreviatura margin, en la que defines el valor de desplazamiento superior,
derecho, inferior e izquierdo.
.my-element {
border-image: url('[Link]');
border-image-slice: 61 58 51 48;
}

Con los valores de desplazamiento definidos, ahora tienes 9 secciones de la

imagen: 4 esquinas, 4 aristas y una sección central. Las esquinas se aplican a
las esquinas del elemento con la imagen del borde. Las aristas se aplican a los
bordes de ese elemento. La propiedad border-image-repeat define cómo
ocupan esos bordes en su espacio, y la propiedad border-image-width controla
el tamaño de las porciones.

Por último, la palabra clave fill determina si la sección del medio, a la

izquierda de la división, se usa o no como imagen de fondo del elemento.

border-image-repeat

border-image-repeat es la forma en que le indicas a CSS cómo deseas que se

repita tu imagen de borde. Funciona igual que background-repeat.
 El valor inicial es stretch, que estira la imagen de origen para llenar el espacio
disponible cuando sea posible.
 El valor repeat coloca en mosaicos los bordes de la imagen de origen tantas
veces como sea posible y puede recortar las regiones perimetrales para
lograrlo.
 El valor round es el mismo que la repetición, pero en lugar de recortar las
regiones del borde de la imagen para que se ajusten a la mayor cantidad
posible, se estira y se repite para lograr una repetición perfecta.
 De nuevo, el valor space es el mismo que el de la repetición, pero este valor
agrega espacio entre cada región perimetral para crear un patrón fluido.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre las fronteras

¿Cuál es el color de borde predeterminado?

white

historicColor

black

currentColor

.my-element {
border: solid hotpink;
}

¿Cuál es el ancho predeterminado de un borde?

medium

solid

1px

border-inline: 1px solid haría...

colocar bordes en la parte superior e inferior (en diseños latinos).

colocar bordes a la izquierda y a la derecha (en diseños latinos).
coloca bordes en la primera línea.
colocar bordes en el interior.
Sombras
bookmark_border
El podcast de CSS 017: Shadows

Supongamos que te enviaron un diseño para construir y en ese diseño hay

una imagen de una camiseta, cortada, con una sombra paralela. El diseñador
te cuenta que la imagen del producto es dinámica y se puede actualizar a
través del sistema de administración de contenido, por lo que la sombra
paralela también debe ser dinámica. En lugar de una camiseta, la imagen
puede ser un visor, un pantalón corto u otro artículo. ¿Cómo se hace con los
CSS?

CSS tiene las propiedades box-shadow y text-shadow, pero la imagen no es

texto, por lo que no puedes usar text-shadow. Si usas box-shadow, la sombra
está en el cuadro que lo rodea, no alrededor de la camiseta.
Afortunadamente, hay otra opción: el filtro drop-shadow(). Esto te permite
hacer exactamente lo que pidió el diseñador. Hay muchas opciones cuando se
trata de sombras en CSS, cada una diseñada para un caso de uso diferente.
Sombra del cuadro

Navegadores compatibles

 10
 12
 4
 5.1

Origen

La propiedad box-shadow sirve para agregar sombras al cuadro de un

elemento HTML. Funciona en elementos de bloque y elementos intercalados.

.my-element {
box-shadow: 5px 5px 20px 5px #000;
}

El orden de los valores para box-shadow es el siguiente:

1. Desplazamiento horizontal: Un número positivo lo desplaza desde la

izquierda y un número negativo lo desplaza desde la derecha.
2. Desplazamiento vertical: Un número positivo lo empuja hacia abajo desde
la parte superior y un número negativo lo empuja hacia arriba desde la parte
inferior.
 3. Radio de desenfoque: Un número más grande produce una sombra más
desenfocada, mientras que un número pequeño produce una sombra más
nítida.
4. Radio de distribución (opcional): Un número mayor aumenta el tamaño de
la sombra y un número menor la disminuye, lo que hace que tenga el mismo
tamaño que el radio de desenfoque si se establece en 0.
5. Color: Cualquier valor de color válido. Si no se define este valor, se usará el
color de texto procesado.

Para hacer que una sombra cuadrada sea una sombra interior, en lugar de la
sombra exterior predeterminada, agrega una palabra clave inset antes de las
otras propiedades.

/* Outer shadow */
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}

/* Inner shadow */
.my-element {
box-shadow: inset 5px 5px 20px 5px #000;
}

Varias sombras

Puedes agregar todas las sombras que quieras con box-shadow. Para ello,
agrega una colección de conjuntos de valores separados por comas:

.my-element {
box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px
dodgerblue,
inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px
steelblue;
}

Propiedades que afectan a la sombra del cuadro

Agregar un border-radius a tu cuadro también afectará la forma de la sombra

del cuadro. Esto se debe a que CSS crea una sombra basada en la forma del
cuadro, como si la luz apuntara hacia él.

.my-element {
box-shadow: 0px 0px 20px 5px darkslateblue;
border-radius: 25px;
}

Si el cuadro con box-shadow está en un contenedor que tiene overflow: hidden,

la sombra tampoco se saldrá de ese desbordamiento.

<div class="my-parent">
<div class="my-shadow">My shadow is hidden by my parent.</div>
</div>

.my-parent,
.my-shadow {
width: 250px;
height: 250px;
}

.my-shadow {
box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
overflow: hidden;
}

Sombra del texto

Navegadores compatibles

 2
 12
 3.5
 1.1

Origen

La propiedad text-shadow es muy similar a la propiedad box-shadow. Solo

funciona en nodos de texto.

.my-element {
text-shadow: 3px 3px 3px hotpink;
}

Los valores de text-shadow son los mismos que box-shadow y en el mismo

orden. La única diferencia es que text-shadow no tiene ningún valor
de spread ni de palabra clave inset.
Cuando agregas un box-shadow, este se recorta con la forma de tu cuadro,
pero text-shadow no tiene recortes. Esto significa que si el texto es completo o
semitransparente, la sombra será visible a través de él.

.my-element {
text-shadow: 3px 3px 3px gold;
color: rgb(0 0 0 / 70%);
}

Varias sombras

Puedes agregar tantas sombras como desees con text-shadow, al igual que
con box-shadow. Agrega una colección de conjuntos de valores separados por
comas y podrás crear algunos efectos de texto geniales, como texto en 3D.

.my-element {
text-shadow: 1px 1px 0px white,
2px 2px 0px firebrick;
color: darkslategray;
}

Sombra paralela

Para lograr una sombra paralela que siga cualquier curva potencial de una
imagen, usa el filtro drop-shadow de CSS. Esta sombra se aplica a una máscara
alfa, lo que hace que sea muy útil para agregar una sombra a una imagen de
corte, como es el caso de la introducción de este módulo.

.my-image {
filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}

Término clave: En otro módulo, analizaremos los filtros de CSS, pero, en resumen,
los filtros te permiten aplicar varios efectos gráficos a los píxeles de un elemento.

El filtro drop-shadow tiene los mismos valores que box-shadow, pero no se

permiten la palabra clave inset ni el valor spread. Puedes agregar tantas
sombras como desees. Para ello, agrega varias instancias de valores drop-
shadow a la propiedad filter. Cada sombra utilizará la última sombra como
punto de referencia de posicionamiento.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre las sombras

¿Qué valor paralelo a continuación es único de box-shadow?

Radio de desenfoque
Desplazamiento vertical
Color
inset

Desplazamiento horizontal
Radio de distribución

Solo se permiten 13 sombras de cuadro en un elemento a la vez.

Falso
Verdadero
Concentración
bookmark_border
El podcast de CSS - 018: Focus

En tu página web, haces clic en un vínculo que lleva al usuario al contenido

principal del sitio web. Con frecuencia, se los conoce como vínculos de
navegación o vínculos de anclaje. Cuando ese vínculo se activa a través de un
teclado, con las teclas Tab y, luego, Intro, el contenedor de contenido
principal tiene un anillo de enfoque a su alrededor. ¿A qué se debe?

Esto se debe a que <main> tiene un valor de atributo tabindex="-1", lo que

significa que se puede enfocar de manera programática. Cuando se segmenta
la <main> (porque la #main-content en la barra de URL del navegador coincide
con la id), recibe el enfoque programático. Resulta tentador quitar los estilos
de enfoque en estas situaciones, pero manejar el enfoque de manera correcta
y cuidadosa ayuda a crear una experiencia del usuario buena y accesible.
También puede ser un excelente lugar para agregar algo de interés a las
interacciones.

¿Por qué es importante el enfoque?

Como desarrollador web, tu trabajo es hacer que un sitio web sea inclusivo y
accesible para todos. La creación de estados de enfoque accesibles con CSS
es parte de esta responsabilidad.

Los estilos de enfoque ayudan a las personas que usan un dispositivo, como
un teclado o un control de interruptor, a navegar e interactuar con un sitio
web. Si un elemento recibe el enfoque y no hay una indicación visual, el
usuario puede perder de vista lo que está en primer plano. Esto puede crear
problemas de navegación y provocar comportamientos no deseados si, por
ejemplo, se sigue un vínculo incorrecto.
Nota: Obtén más información sobre la importancia del enfoque para la accesibilidad
en Aprende sobre accesibilidad: Enfoque y descubre cómo administrar el enfoque en
HTML en Aprende HTML: Enfoque.

Cómo se enfocan los elementos

Ciertos elementos se pueden enfocar automáticamente; son elementos que

aceptan la interacción y las entradas,
como <a>, <button>, <input> y <select>. En resumen, todos los elementos del
formulario, los botones y los vínculos. Por lo general, puedes navegar por los
elementos enfocables de un sitio web con la tecla Tab para avanzar en la
página y Mayúsculas + Tab para retroceder.

También hay un atributo HTML llamado tabindex que te permite cambiar el

índice de tabulación, que es el orden en el que se enfocan los elementos,
cada vez que alguien presiona su tecla Tab, o se cambia el enfoque con un
cambio de hash en la URL o por un evento de JavaScript. Si tabindex en un
elemento HTML se configura como 0, puede recibir el foco mediante la
tecla Tab y respetará el índice global de pestañas, que se define en el orden
de origen del documento.

Si configuras tabindex como -1, solo puede recibir el foco de manera

programática, lo que significa que solo cuando se produce un evento de
JavaScript o un cambio de hash (que coincide con el id del elemento en la
URL). Si configuras tabindex para que sea un valor mayor que 0, se quitará del
índice de la pestaña global, definido por el orden de origen del documento. El
orden de tabulación ahora se definirá según el valor de tabindex, de modo que
un elemento con tabindex="1" recibirá el enfoque antes que un elemento
con tabindex="2", por ejemplo

Advertencia: Es muy importante respetar el orden de las fuentes de los

documentos. Solo debes cambiar el orden del foco si debes cambiarlo por
completo. Esto se aplica cuando se configura tabindex y se cambia el orden visual
con el diseño CSS, como Flexbox y la cuadrícula. Cualquier elemento que genere un
enfoque impredecible en la Web puede crear una experiencia inaccesible para el
usuario.

Enfoque de estilo

El comportamiento predeterminado del navegador cuando un elemento recibe

el foco es presentar un anillo de enfoque. Este anillo de enfoque varía según
el navegador y los sistemas operativos.

Este comportamiento se puede cambiar con CSS mediante las

seudoclases :focus, :focus-within y :focus-visible que aprendiste en la lección
sobre pseudoclases. Es importante establecer un estilo de enfoque que
tenga contraste con el estilo predeterminado de un elemento. Por ejemplo,
un enfoque común es utilizar la propiedad outline.
a:focus {
outline: 2px solid slateblue;
}

La propiedad outline podría aparecer demasiado cerca del texto de un vínculo,

pero la propiedad outline-offset puede ayudar con eso, ya que
agrega padding visual adicional sin afectar el tamaño geométrico que rellena
el elemento. Un valor numérico positivo para outline-offset desplazará el
contorno hacia afuera, mientras que un valor negativo lo desplazará hacia
adentro.

Actualmente, en algunos navegadores, si tienes un border-radius establecido

en tu elemento y usas outline, no coincidirá, ya que el contorno tendrá
esquinas pronunciadas. Por este motivo, es tentador usar un box-shadow con
un radio de desenfoque pequeño, ya que box-shadow se recorta con la forma y
respeta border-radius, pero este estilo no se mostrará en el modo de
contraste alto de Windows. Esto se debe a que el modo de contraste alto
de Windows no aplica sombras e ignora principalmente las imágenes de fondo
para favorecer la configuración que prefiere el usuario.

Resumen

Crear un estado de enfoque que contraste con el estado predeterminado de

un elemento es increíblemente importante. Los estilos predeterminados del
navegador ya lo hacen por ti, pero si quieres cambiar este comportamiento,
recuerda lo siguiente:

 Evita usar outline: none en un elemento que pueda recibir el enfoque del
teclado.
 Evita reemplazar los diseños de outline por box-shadow. ya que no aparecen en
el modo de contraste alto de Windows.
 Solo establece un valor positivo para tabindex en un elemento HTML si es
necesario.
 Asegúrate de que el estado del enfoque sea muy claro en comparación con el
estado predeterminado.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre enfoque

¿Cuáles de los siguientes son elementos enfocables automáticamente?

<a>

<input>

<p>

<output>

<button>

<select>

¿Cuál de los siguientes dispositivos de entrada puede establecer el enfoque?

Ratón
Tecnología de asistencia (lector de pantalla, interruptor, etc.)
Una papa
Teclado
Controlador de juegos
Índice z y contextos de apilamiento
bookmark_border
El podcast de CSS - 019: Índice z y contextos de pila

Supongamos que tienes un par de elementos que están posicionados de manera absoluta y se
supone que deben estar uno encima del otro. Puedes escribir un fragmento de un código HTML
como el siguiente:

<div class="stacked-items">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
</div>

Pero ¿cuál se ubica encima del otro de forma predeterminada? Para saber qué elemento haría eso,
necesitas comprender el índice z y los contextos de apilado.

Índice z
La propiedad z-index establece explícitamente un orden de capas para HTML basado en el
espacio 3D del navegador: el eje Z. Este es el eje que muestra las capas más cercanas y alejadas de
ti. El eje vertical en la Web es el eje Y y el horizontal es el eje X.
La propiedad z-index acepta un valor numérico que puede ser positivo o negativo. Los elementos
aparecerán encima de otro si tienen un valor de z-index más alto. Si no se establece z-index en
tus elementos, el comportamiento predeterminado es que el orden de origen del documento dicta
el eje Z. Esto significa que los elementos más abajo en el documento se sitúan sobre los elementos
que aparecen antes de ellos.

En el flujo normal, si estableces un valor específico para z-index y no funciona, debes establecer
el valor position del elemento en un valor distinto de static. Este es un lugar común donde los
usuarios tienen dificultades con z-index.

Sin embargo, este no es el caso si estás en un contexto de flexbox o cuadrícula, ya que puedes
modificar el índice z de los elementos flexibles o de cuadrícula sin agregar position: relative.

Índice z negativo

Para establecer un elemento detrás de otro, agrega un valor negativo para z-index.

.my-element {
background: rgb(232 240 254 / 0.4);
}

.my-element .child {
position: relative;
z-index: -1;
}

Siempre que .my-element tenga el valor inicial de z-index de auto, se ubicará el

elemento .child detrás de él.

Agrega el siguiente CSS a .my-element, y el elemento .child no se ubicará detrás de él.

.my-element {
position: relative;
z-index: 0;
background: rgb(232 240 254 / 0.4);
}

Como .my-element ahora tiene un valor position que no es static y un valor z-index que no
es auto, creó un nuevo contexto de apilado. Esto significa que, incluso si configuras .child para
que tenga un z-index de -999, no se quedará detrás de .my-parent.

Contexto de apilamiento

Un contexto de apilado es un grupo de elementos que tienen un elemento superior en común y se

mueven juntos hacia arriba y hacia abajo en el eje z.

En este ejemplo, el primer elemento superior tiene un z-index de 1, por lo que crea un nuevo
contexto de apilado. Su elemento secundario tiene un z-index de 999. Junto a este elemento
superior, hay otro elemento superior con un elemento secundario. El elemento superior tiene un z-
index de 2, y el elemento secundario también tiene un z-index de 2. Debido a que ambos
elementos superiores crean un contexto de apilado, el z-index de todos los elementos secundarios
se basa en el del elemento superior.

El z-index de los elementos dentro de un contexto de apilado siempre es relativo al orden actual
del elemento superior en su propio contexto de apilado.

Nota: El elemento <html> es un contexto de apilado en sí mismo y nunca puede ir detrás de él. Puedes
colocar elementos detrás de <body> hasta que crees un contexto de apilado con él.

Cómo crear un contexto de apilado

No es necesario que apliques z-index ni position para crear un contexto de apilado nuevo.
Puedes crear un contexto de apilado nuevo agregando un valor para las propiedades que crean una
nueva capa compuesta, como opacity, will-change y transform. Puedes ver una lista completa
de propiedades aquí.

Para explicar qué es una capa compuesta, imagina que una página web es un lienzo. Un navegador
toma tus elementos HTML y CSS y los usa para determinar el tamaño del lienzo. Luego, pinta la
página en este lienzo. Si un elemento fuera a cambiar (por ejemplo, si cambia de posición), el
navegador debe regresar y volver a pensar qué pintar.

Para mejorar el rendimiento, el navegador crea nuevas capas compuestas que se superponen con el
lienzo. Estas notas se parecen un poco a las notas adhesivas: mover una y modificarla no tiene un
gran impacto en el lienzo general. Se crea una nueva capa compuesta para los elementos
con opacity, transform y will-change, ya que es muy probable que cambien, por lo que el
navegador se asegura de que el cambio tenga el mejor rendimiento posible usando la GPU para
aplicar ajustes de estilo.

Nota: También puedes crear un contexto de apilado si agregas un filter y configuras backface-
visibility: hidden.

Recursos
 Cómo forzar capas
 Guía de animaciones: Cómo forzar la creación de capas
 Información sobre el índice z

Verifica tus conocimientos

Pon a prueba tus conocimientos del índice z

<section>
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
</section>

¿Qué artículo aparece arriba de forma predeterminada?

4

Si el índice z no funciona, ¿qué propiedad deberías inspeccionar en tu elemento?

position
animation
relative
display

¿flexbox y la cuadrícula necesitan position: relative?

No

Sí
¿Te resultó útil?
Funciones
bookmark_border
El podcast de CSS (2020): Funciones
Hasta ahora, en este curso, estuviste expuesto a varias funciones de CSS. En
el módulo de cuadrícula, te presentamos minmax() y fit-content(), que te
ayudan a determinar el tamaño de los elementos. En el módulo color, te
presentamos rgb() y hsl(), que te ayudan a definir colores.
Al igual que muchos otros lenguajes de programación, CSS
tiene muchas funciones integradas a las que puedes acceder siempre que las
necesites.

Cada función de CSS tiene un propósito específico. En esta lección, obtendrás

una descripción general de alto nivel que te brindará una mejor comprensión
de dónde y cómo usarlas.

¿Qué es una función?

Una función es un fragmento de código independiente y con nombre que

completa una tarea específica. Se asigna un nombre a una función para que
puedas llamarla dentro de tu código y pasar datos a la función. Esto se
conoce como pasar argumentos.

Muchas funciones de CSS son funciones puras, lo que significa que, si les
pasas los mismos argumentos, siempre te devolverán el mismo resultado, sin
importar lo que suceda en el resto de tu código. A menudo, estas funciones se
volverán a calcular a medida que los valores cambien en tu CSS, de manera
similar a otros elementos en el lenguaje, como los valores calculados en
cascada como currentColor.
En CSS, solo puedes usar las funciones proporcionadas, en lugar de escribir
tus propias, pero las funciones se pueden anidar entre sí en algunos
contextos, lo que les da más flexibilidad. Veremos eso en detalle más
adelante en el módulo.

Selectores funcionales
.post :is(h1, h2, h3) {
line-height: 1.2;
}

Aprendiste sobre los selectores funcionales en el módulo de seudoclases, que

detalla funciones como :is() y :not(). Los argumentos que se pasan a estas
funciones son selectores CSS, que luego se evalúan. Si hay una coincidencia
con algunos elementos, se les aplicará el resto de la regla de CSS.
Propiedades personalizadas y var()
:root {
--base-color: #ff00ff;
}

.my-element {
background: var(--base-color);
}

Una propiedad personalizada es una variable que te permite asignar valores

de token a los valores de tu código CSS. Las propiedades personalizadas
también se ven afectadas por la cascada, lo que significa que se pueden
manipular o redefinir de forma contextual. Una propiedad personalizada debe
tener un prefijo con dos guiones (--) y distingue mayúsculas de minúsculas.
La función var() toma un argumento obligatorio: la propiedad personalizada
que intentas mostrar como un valor. En el fragmento anterior, la
función var() tiene --base-color pasado como argumento. Si se definió --base-
color, var() mostrará el valor.
.my-element {
background: var(--base-color, hotpink);
}

También puedes pasar un valor de declaración de resguardo a la función var().

Esto significa que, si no se puede encontrar --base-color, se usará
la declaración pasada, que, en el caso de este ejemplo, es el color hotpink.

Funciones que devuelven un valor

La función var() es solo una de las funciones de CSS que devuelve un valor.
Las funciones como attr() y url() siguen una estructura similar a var(): pasas
uno o más argumentos y los usas en el lado derecho de tu declaración de
CSS.
a::after {
content: attr(href);
}

La función attr() toma el contenido del atributo href del elemento <a> y lo
configura como el content del seudoelemento ::after. Si cambiara el valor del
atributo href del elemento <a>, esto se reflejaría automáticamente en este
atributo content.

.my-element {
background-image: url('/path/to/[Link]');
}

La función url() toma una URL de cadena y se usa para cargar imágenes,
fuentes y contenido. Si no se pasa una URL válida o no se puede encontrar el
recurso al que apunta la URL, la función url() no mostrará nada.

Funciones de color
Aprendiste todo sobre las funciones de color en el módulo color. Si todavía no
leíste este, te recomendamos que lo hagas.

Algunas funciones de color disponibles en CSS

son rgb(), rgba(), hsl(), hsla(), hwb(), lab() y lch(). Todos ellos tienen un formato
similar, es decir, se pasan argumentos de configuración y se devuelve un
color.

Expresiones matemáticas

Al igual que muchos otros lenguajes de programación, CSS proporciona

funciones matemáticas útiles para ayudar con varios tipos de cálculos.

calc()

Navegadores compatibles

 26
 12
 16
 7

Origen
La función calc() toma una sola expresión matemática como parámetro. Esta
expresión matemática puede ser una combinación de tipos, como longitud,
número, ángulo y frecuencia. Las unidades también se pueden combinar.
.my-element {
width: calc(100% - 2rem);
}
En este ejemplo, la función calc() se usa para ajustar el tamaño del ancho de
un elemento como el 100% del elemento superior que lo contiene y, luego,
quita 2rem de ese valor calculado.

:root {
--root-height: 5rem;
}

.my-element {
width: calc(calc(10% + 2rem) * 2);
height: calc(var(--root-height) * 3);
}

La función calc() se puede anidar dentro de otra función calc(). También

puedes pasar propiedades personalizadas en una función var() como parte de
una expresión.

min() y max()

Navegadores compatibles

 79
 79
 75
 11.1

Origen
La función min() muestra el valor calculado más pequeño de uno o más
argumentos pasados. La función max() hace lo contrario: obtiene el valor más
alto de los argumentos que se pasaron.
.my-element {
width: min(20vw, 30rem);
height: max(20vh, 20rem);
}

En este ejemplo, el ancho debe ser el valor más pequeño entre 20vw, que es
el 20% del ancho del viewport, y 30rem. La altura debe ser el valor más alto
entre 20vh, que equivale al 20% de la altura de la ventana de
visualización, y 20rem.

Nota: Abordamos las unidades como vw y vh en el módulo de unidades de tamaño.

clamp()

Navegadores compatibles
  79
 79
 75
 13.1

Origen
La función clamp() toma tres argumentos: el tamaño mínimo, el ideal y el
máximo.
h1 {
font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

En este ejemplo, font-size será fluido según el ancho del viewport. La

unidad vw se agrega a una unidad rem para ayudar con el zoom de la
pantalla, ya que, independientemente del nivel de zoom, una
unidad vw tendrá el mismo tamaño. La multiplicación por una unidad rem,
según el tamaño de la fuente raíz, proporciona la función clamp() con un punto
de cálculo relativo.

Puedes obtener más información sobre las funciones min(), max() y clamp()
en este artículo.
Formas
Las propiedades de CSS clip-path, offset-path y shape-outside usan formas para
recortar visualmente tu cuadro o proporcionar una forma para que fluya el
contenido.
Hay funciones de forma que se pueden usar con ambas propiedades. Las
formas simples, como circle(), ellipse() y inset(), toman argumentos de
configuración para ajustar su tamaño. Las formas más complejas,
como polygon(), toman pares de valores del eje X e Y separados por comas
para crear formas personalizadas.
.circle {
clip-path: circle(50%);
}

.polygon {
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%,
0% 75%);
}

Al igual que polygon(), también hay una función path() que toma una regla de
relleno de SVG como argumento. Esto permite formas muy complejas que se
pueden dibujar en una herramienta de gráficos, como Illustrator o Inkscape, y
luego copiarse en tu CSS.
Transformaciones

Por último, en esta descripción general de las funciones CSS, están las
funciones de transformación, que sesgan, cambian el tamaño y hasta
cambian la profundidad de un elemento. Las siguientes funciones se usan con
la propiedad transform.

Rotación

Navegadores compatibles

 1
 12
 3.5
 3.1

Origen
Puedes rotar un elemento con la función rotate(), que rotará un elemento en
su eje central. También puedes usar las
funciones rotateX(), rotateY() y rotateZ() para rotar un elemento en un eje
específico. Puedes pasar unidades de grados, giros y radianes para
determinar el nivel de rotación.
.my-element {
transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

La función rotate3d() toma cuatro argumentos.

Navegadores compatibles

 12
 12
 10
 4

Origen

Los primeros 3 argumentos son números, que definen las coordenadas X, Y y

Z. El cuarto argumento es la rotación que, al igual que las otras funciones de
rotación, acepta grados, ángulos y giros.

.my-element {
transform: rotate3d(1, 1, 1, 10deg);
}

escalabilidad
Navegadores compatibles

 1
 12
 3.5
 3.1

Origen
Puedes cambiar el escalamiento de un elemento con transform y la
función scale(). La función acepta uno o dos números como valor que
determinan un escalamiento positivo o negativo. Si solo defines un argumento
numérico, tanto el eje X como el eje Y se escalarán de la misma manera y
definir ambos es una abreviatura de X e Y. Al igual que rotate(), hay
funciones scaleX(), scaleY() y scaleZ() para escalar un elemento en un eje
específico.
.my-element {
transform: scaleX(1.2) scaleY(1.2);
}

También hay una función scale3d(), como la rotate. Es similar a scale(), pero
toma tres argumentos: el factor de escala X, Y y Z.

Traductor

Navegadores compatibles

 1
 12
 3.5
 3.1

Origen
Las funciones translate() mueven un elemento mientras mantiene su posición
en el flujo del documento. Aceptan valores de longitud y porcentaje como
argumentos. La función translate() traduce un elemento a lo largo del eje X si
se define un argumento y traduce un elemento a lo largo de los ejes X e Y si
se definen ambos argumentos.
.my-element {
transform: translatex(40px) translatey(25px);
}

Puedes usar funciones específicas para un eje específico, al igual que con
otras funciones de transformación, mediante translateX, translateY y translateZ.
También puedes usar translate3d, que te permite definir la traslación de X, Y y
Z en una función.

Desviación
Navegadores compatibles

 1
 12
 3.5
 3.1

Origen
Puedes sesgar un elemento con las funciones skew() que aceptan los ángulos
como argumentos. La función skew() funciona de manera muy similar
a translate(). Si solo defines un argumento, solo afectará el eje X y, si defines
ambos, afectará al eje X e Y. También puedes usar skewX y skewY para
modificar cada eje de forma independiente.
.my-element {
transform: skew(10deg);
}

Perspectiva

Navegadores compatibles

 36
 12
 16
 9

Origen
Por último, puedes usar la propiedad perspective, que forma parte de la familia
de propiedades de transformación, para modificar la distancia entre el usuario
y el plano Z. Esto brinda la sensación de distancia y se puede utilizar para
crear una profundidad de campo en tus diseños.

En este ejemplo de David Desandro, de su artículo muy útil, se muestra cómo

se puede usar, junto con las propiedades perspective-origin-x y perspective-
origin-y para crear experiencias realmente 3D.

Funciones de animación, gradientes y filtros

CSS también proporciona funciones que te ayudan a animar elementos,
aplicarles gradientes y usar filtros gráficos para manipular su apariencia. Para
que este módulo sea lo más conciso posible, se abordan en los módulos
vinculados. Todos siguen una estructura similar a las funciones que se
mostraron en este módulo.

Verifica tus conocimientos

Pon a prueba tu conocimiento sobre funciones

¿A través de qué caracteres se pueden identificar las funciones de CSS?

{}

[]

::

()

¿CSS tiene funciones matemáticas integradas?

Falso
Verdadero

Se puede colocar una función calc() dentro de otra calc(), como font-size:
calc(10px + calc(5px * 3));

Falso
Verdadero

¿Cuáles de las siguientes son funciones de forma CSS?

polygon()

circle()

square()

ellipse()

rect()

inset()
Gradientes
bookmark_border
El podcast de CSS 021: Gradientes

Imagina que tienes un sitio para crear y, en la parte superior, hay una
introducción con un encabezado, un resumen y un botón. El diseñador
entregó un diseño con fondo púrpura para esta introducción. El único
problema es que el fondo presenta dos tonos de púrpura como gradiente.
¿Cómo lo haces?

Al principio, podrías pensar que deberás exportar una imagen desde tu

herramienta de diseño para hacerlo, pero, en su lugar, puedes usar un linear-
gradient.

Un gradiente es una imagen y se puede usar en cualquier lugar donde se

puedan usar imágenes, pero se crea con CSS y contiene colores, números y
ángulos. Los gradientes de CSS te permiten crear lo que quieras, desde un
gradiente suave entre dos colores hasta material gráfico impresionante
mezclando y repitiendo varios gradientes.

Gradiente lineal

Navegadores compatibles

 26
  12
 16
 7

Origen
La función linear-gradient() genera una imagen de dos o más colores, de forma
progresiva. Toma varios argumentos, pero en su configuración más simple,
puedes pasar algunos colores como este y los dividirá automáticamente de
manera uniforme y los combinará.
.my-element {
background: linear-gradient(black, white);
}

También puedes pasar un ángulo o palabras clave que representen uno. Si

eliges usar palabras clave, especifica una dirección después de la palabra
clave to. Esto significa que, si deseas un gradiente de blanco y negro, que se
extienda de izquierda (negro) a derecha (blanco), debes especificar el ángulo
como to right como primer argumento.

.my-element {
background: linear-gradient(to right, black, white);
}

Es un valor de finalización de color definido donde se detiene un color y se

mezcla con sus vecinos. Para un gradiente que comienza con un tono de rojo
oscuro que se ejecuta en un ángulo de 45 grados, al 30% del tamaño del
gradiente cambia a un rojo más claro: se ve así.

.my-element {
background: linear-gradient(45deg, darkred 30%, crimson);
}

Puedes agregar tantos colores y elementos de color como quieras en

una linear-gradient() y puedes superponer gradientes una encima de la otra
separando cada uno de ellos con una coma.

Gradiente radial

Navegadores compatibles

 26
 12
 16
 7
Origen
Para crear un gradiente que se irradia de forma circular, la función radial-
gradient() interviene para ayudarte. Es similar a linear-gradient(), pero, en lugar
de especificar un ángulo, puedes optar por una posición y una forma final. Si
solo especificas colores, radial-gradient() seleccionará automáticamente la
posición como center y seleccionará un círculo o una elipse, según el tamaño
del cuadro.
.my-element {
background: radial-gradient(white, black);
}

La posición del gradiente es similar a background-position cuando se usan

palabras clave o valores numéricos. El tamaño del gradiente radial determina
el tamaño de la forma final del gradiente (círculo o elipse) y, de forma
predeterminada, será farthest-corner, lo que significa que se cumple
exactamente con la esquina más lejana del cuadro respecto del centro.
También puedes utilizar las siguientes palabras clave:

 closest-corner se encontrará con la esquina más cercana al centro del

gradiente.
 closest-side se encontrará con el lado del cuadro más cercano al centro del
gradiente.
 farthest-side hará lo contrario a closest-side.

Puedes agregar tantas marcas de color como desees, como con linear-gradient.
Del mismo modo, puedes agregar todos los radial-gradients que desees.

Gradiente cónico

Navegadores compatibles

 69
 79
 83
 12.1

Origen

Un gradiente cónico tiene un punto central en el cuadro que comienza desde

la parte superior (de forma predeterminada) y gira en un círculo de 360
grados.

.my-element {
background: conic-gradient(white, black);
}

La función conic-gradient() acepta argumentos de posición y ángulo.

De forma predeterminada, el ángulo es de 0 grados, que comienza en la parte
superior y en el centro. Si quisieras establecer el ángulo en 45deg, sería la
esquina superior derecha. El argumento de ángulo acepta cualquier tipo de
valor de ángulo, como los gradientes lineal y radial.

De forma predeterminada, la posición es central. Al igual que con los

gradientes radiales y lineales, el posicionamiento puede basarse en palabras
clave o se puede definir con valores numéricos.

Puedes agregar tantas opciones de color como desees, como con otros tipos
de gradientes. Un buen caso de uso para esta función, con gradientes cónicos,
es la representación de gráficos circulares con CSS.

Repetir y mezclar
Cada tipo de gradiente también tiene un tipo repetido. Estos son repeating-
linear-gradient(), repeating-radial-gradient() y repeating-conic-gradient(). Son
similares a las funciones no repetitivas y toman los mismos argumentos. La
diferencia es que si el gradiente definido se puede repetir para llenar el
cuadro, según ambos tamaños, lo hará.

Si tu gradiente no se repite, es probable que no hayas establecido una

longitud para uno de los elementos stop de color. Por ejemplo, puedes crear
un fondo a rayas con un repeating-linear-gradient mediante la configuración de
longitudes de parada de color.

.my-element {
background: repeating-linear-gradient(
45deg,
red,
red 30px,
white 30px,
white 60px
);
}

También puedes mezclar funciones de gradiente en las propiedades

de background y definir tantos gradientes como desees, tal como lo harías con
una imagen de fondo. Por ejemplo, puedes mezclar múltiples gradientes
lineales o dos gradientes lineales con un gradiente radial.

Recursos
 [Link]: una colección útil de gradientes cónicos.
 Guía de MDN sobre los gradientes
 Generador de gradientes

Verifica tus conocimientos

Poner a prueba tus conocimientos sobre gradientes

¿Cuál es la cantidad mínima de colores necesaria para crear un gradiente?

3
4
2
1

¿Los elementos pueden tener varios gradientes como fondo?

Verdadero
Falso
Animaciones
bookmark_border

La animación es una excelente manera de destacar elementos interactivos y

agregar interés y diversión a tus diseños. En este módulo, aprenderás a
agregar y controlar efectos de animación con CSS.

A veces, verás pequeños asistentes en las interfaces que, cuando se hace clic
en ellos, proporcionan información útil sobre esa sección en particular. A
menudo, tienen una animación intermitente que te informa de forma sutil que
la información está allí y que se debe interactuar con ella. ¿Cómo lo hacemos
con CSS?

En CSS, puedes realizar este tipo de animación con animaciones de CSS, que
te permiten establecer una secuencia de animación mediante fotogramas
clave. Las animaciones pueden ser simples, de un estado o incluso secuencias
complejas basadas en el tiempo.

¿Qué es un fotograma clave?

En el software de animación, CSS y la mayoría de las otras herramientas que

te permiten animar algo, los fotogramas clave son el mecanismo que utilizas
para asignar estados de animación a las marcas de tiempo, a lo largo de un
cronograma.

Usemos "pulser" como contexto para esto. Toda la animación se ejecuta

durante 1 segundo y abarca 2 estados.
Hay un punto específico donde comienza y termina cada uno de estos estados
de animación. Ubica estos elementos en el cronograma con fotogramas clave.

@keyframes

Navegadores compatibles

 43
 12
 16
 9

Origen
Ahora que sabes qué es un fotograma clave, ese conocimiento debería
ayudarte a comprender cómo funciona la regla @keyframes de CSS. Esta es
una regla básica con dos estados.
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}

La primera parte que debes tener en cuenta es el identificador

personalizado (identificador personalizado) o, en términos más humanos, el
nombre de la regla de fotogramas clave. El identificador de esta regla es my-
animation. El identificador personalizado funciona como un nombre de función.
Como viste en el módulo de funciones, te permite hacer referencia a la regla
de fotogramas clave en otra parte del código CSS.
Nota: Un <custom-ident> se usa en varios lugares del CSS y te permite
proporcionarle tu propio nombre para los elementos. Estos identificadores distinguen
mayúsculas de minúsculas y, en algunos casos, hay palabras que no puedes usar.
Por ejemplo, cuando asignas nombres a líneas en la cuadrícula de CSS, no puedes
usar la palabra span.

Dentro de la regla de fotogramas clave, from y to son palabras clave que

representan 0% y 100%, que son el inicio y el final de la animación. Podrías
volver a crear la misma regla de la siguiente manera:

@keyframes my-animation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}

Puedes agregar todos los puestos que desees durante el período. Si usamos el
contexto del ejemplo de "pulser", hay 2 estados, que se traducen en 2
fotogramas clave. Esto significa que hay 2 posiciones dentro de la regla de
fotogramas clave para representar los cambios de cada uno de ellos.

@keyframes pulse {
0% {
opacity: 0;
}
50% {
transform: scale(1.4);
opacity: 0.4;
}
}

Las propiedades de animation

Navegadores compatibles

 43
  12
 16
 9

Origen
Para usar tu @keyframes en una regla de CSS, define varias propiedades de
animación o utiliza la propiedad de abreviatura animation.

animation-duration

Navegadores compatibles

 43
 12
 16
 9

Origen
.my-element {
animation-duration: 10s;
}

La propiedad animation-duration define cuánto debe durar el

cronograma @keyframes. Debe ser un valor de tiempo. El valor
predeterminado es de 0 segundos, lo que significa que la animación aún se
ejecuta, pero será demasiado rápido para que la veas. No puedes agregar
valores de tiempo negativos.

animation-timing-function

Navegadores compatibles

 43
 12
 16
 9

Origen

Para ayudar a recrear el movimiento natural en la animación, puedes usar

funciones de sincronización que calculan la velocidad de una animación en
cada punto. Los valores calculados suelen ser curvos, lo que hace que la
animación se ejecute a velocidades variables en el transcurso de animation-
duration y, si un valor se calcula más allá del valor definido en @keyframes,
hace que el elemento parezca rebotar.
Hay varias palabras clave disponibles como ajustes predeterminados en CSS
que se usan como valor de animation-timing-function: linear, ease, ease-
in, ease-out y ease-in-out.
.my-element {
animation-timing-function: ease-in-out;
}

Los valores parecen curvarse con las funciones de aceleración porque la

aceleración se calcula con una curva Bézier, que se usa para modelar la
velocidad. Cada una de las palabras clave de la función de sincronización,
como ease, hace referencia a una curva Bézier predefinida. En CSS, puedes
definir una curva Bézier directamente con la función cubic-bezier(), que acepta
cuatro valores numéricos: x1, y1, x2 y y2.

.my-element {
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

Estos valores trazan cada parte de la curva a lo largo de los ejes X e Y.

Comprender las curvas Bézier es complicada y las herramientas visuales,
como este generador de Lea Verou, son muy útiles.

La función de aceleración steps

A veces, es posible que desees tener un control más detallado de tu

animación y, en lugar de moverte por una curva, quieras moverte en
intervalos. La función de aceleración steps() te permite dividir el cronograma
en intervalos iguales definidos.

.my-element {
animation-timing-function: steps(10, end);
}

El primer argumento es cuántos pasos. Si los pasos se definen como 10 y hay

10 fotogramas clave, cada uno se reproducirá en secuencia durante el tiempo
exacto, sin transición entre estados. Si no hay suficientes fotogramas clave
para los pasos, se agregan los pasos entre ellos según el segundo argumento.

El segundo argumento es la dirección. Si está configurado como end, que es el

valor predeterminado, los pasos finalizarán al final del cronograma. Si se
establece en start, el primer paso de la animación se completa en cuanto
comienza, lo que significa que finaliza un paso antes que end.

animation-iteration-count

Navegadores compatibles

 43
 12
 16
 9

Origen
.my-element {
animation-iteration-count: 10;
}

La propiedad animation-iteration-count define cuántas veces se debe ejecutar

el cronograma de @keyframes. El valor predeterminado es 1, lo que significa
que, cuando la animación llegue al final del cronograma, se detendrá al final.
El número no puede ser negativo.

Puedes usar la palabra clave infinite, que repetirá la animación

indefinidamente, que es el funcionamiento de la demostración "pulser" del
comienzo de esta lección.
animation-direction

Navegadores compatibles

 43
 12
 16
 9

Origen
.my-element {
animation-direction: reverse;
}

Puedes establecer la dirección en la que se ejecutará el cronograma en tus

fotogramas clave con animation-direction:
 normal: Es el valor predeterminado, que se reenvía.
 reverse: Se ejecuta hacia atrás en la línea de tiempo.
 alternate: Para cada iteración de animación, el cronograma se ejecutará hacia
delante o hacia atrás en secuencia.
 alternate-reverse: Es lo contrario a alternate.

animation-delay

Navegadores compatibles

 43
 12
 16
 9

Origen
.my-element {
animation-delay: 5s;
}

La propiedad animation-delay define cuánto tiempo esperar antes de iniciar la

animación. Al igual que la propiedad animation-duration, acepta un valor de
tiempo.

A diferencia de la propiedad animation-duration, puedes definirlo como un valor

negativo. Si estableces un valor negativo, el cronograma de
tu @keyframes comenzará en ese momento. Por ejemplo, si tu animación dura
10 segundos y estableces animation-delay en -5s, comenzará desde la mitad de
la línea de tiempo.
animation-play-state

Navegadores compatibles

 43
 12
 16
 9

Origen
.my-element:hover {
animation-play-state: paused;
}

La propiedad animation-play-state te permite reproducir y pausar la

animación. El valor predeterminado es running y, si lo estableces en paused, se
detendrá la animación.

animation-fill-mode

Navegadores compatibles

 43
 12
 16
 9

Origen
La propiedad animation-fill-mode define qué valores en tu cronograma
de @keyframes se conservan antes de que comience la animación o después
de que finalice. El valor predeterminado es none, lo que significa que, cuando
se completa la animación, se descartan los valores de tu cronograma. No
obstante, también se ofrecen las siguientes opciones:
 forwards: Se conservará el último fotograma clave según la dirección de la
animación.
 backwards: Se conservará el primer fotograma clave según la dirección de la
animación.
 both: Sigue las reglas de forwards y backwards.

La abreviatura animation

En lugar de definir todas las propiedades por separado, puedes definirlas con
una abreviatura animation, lo que te permite definir las propiedades de la
animación en el siguiente orden:

1. animation-name
 2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

.my-element {
animation: my-animation 10s ease-in-out 1s infinite forwards forwards
running;
}

Aspectos que debes tener en cuenta para trabajar con animación

Los usuarios pueden definir en su sistema operativo que prefieran reducir el
movimiento experimentado cuando interactúan con aplicaciones y sitios web.
Esta preferencia se puede detectar con la consulta de medios prefers-
reduced-motion.
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}

No es necesariamente una preferencia de ausencia de animación, sino una

preferencia para reducir las animaciones, especialmente las inesperadas.
Puedes obtener más información sobre esta preferencia y el rendimiento
general en esta guía de animación.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre animaciones

¿El nombre o identificador personalizado de una

animación @keyframes distingue mayúsculas de minúsculas?

Verdadero
Falso

Las palabras clave from y to son iguales a

0y1
0% y 100%.
start y end.
El animation-timing-function también se conoce comúnmente como

Easing
Tiempos dinámicos
Delay

¿Cuál es la cantidad mínima de fotogramas clave que se requieren dentro de

una animación @keyframes?

3
4
1
2
Filtros
bookmark_border
El podcast de CSS (023: Filters)

Supongamos que necesitas compilar un elemento que tenga un efecto de

vidrio esmerilado un poco opaco sobre la parte superior de una imagen. El
texto debe ser texto activo, no una imagen. ¿Cómo puede hacerlo?

Una combinación de filtros CSS y backdrop-filter nos permite aplicar efectos y

desenfocar lo necesario en tiempo real. El desenfoque y la opacidad son dos
de los muchos filtros disponibles, así que veamos rápidamente qué hacen
todos y cómo usarlos.

Nota: Cuando coloques texto sobre las imágenes, asegúrate de que el texto sea
legible en caso de que el navegador del usuario no sea compatible con el efecto de
filtro. Por ejemplo, por el momento, backdrop-filter no es compatible con Firefox,
por lo que deberías comprobar que a los usuarios de Firefox no les quede texto que
no puedan leer fácilmente:

Navegadores compatibles

 76
 17
 103
 9

Origen
La propiedad filter
Navegadores compatibles

 53
 12
 35
 9.1

Origen
Puedes aplicar uno o muchos de los siguientes filtros como valor para filter. Si
aplicas un filtro de forma incorrecta, el resto de los filtros definidos
para filter no funcionarán.

blur
De esta manera, se aplica un desenfoque gaussiano y el único argumento que
puedes pasar es un radius, que es cuánto desenfoque se aplica. Debe ser una
unidad de longitud, como 10px. No se aceptan los porcentajes.
.my-element {
filter: blur(0.2em);
}

brightness

Navegadores compatibles

 18
 12
 35
 6

Origen

Para aumentar o disminuir el brillo de un elemento, usa la función de brillo. El

valor de brillo se expresa como un porcentaje y la imagen sin cambios se
expresa en un valor del 100%. Un valor del 0% convierte la imagen por
completo en negro; por lo tanto, los valores entre el 0% y el 100% la hacen
menos brillante. Usa valores superiores a 100% para aumentar el brillo.

.my-element {
filter: brightness(80%);
}

Nota: También puedes usar valores decimales, en lugar de valores porcentuales, en

filtros como brightness. Para establecer el brillo en un 80% con un decimal,
escribe 0.8.

contrast

Navegadores compatibles

 18
 12
 35
 6

Origen

Establece un valor entre 0% y 100% para disminuir o aumentar el contraste,

respectivamente.
.my-element {
filter: contrast(160%);
}

grayscale

Navegadores compatibles

 18
 12
 35
 6

Origen

Puedes aplicar un efecto en escala de grises por completo si usas 1 como

valor de grayscale(), o bien 0 para tener un elemento completamente
saturado. También puedes usar valores porcentuales o decimales para aplicar
solo un efecto parcial en escala de grises. Si no pasas argumentos, el
elemento estará completamente en escala de grises. Si pasas un valor
superior al 100%, se limitará al 100%.

.my-element {
filter: grayscale(80%);
}

invert

Navegadores compatibles

 18
 12
 35
 6

Origen

Al igual que grayscale, puedes pasar 1 o 0 a la función invert() para activarla o

desactivarla. Cuando está activada, los colores del elemento se invierten por
completo. También puedes usar valores porcentuales o decimales para aplicar
solo una inversión parcial de los colores. Si no pasas ningún argumento a la
función invert(), el elemento se invertirá por completo.

.my-element {
filter: invert(1);
}

opacity

Navegadores compatibles

 18
 12
 35
 6

Origen

El filtro opacity() funciona de la misma manera que la propiedad opacity, en la

que puedes pasar un número o porcentaje para aumentar o reducir la
opacidad. Si no pasas argumentos, el elemento se vuelve completamente
visible.

.my-element {
filter: opacity(0.3);
}

saturate

Navegadores compatibles

 18
 12
 35
 6

Origen

El filtro de saturación es muy similar al filtro brightness y acepta el mismo

argumento: número o porcentaje. En lugar de aumentar o disminuir el efecto
de brillo, saturate aumenta o disminuye la saturación de color.

.my-element {
filter: saturate(155%);
}

sepia

Navegadores compatibles
  18
 12
 35
 6

Origen

Puedes agregar un efecto de tono sepia con este filtro que funciona
como grayscale(). El tono sepia es una técnica de impresión fotográfica que
convierte los tonos negros en tonos marrones para entrar en calor. Puedes
pasar un número o porcentaje como argumento de sepia(), lo que aumenta o
disminuye el efecto. Si no pasas ningún argumento, se agrega un efecto sepia
completo (equivalente a sepia(100%)).

.my-element {
filter: sepia(70%);
}

hue-rotate

Navegadores compatibles

 18
 12
 35
 6

Origen
En la lección de colores, aprendiste que el matiz de hsl hace referencia a una
rotación de la rueda de colores y que este filtro funciona de manera similar. Si
pasas un ángulo, como grados o giros, se modifica el matiz de todos los
colores del elemento y la parte de la rueda de colores a la que hace
referencia. Si no pasas ningún argumento, no pasa nada.
.my-element {
filter: hue-rotate(120deg);
}

drop-shadow

Navegadores compatibles

 18
 12
 35
  6

Origen
Puedes aplicar una sombra paralela con curvas como lo harías en una
herramienta de diseño, como Photoshop con drop-shadow. Esta sombra se
aplica a una máscara alfa que la hace muy útil para agregar una sombra a
una imagen recortada. El filtro drop-shadow toma un parámetro de sombra que
contiene valores de offset-x, offset-y, desenfoque y color separados por
espacios. Es casi idéntico a box-shadow, pero no se admiten la palabra
clave inset ni el valor de distribución.
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}

Obtén más información sobre los diferentes tipos de sombras en el

módulo shadows.

url

Navegadores compatibles

 5
 12
 3
 6

Origen
El filtro url te permite aplicar un filtro SVG de un elemento o archivo SVG
vinculado. Puedes obtener más información sobre los filtros de SVG aquí.
Filtro de fondo

Navegadores compatibles

 76
 17
 103
 9

Origen
La propiedad backdrop-filter acepta los mismos valores de funciones de filtro
que filter. La diferencia entre backdrop-filter y filter es que la
propiedad backdrop-filter solo aplica los filtros al fondo, en el que la
propiedad filter se aplica a todo el elemento.

El ejemplo que aparece al comienzo de esta lección es el ejemplo perfecto, ya

que no es conveniente que el texto se difumine, ni tampoco debes agregar
elementos HTML adicionales. Poder aplicar filtros solo al fondo permite
hacerlo.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre filtros

¿Cuáles de las siguientes son funciones de filtro de CSS?

brightness()

grayscale()

invert()

flip()

multiply()

blur()

¿El CSS puede usar filtros SVG?

No
Sí
Modos de fusión
bookmark_border
El podcast de CSS 024: Blend Modes
Duotone es un tratamiento de color popular para fotografía que hace que una imagen parezca que
solo está formada por dos colores contrastantes: uno para zonas brillantes y otro para las zonas con
poca luz. ¿Cómo lo hacemos con CSS?
Con los modos de combinación y otras técnicas que aprendiste, como los filtros y
los pseudoelementos, puedes aplicar este efecto a cualquier imagen.
¿Qué es un modo de fusión?

Los modos de fusión se usan comúnmente en herramientas de diseño, como Photoshop, para crear
un efecto de composición combinando colores de dos o más capas. Cambiar la mezcla de colores
te permite lograr efectos visuales muy interesantes. También puedes usar modos de combinación
como utilidad, como aislar una imagen que tiene un fondo blanco, para que parezca que tiene un
fondo transparente.

Puedes usar la mayoría de los modos de combinación disponibles en una herramienta de diseño
con CSS, mediante las propiedades mix-blend-mode o background-blend-mode. El mix-
blend-mode aplica la combinación a un elemento completo, y el background-blend-
mode aplica la combinación al fondo de un elemento.

Usas background-blend-mode cuando tienes varios fondos en un elemento y quieres que todos
se combinen entre sí.

mix-blend-mode afecta a todo el elemento, incluidos sus seudoelementos. Un caso práctico se

da en el ejemplo inicial de una imagen en dos tonos, que tiene capas de color aplicadas al
elemento a través de sus seudoelementos.

Los modos de fusión se dividen en dos categorías: separables y no separables. Un modo de

combinación separable considera cada componente de color, como RGB, de forma individual. Un
modo de combinación no separable considera todos los componentes de color por igual.

Compatibilidad del navegador

mix-blend-mode

Navegadores compatibles

 41
 79
 32
 8

Origen

background-blend-mode
Navegadores compatibles

 35
 79
 30
 8

Origen
Modos de combinación separables
Normal

Este es el modo de fusión predeterminado y no cambia nada sobre cómo un elemento se combina
con otros.

Multiplicar

El modo de combinación multiply es como apilar varias transparencias una encima de la otra. Los
píxeles blancos parecerán transparentes y los negros, negros. Cualquier valor intermedio
multiplicará sus valores de luminosidad (luz). Esto significa que las luces se vuelven mucho más
claras, oscuras y oscuras, lo que suele producir un resultado más oscuro.

.my-element {
mix-blend-mode: multiply;
}

Pantalla

El uso de screen multiplica los valores de luz, un efecto inverso a multiply, y suele producir un
resultado más brillante.

.my-element {
mix-blend-mode: screen;
}

Superposición

Este modo de fusión, overlay, combina multiply y screen. Los colores oscuros base se vuelven
más oscuros y los claros base se vuelven más claros. Los colores de gama media, como el gris al
50%, no se ven afectados.

.my-element {
mix-blend-mode: overlay;
}
Oscurecer

El modo de combinación darken compara la luminosidad del color oscuro de la imagen de origen
y de fondo y selecciona el más oscuro. Para ello, se comparan los valores de RGB en lugar de la
luminosidad (como lo harían multiply y screen) para cada canal de color.
Con darken y lighten, se suelen crear nuevos valores de color a partir de este proceso de
comparación.

.my-element {
mix-blend-mode: darken;
}

Aclarar

Usar lighten hace exactamente lo opuesto a darken.

.my-element {
mix-blend-mode: lighten;
}

Sobreexposición de color

Si usas color-dodge, se aclara el color de fondo para reflejar el color de origen. Los colores
negro puro no generan ningún efecto con este modo.

.my-element {
mix-blend-mode: color-dodge;
}

Quemado de color

El modo de combinación color-burn es muy similar al modo de combinación multiply, pero

aumenta el contraste, lo que genera tonos medios más saturados y reflejos más bajos.

.my-element {
mix-blend-mode: color-burn;
}

Luz fuerte

Si usas hard-light, se crea un contraste intenso. Este modo de fusión filtra o multiplica los valores
de luminosidad. Si el valor de píxeles es más claro que un gris del 50%, la imagen se aclara, como
si estuviera filtrada. Si es más oscuro, se multiplica.
.my-element {
mix-blend-mode: hard-light;
}

Luz suave

El modo de combinación soft-light es una versión menos severa de overlay. Funciona

prácticamente de la misma manera con menos contraste.

.my-element {
mix-blend-mode: soft-light;
}

Diferencia

Una buena manera de imaginar cómo funciona difference es similar al funcionamiento de un

negativo de foto. El modo de combinación difference toma el valor de la diferencia de cada
píxel, lo que invierte los colores de la luz. Si los valores de color son idénticos, se vuelven negros.
Se invertirán las diferencias en los valores.

.my-element {
mix-blend-mode: difference;
}

Exclusión

El uso de exclusion es muy similar a difference, pero en lugar de mostrar negro para píxeles
idénticos, mostrará un 50% de gris, lo que da como resultado un resultado más suave con menos
contraste.

.my-element {
mix-blend-mode: exclusion;
}

Modos de combinación no separables

Puedes pensar en estos modos de combinación como componentes de color de HSL. Cada uno
toma un valor de componente específico de la capa activa y lo combina con otros valores de
componente.

Hue

El modo de combinación hue toma el tono del color de origen y lo aplica a la saturación y la
luminosidad del color del fondo.
.my-element {
mix-blend-mode: hue;
}

Saturación

Esto funciona como hue, pero si usas saturation como modo de combinación, se aplica la
saturación del color de origen al tono y la luminosidad del color de fondo.

.my-element {
mix-blend-mode: saturation;
}

Color

El modo de combinación color creará un color a partir del tono y la saturación del color de origen,
y la luminosidad del color de fondo.

.my-element {
mix-blend-mode: color;
}

Luminosidad

Por último, luminosity es lo contrario a color. Crea un color con la luminosidad del color de
origen y el matiz y la saturación del color de fondo.

.my-element {
mix-blend-mode: luminosity;
}

La propiedad isolation
Navegadores compatibles

 41
 79
 36
 8

Origen
Si configuras la propiedad isolation para que tenga un valor de isolate, se creará un nuevo
contexto de apilado, lo que impedirá que se combine con una capa de fondo. Como aprendiste en
el módulo de índice z, cuando creas un nuevo contexto de apilado, esa capa se convierte en la capa
base. Esto significa que los modos de combinación a nivel superior ya no se aplicarán, pero los
elementos dentro de un elemento con isolation: isolate establecido pueden aún combinarse.

Ten en cuenta que esto no funciona con background-blend-mode porque la propiedad en

segundo plano ya está aislada.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre los modos mixtos

¿Cuáles de las siguientes opciones son modos de combinación de CSS?

Aclarar

Dullen

Multiplicar

Superposición

Diferencia

Aclarar

Si quieres combinar diferentes colores de diferentes maneras, ¿qué estilo de modo de combinación
necesitas?

No separable

Separables
¿Te resultó útil?
Listas
bookmark_border
El podcast de CSS - 030: Listas

Imagine que tiene un montón de artículos que planea comprar la próxima vez
que vaya al supermercado. Una forma común de representar esto
visualmente es con una lista, pero ¿cómo puedes agregarle un estilo a tu lista
de compras?

<ul>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ul>

Cómo crear una lista

La lista anterior comenzó con un elemento semántico, o <ul>, con los

artículos de la lista de compras (elementos <li>) como elementos
secundarios. Si inspeccionas cada elemento <li>, podrás ver que todos
tienen display: list-item, por lo que el navegador renderiza un ::marker de forma
predeterminada.

li {
display: list-item;
}

Existen otros dos tipos de listas.

Se pueden crear listas ordenadas con <ol>, en cuyo caso el elemento de la

lista mostrará un número como ::marker.

<ol>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ol>

Además, las listas de descripciones se crean con <dl>; sin embargo, este tipo
de lista no usa el elemento de elemento de lista <li>.
<dl>
<dt>oat milk</dt>
<dd>- non dairy trendy drink</dd>
<dt>cereal</dt>
<dd>- breakfast food</dd>
</dl>

Estilos de lista

Navegadores compatibles

 1
 12
 1
 1

Origen

Ahora que sabes cómo crear una lista, puedes definir el estilo. Las primeras
propiedades de CSS que se descubren son aquellas que se aplican a toda la
lista.

Existen tres propiedades de estilo de lista que puedes usar para definir el
diseño de tu ejemplo: list-style-position, list-style-image y list-style-type.

list-style-position

list-style-position te permite mover la viñeta a inside o outside del contenido del

elemento de la lista. El outside predeterminado significa que la viñeta no se
incluye en el contenido de los elementos de la lista, mientras
que inside mueve el primer elemento entre el contenido del elemento de la
lista.

list-style-image
list-style-image te permite reemplazar las viñetas de tu lista por imágenes.
Esto te permite configurar una imagen, como url o none, para que tus viñetas
sean incluso imágenes, svg o gif. También puedes usar cualquier tipo de
medio o incluso un URI de datos.

Veamos cómo podemos agregar una imagen de cada uno de nuestros

artículos de supermercado como list-style-image:

Nota: Esta propiedad es un poco limitada en cuanto al control de la posición y el

tamaño de las viñetas, por lo que recomendamos usar la propiedad ::marker para un
enfoque más personalizable.

list-style-type

La última opción es aplicar un estilo a list-style-type, que cambia las viñetas

por palabras clave de estilo conocidas, strings personalizadas, emojis y mucho
más. Puede consultar todos los tipos de estilo de lista posibles aquí.

Abreviatura de list-style

Ahora que tienes todas estas propiedades individuales, puedes usar la

abreviatura list-style para configurar todos los estilos de lista en una línea:
list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-
image'>

list-style te permite declarar combinaciones de una, dos o tres de las

propiedades list-style en cualquier orden. Si se configuran list-style-type y list-
style-image, se usa list-style-type como resguardo en caso de que la imagen no
esté disponible.

/* type */
list-style: square;

/* image */
list-style: url('../img/[Link]');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */

list-style: lower-roman url('../img/[Link]') outside;

/* Keyword value */
list-style: none;
/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

Esta es la propiedad más usada de los estilos de lista que se analizan en esta
sección. Una aplicación común es list-style: none para ocultar los estilos
predeterminados. Los estilos predeterminados provienen del navegador y,
con frecuencia, verás que el restablecimiento de las hojas de estilo quita los
estilos de lista, como el relleno y los márgenes. También puedes usar esta
abreviatura para establecer estilos, como list-style: square inside;

Hasta ahora, los ejemplos se han centrado en diseñar una lista completa y los
elementos de una lista, pero ¿qué sucede con un enfoque más detallado?

Pseudoelemento ::marker
El elemento marcador list-item es la viñeta, el guion o el número romano que
ayuda a indicar cada elemento de la lista.

Si inspeccionas la lista en Herramientas para desarrolladores, puedes ver un

elemento ::marker para cada uno de los elementos de la lista, a pesar de no
declarar ninguno en HTML. Si inspeccionas ::marker más a fondo, verás el
estilo predeterminado del navegador para ese elemento.

::marker {
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
text-transform: none;
 text-indent: 0px !important;
text-align: start !important;
text-align-last: start !important;
}

Cuando declaras una lista, a cada elemento se le asigna un marcador, a pesar

de que no haya viñetas ni números romanos en tu código HTML. Este es un
seudoelemento porque el navegador lo genera por ti y proporciona una API de
estilo limitada para segmentarlo. Obtén más información sobre la anatomía
de la viñeta de CSS. ::marker tiene compatibilidad limitada en Safari.

Cuadro de marcadores

En el modelo de diseño de CSS, los marcadores de los elementos de lista se

representan mediante un cuadro de marcadores asociado con cada elemento.
El cuadro de marcador es el contenedor que suele contener la viñeta o el
número.

Para definir el diseño del cuadro de marcador, puedes usar el

selector ::marker. Esto te permite seleccionar solo el marcador, en lugar de
aplicar un estilo basado en toda la lista.

Nota: Nota: Los elementos ::marker preceden a los pseudoelementos que insertaste
con CSS ::before.

Estilos de marcador

Ahora que seleccionaste el marcador, veamos las propiedades de diseño

disponibles para este selector. Puedes obtener más información sobre
las viñetas personalizadas con CSS ::marker en [Link].

Hay varias propiedades ::marker de CSS permitidas:

 animation-*
 transition-*
 color
 direction
 font-*
 content
 unicode-bidi
 white-space
Nota: En las listas ordenadas, las viñetas se muestran de forma predeterminada en
números. El valor de contenido ::marker es un caso de uso de contadores para crear
numeración personalizada.
Tipo de visualización

Todas nuestras propiedades list-style y ::marker saben dar estilo a los

elementos <li> porque tienen un valor de visualización predeterminado de
list-item. También puedes convertir elementos que no sean <li> en elementos
de lista.

Para ello, agrega la propiedad display: list-item. Un ejemplo del uso de display:
list-item es si deseas una viñeta pendiente en un encabezado, de modo que
puedas cambiarlo a otra cosa con ::marker. En el siguiente ejemplo, se
muestra un encabezado que usa display: list-item para dar estilo, con una lista
que usa el lenguaje de marcado de lista correcto.

Si bien puedes convertir cualquier cosa en una vista de elementos de lista

con display, no debes usarla en lugar de usar el lenguaje de marcado de lista
correcto si el contenido al que le aplicas el estilo es realmente una lista.
Cambiar la apariencia visual de un elemento por uno no cambia la forma en
que los servicios de accesibilidad leen y reconocen el elemento, por lo que no
se leerá como un elemento de lista en los lectores de pantalla ni en los
dispositivos de conmutación. Siempre debes usar el lenguaje de marcado
semántico y crear listas con <li> siempre que sea posible.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre las listas

El elemento que precede a un elemento de la lista se denomina

::marcador
::lápiz
::contador
::viñeta

Los tres tipos de listas HTML son

<ol>
<ul>
<list>
<lo>
<dl>
<li>

¿Qué estilos de la lista aplicarán diseños a un marcador ::?

display
background-color
transition
color

Recursos
 Guía de MDN sobre listas de diseño
 Viñetas personalizadas con CSS ::marker
 Smashing Magazine: Listas, marcadores y contadores de CSS
 MDN con contadores de CSS
 Nivel 3 del módulo de listas y contadores de CSS
 Trucos de CSS: Cómo contar con contadores de CSS y cuadrículas de CSS
Transiciones
bookmark_border
El podcast de CSS 044: Transiciones

Al interactuar con un sitio web, es posible que notes que muchos elementos
tienen state. Por ejemplo, los menús desplegables pueden estar abiertos o
cerrados. Es posible que el color de los botones cambie cuando se enfoca o
cuando se coloca el cursor sobre ellos. Los modales aparecen y desaparecen.

De forma predeterminada, CSS cambia el estilo de estos estados al instante.

Con las transiciones de CSS, podemos interpolar entre el estado inicial y el

estado objetivo del elemento. La transición entre ambos mejora la experiencia
del usuario al proporcionar orientación visual, soporte e indicios sobre la
causa y el efecto de la interacción.

Término clave: La interpolación es el proceso de crear pasos "intermedios" que

hacen una transición fluida de un estado a otro.

Propiedades de transición

Navegadores compatibles

 26
 12
 16
 9

Origen

Para usar transiciones en CSS, puedes utilizar las distintas propiedades de

transición o la propiedad de abreviatura transition.

propiedad-de-transición

La propiedad transition-property especifica qué estilos se deben realizar la

transición.
.my-element {
transition-property: background-color;
}

El elemento transition-property acepta uno o más nombres de propiedades CSS

en una lista separada por comas.

De manera opcional, puedes usar transition-property: all para indicar que todas
las propiedades deben realizar la transición.
duración de la transición

La propiedad transition-duration se usa para definir el tiempo que tardará una

transición en completarse.

transition-duration acepta unidades de tiempo, ya sea en segundos ( s) o

milisegundos (ms), y el valor predeterminado es 0s.

función-de-tiempo-de-transición

Usa la propiedad transition-timing-function para variar la velocidad de una

transición de CSS a lo largo de transition-duration.

De forma predeterminada, CSS realizará la transición de tus elementos a una

velocidad constante (transition-timing-function: linear). Sin embargo, las
transiciones lineales pueden parecer algo artificiales, aunque en la vida real,
los objetos tienen peso y no pueden detenerse ni comenzar de inmediato.
Comenzar o salir de una transición puede hacer que tus transiciones sean
más animadas y naturales.

En nuestro módulo sobre animación de CSS, encontrarás una buena

descripción general de las funciones de sincronización.
Puedes usar DevTools para experimentar con diferentes funciones de
sincronización en tiempo real.

retraso-de-transición

Usa la propiedad transition-delay para especificar el momento en que

comenzará una transición. Si no se especifica transition-duration, las
transiciones comenzarán de inmediato porque el valor predeterminado es 0s.
Esta propiedad acepta una unidad de tiempo, por ejemplo, segundos ( s) o
milisegundos (ms).

Esta propiedad es útil para las transiciones escalonadas que se logran

estableciendo un transition-delay más largo para cada elemento posterior de
un grupo.

transition-delay también es útil para la depuración. Establecer la demora en un

valor negativo puede iniciar una transición más en el cronograma.

abreviación: transición

Como la mayoría de las propiedades de CSS, hay una versión

abreviada. transition combina transition-property, transition-duration, transition-
timing-function y transition-delay.
.longhand {
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}

.shorthand {
transition: transform 300ms ease-in-out 0s;
}

¿Qué se puede hacer y qué no se puede hacer?

Al escribir código CSS, puedes especificar qué propiedades deben tener
transiciones animadas. Consulta esta lista de MDN de propiedades de CSS que
se pueden animar.

En general, solo es posible hacer la transición de elementos que pueden tener

un "estado intermedio" entre los estados inicial y final. Por ejemplo, es
imposible agregar transiciones para font-family porque no está claro cómo
debería verse el "estado medio" entre serif y monospace. Por otro lado, es
posible agregar transiciones para font-size porque su unidad es una longitud
entre la cual se puede interpolar.
Estas son algunas propiedades comunes que puedes cambiar.

Transformación

Navegadores compatibles

 36
 12
 16
 9

Origen
Por lo general, se realiza la transición de la propiedad transform de CSS porque
es una propiedad acelerada por GPU que da como resultado una animación
más fluida que también consume menos batería. Esta propiedad te permite
ajustar, rotar, trasladar o sesgar un elemento de manera arbitraria.
Consulta la sección sobre transformaciones en nuestro módulo Funciones.

Color

Antes, durante y después de una interacción, el color puede ser un excelente

indicador del estado. Por ejemplo, un botón puede cambiar de color si se
coloca el cursor sobre él. Este cambio de color puede indicar al usuario que se
puede hacer clic en el botón.

Las propiedades color, background-color y border-color son solo algunos lugares

en los que se puede hacer la transición del color tras la interacción.

Nota: Por lo general, no es necesario que las transiciones de color estén detrás de
una preferencia de movimiento reducido. Usa tu mejor juicio.

Consulta nuestro módulo sobre el color.

Sombras

A menudo, se realiza una transición de las sombras para indicar el cambio de

elevación, por ejemplo, desde el enfoque del usuario.

Consulta nuestro módulo sobre sombras.

Filtros

filter es una propiedad de CSS potente que te permite agregar efectos gráficos
sobre la marcha. La transición entre diferentes estados de filter puede crear
resultados bastante impresionantes.
Consulta nuestro módulo sobre filtros.
Activadores de transición
Tu CSS debe incluir un cambio de estado y un evento que active ese cambio
de estado para que se activen las transiciones de CSS. Un ejemplo típico de
un activador de este tipo es la seudoclase :hover. Esta pseudoclase coincide
cuando el usuario coloca el cursor sobre un elemento con el cursor.

A continuación, se muestra una lista de algunas seudoclases y eventos que

pueden activar cambios de estado en tus elementos.

 :hover: Coincide si el cursor está sobre el elemento.

 :focus: Coincide si el elemento está enfocado.
 :focus-within : Coincide si el elemento o cualquiera de sus elementos
subordinados están enfocados.
 :target: Coincide cuando el fragmento de la URL actual coincide con el ID del
elemento.
 :active: Coincide con el momento en que se activa el elemento (por lo general,
cuando se presiona el mouse sobre él).
 Cambios de class desde JavaScript: Cuando el class del CSS de un elemento
cambia mediante JavaScript, el CSS realiza la transición de las propiedades
aptas que cambiaron.

Diferentes transiciones para entrar o salir

Si configuras diferentes propiedades de transition al colocar el cursor sobre un

elemento o el enfoque, es posible crear algunos efectos interesantes.
.my-element {
background: red;

/* This transition is applied on the "exit" transition */

transition: background 2000ms ease-in;
}

.my-element:hover {
background: blue;

/* This transition is applied on the "enter" transition */

transition: background 150ms ease;
}

Consideraciones de accesibilidad
Las transiciones de CSS no son para todos. Para algunas personas, las
transiciones y las animaciones pueden causar mareos o molestias.
Afortunadamente, CSS tiene una función multimedia llamada prefers-reduced-
motion que detecta si un usuario indicó preferencia por un menor movimiento
desde su dispositivo.
/*
If the user has expressed their preference for
reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
.my-element {
transition: none;
}
}

/*
If the browser understands the media query and the user
explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
.my-element {
transition: transform 250ms ease;
}
}

Consulta nuestra entrada de blog prefers-reduced-motion: A veces, menos

movimiento es más para obtener más información sobre esta función
multimedia.
Nota: En el módulo Obtén información sobre accesibilidad, sobre animación y
movimiento, descubre cómo hacer que tu sitio resulte atractivo sin causarles
problemas a algunos usuarios.
Consideraciones de rendimiento

Cuando trabajes con transiciones de CSS, es posible que encuentres

problemas de rendimiento si agregas transiciones para ciertas propiedades de
CSS. Por ejemplo, cuando cambian propiedades como width o height, envían
contenido al resto de la página. Esto obliga a CSS a calcular nuevas
posiciones para cada elemento afectado en cada fotograma de la transición.
Cuando sea posible, te recomendamos que uses propiedades
como transform y opacity.

Consulta nuestra guía de animaciones de CSS de alto rendimiento para

obtener un análisis detallado de este tema.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre las transiciones

¿Qué propiedad de transición sirve para especificar la aceleración?

transition-cubic-bezier
transition-timing-function
transition-easing
animation-ease
transition-duration

Es una práctica recomendada usar transition-property: all

false
true

Se puede realizar la transición de todas las propiedades.

false
true
¿Te resultó útil?
Menú ampliado
bookmark_border
El podcast de CSS - 034: Desbordamiento

Cuando el contenido se extiende más allá de su elemento superior, hay

muchas opciones para manejarlo. Puedes desplazarte para agregar espacio
adicional, recortar los bordes, indicar el corte con puntos suspensivos y
mucho más. Es especialmente importante tener en cuenta el desbordamiento
cuando se desarrollan aplicaciones para teléfonos y varios tamaños de
pantalla.

Existen dos opciones de recorte diferentes en CSS; text-overflow ayudará con

las líneas individuales de texto, y las propiedades overflow ayudarán a
controlar el desbordamiento en el modelo de cuadro.

Desbordamiento de una sola línea con text-overflow

Usa la propiedad text-overflow en cualquier elemento que contenga nodos de
texto, por ejemplo, un párrafo, <p>. Especifica cómo aparece el texto cuando
no cabe en el espacio disponible del elemento. Todo el texto HTML visible de
una página se encuentra en nodos de texto. Para usar text-overflow, necesitas
una sola línea de texto separada, por lo que también debes
establecer overflow en hidden y tener un valor white-space que evite la unión.
p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

Usa propiedades de desbordamiento

Las propiedades de desbordamiento se establecen en un elemento para

controlar lo que sucede cuando sus elementos secundarios necesitan más
espacio del que tiene disponible. Esto puede ser intencional, como en un
mapa interactivo como Google Maps, donde un usuario se desplaza
lateralmente alrededor de una imagen grande recortada a un tamaño
específico. También puede ser no intencional, como en una aplicación de
chat, en la que el usuario escribe un mensaje largo que no cabe en el cuadro
de texto.

Puedes considerar el desbordamiento en dos partes. El elemento superior

tiene un espacio firmemente limitado que no cambiará. Puedes considerarlo
como una ventana. Los elementos secundarios son contenido que requiere
más espacio del elemento superior. Es como mirar por la ventana. Administrar
el desbordamiento ayudará a orientar la forma en que la ventana enmarca
este contenido.
Desplazamiento en el eje vertical y horizontal

La propiedad overflow-y controla el desbordamiento físico a lo largo del eje

vertical del viewport del dispositivo (por lo tanto, se desplaza hacia arriba y
hacia abajo).

Los controles de la propiedad overflow-x desbordan el eje horizontal del

viewport del dispositivo, por lo que se desplaza hacia la izquierda y la
derecha.

Propiedades lógicas para la dirección de desplazamiento

Navegadores compatibles

 x
 x
 69
 x

Origen
Las propiedades overflow-inline y overflow-block establecen el desbordamiento
según la dirección del documento y el modo de escritura.

La abreviatura overflow

La abreviatura overflow establece los estilos overflow-x y overflow-y en una

línea:
overflow: hidden scroll;

Si se especifican dos palabras clave, la primera se aplica a overflow-x y la

segunda a overflow-y. De lo contrario, overflow-x y overflow-y usan el mismo
valor.

Valores

Analicemos con más detalle los valores y las palabras clave disponibles para
las propiedades de overflow.

overflow: visible (predeterminada)

Sin configurar la propiedad, overflow: visible es el valor predeterminado para la

Web. Esto garantiza que el contenido nunca se oculte de forma accidental y
siga los principios centrales de "nunca ocultar contenido" o "diseños seguros
de diseños precisos".

overflow: hidden
 Con overflow: hidden, el contenido se recorta en la dirección especificada y no
se proporcionan barras de desplazamiento para mostrarlo.

overflow: scroll

overflow: scroll habilita las barras de desplazamiento para permitir que los
usuarios se desplacen por el contenido. Incluso si el contenido no está
desbordado, las barras de desplazamiento estarán presentes. Esta es una
excelente manera de reducir el cambio de diseño en el futuro si es posible que
un contenedor sea desplazable en el futuro, por ejemplo, según el cambio de
tamaño, y preparar visualmente al usuario para las áreas desplazables.

overflow: clip

Al igual que overflow: hidden, el contenido con overflow: clip se recorta en el

cuadro de relleno del elemento. La diferencia entre clip y hidden es que la
palabra clave clip también prohíbe todo el desplazamiento, incluido el
desplazamiento programático.

overflow: auto

Por último, el valor más usado: overflow: auto. Esto respeta las preferencias del
usuario y muestra barras de desplazamiento si es necesario, pero las oculta de
forma predeterminada y da la responsabilidad de desplazarse al usuario y al
navegador.
Nota: El uso de la propiedad overflow con un valor distinto de visible crea
un contexto de formato de bloque.

Desplazamiento y desbordamiento

Muchos de estos comportamientos de overflow introducen una barra de

desplazamiento, pero hay algunos comportamientos y propiedades de
desplazamiento específicos que pueden ayudarte a controlar el
desplazamiento en tu contenedor de desbordamiento.

Desplazamiento y accesibilidad

Es importante asegurarse de que el área desplazable pueda aceptar el foco,

de modo que el usuario que usa el teclado pueda presionar Tab hasta llegar al
cuadro, y luego usar las teclas de flecha para desplazarse.

Para permitir que un cuadro de desplazamiento acepte el enfoque,

agrega tabindex="0", un nombre con el atributo aria-labelledby y un
atributo role adecuado. Por ejemplo:
<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
content
</div>

Luego, se puede usar CSS para indicar que el cuadro está enfocado, usando la
propiedad outline para dar una pista visual de que ahora se podrá desplazar.
En Cómo usar CSS para aplicar la accesibilidad, Adrian Roselli demuestra
cómo CSS puede ayudar a prevenir las regresiones de accesibilidad. Por
ejemplo, para activar el desplazamiento y agregar el indicador de enfoque
solo si se usan los atributos correctos. Las siguientes reglas solo permitirán
que el cuadro sea desplazable si tiene atributos tabindex, aria-labelledby y role.
[role][aria-labelledby][tabindex] {
overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
outline: .1em solid blue;
}

Posicionamiento de la barra de desplazamiento dentro del

modelo de cuadro

Las barras de desplazamiento ocupan espacio dentro del cuadro de relleno y

pueden competir por el espacio si son inline y no overlaid. El módulo de
modelo de cuadro se extiende más sobre esta posible fuente de cambio de
diseño.

Desplazamiento raíz frente a desplazamiento implícito

Es posible que notes que algunos desplazadores tienen un comportamiento

de "deslizar hacia abajo para actualizar" y otros comportamientos especiales,
en especial cuando se desarrollan aplicaciones híbridas y para dispositivos
móviles. Este comportamiento de desplazamiento se produce en la barra de
desplazamiento raíz. Solo hay un desplazador raíz en una página. De forma
predeterminada, documentElement es la barra de desplazamiento raíz de la
página. Sin embargo, si se cambia el elemento que es la barra de
desplazamiento raíz, los comportamientos especiales se pueden aplicar a
otros desplazadores que no sean documentElement, llamamos a este nuevo
desplazamiento raíz implícito.
Para crear una barra de desplazamiento raíz, puedes usar lo que se
denomina promoción de desplazamiento. Para ello, posiciona un contenedor
como fijo, asegurándote de que cubra todo el viewport y el índice z en la parte
superior con una barra de desplazamiento. Experimenta una barra de
desplazamiento raíz en comparación con una barra de desplazamiento
implícito anidada aquí.
En el video, se muestra una barra de desplazamiento raíz con comportamiento de
rebote y nuevas funciones de estilo,
en comparación con el desplazamiento de una barra de desplazamiento implícito sin
comportamiento de desplazamiento mejorado.

comportamiento-de-desplazamiento

Navegadores compatibles
  61
 79
 36
 15.4

Origen

scroll-behavior te permite habilitar el desplazamiento hacia los elementos

controlado por el navegador. Esto te permite especificar cómo se controla la
navegación in-page, como .scrollTo() o los vínculos.

Esto es especialmente útil cuando se usa con prefers-reduced-motion para

especificar el comportamiento de desplazamiento según las preferencias del
usuario.
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}

comportamiento-sobredesplazamiento

Navegadores compatibles

 63
 18
 59
 16

Origen
Si alguna vez llegaste al final de una superposición modal, luego continúas
desplazándote y la página que se encuentra detrás de la superposición se
movió, se trata del encadenamiento de desplazamiento, o se burbujean hasta
el contenedor de desplazamiento superior. La propiedad overscroll-behavior te
permite evitar que el desplazamiento desbordado se filtre en un contenedor
superior (llamado encadenamiento de desplazamiento).

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre desbordamiento

¿El desbordamiento de texto y el desbordamiento de elementos son iguales?

false
true
La propiedad overflow acepta 2 palabras clave. ¿Para qué eje es la primera?

vertical
horizontal

¿Qué espacio en el modelo de cuadro consumen las barras de desplazamiento

cuando se muestran y se intercalan?

cuadro de relleno
cuadro de contenido
cuadro de borde
cuadro de margen

Para capturar un impulso adicional del desplazamiento en un desplazador

implícito anidado, ¿qué propiedad usarías?

overscroll-behavior

scroll-behavior

scroll-hint

overscroll-effect

scroll-padding

Recursos
Sobreflujo y pérdida de datos en CSS de Smashing Magazine
Fondos
bookmark_border
El podcast de CSS - 053: Background
Fondos

Detrás de cada cuadro de CSS, hay una capa especializada denominada capa
de fondo. CSS ofrece una variedad de formas de realizar cambios
significativos en él, incluida la posibilidad de usar varios fondos.

Las capas de fondo están más alejadas del usuario y se renderizan detrás del
contenido de un cuadro a partir de su región padding-box. Esto permite que la
capa de fondo no se superponga con los bordes.

Color de fondo

Navegadores compatibles

 1
 12
 1
 1

Origen
Uno de los efectos más simples que puedes aplicar a una capa de fondo es
configurar el color. El valor inicial de background-color es transparent, lo que
permite que el contenido de un elemento superior sea visible. Un conjunto de
color válido en una capa de fondo se encuentra detrás de otros objetos
pintados en ese elemento.
Imágenes de fondo

Navegadores compatibles

 1
 12
 1
 1

Origen

En la parte superior de la capa background-color, puedes agregar una imagen

de fondo con la propiedad background-image. Un background-image acepta lo
siguiente:

 Una URL de imagen o un URI de datos con la función url de CSS.

  Imagen creada de manera dinámica por una función de CSS de gradiente.

Configura una imagen de fondo con la función de CSS url

Fondos con gradiente de CSS

Existen varias funciones de CSS de gradiente que te permiten generar una

imagen de fondo cuando se pasan dos o más colores.
Independientemente de la función de gradiente que se use, la imagen
resultante se ajusta de forma intrínseca para que coincida con la cantidad de
espacio disponible.

Demostración que muestra un ejemplo de cómo aplicar una imagen de fondo

con funciones de gradiente:

Repetición de imágenes de fondo

Navegadores compatibles

 1
 12
 1
 1

Origen

De forma predeterminada, las imágenes de fondo se repiten horizontal y

verticalmente para llenar todo el espacio de la capa de fondo.

Cambia esto mediante la propiedad background-repeat con uno de los

siguientes valores:

 repeat: La imagen se repite dentro del espacio disponible y se recorta según

sea necesario.
 round: La imagen se repite de manera horizontal y vertical para adaptarse a la
mayor cantidad de instancias posible en el espacio disponible. A medida que
aumenta el espacio disponible, la imagen se estira y, después de estirar la
mitad de su ancho original, se comprime para agregar más instancias de
imagen.
 space: La imagen se repite de manera horizontal y vertical para adaptarse a
tantas instancias dentro del espacio disponible sin recortarse y separa las
instancias de la imagen según sea necesario. Las imágenes repetidas tocan los
bordes del espacio que ocupa una capa de fondo, con un espacio en blanco
distribuido de manera uniforme entre ellas.

La propiedad background-repeat te permite configurar el comportamiento de

los ejes "x" e "y" de forma independiente. El primer parámetro establece el
comportamiento de repetición horizontal y el segundo, el de repetición
vertical.
Si usas un solo valor, se aplicará a las repeticiones horizontales y verticales.

La abreviatura también tiene opciones convenientes de una palabra para que

tu intención sea más clara.

El valor repeat-x repite una imagen solo de forma horizontal. Esto equivale
a repeat no-repeat.

En la siguiente demostración, se muestran las capacidades de la

propiedad background-repeat:

Posición de fondo

Navegadores compatibles

 1
 12
 1
 1

Origen

Es posible que hayas notado que el estilo de algunas imágenes de la Web se

establece mediante una declaración background-repeat: no-repeat; estas se
muestran en la parte superior izquierda de su contenedor.

La posición inicial de las imágenes de fondo es en la parte superior izquierda.

La propiedad background-position te permite cambiar este comportamiento
desplazando la posición de la imagen.

Al igual que con background-repeat, la propiedad background-position te permite

posicionar imágenes a lo largo del eje x e y de forma independiente, con dos
valores de forma predeterminada.

Cuando se usan las longitudes y los porcentajes de CSS, el primer parámetro

corresponde al eje horizontal y el segundo, al eje vertical.

Cuando se utilizan las palabras clave solo, el orden de las palabras clave no
importa:

Sí

background-position: left 50%;

Sí

background-position: top left;

Sí
background-position: left top;

El orden no importa para las palabras clave asociadas con diferentes ejes de posición.

Qué no debes hacer

background-position: 50% left;

Cuando los valores de CSS se usan junto con las palabras clave, el orden es importante. El primer
valor representa el eje horizontal y el segundo, el eje vertical.

Qué no debes hacer

background-position: left right;

No puedes usar palabras clave asociadas con el mismo eje simultáneamente.

La propiedad background-position también tiene una abreviatura conveniente

de un valor; el valor omitido se resuelve en 50%. A continuación, se incluye un
ejemplo que demuestra esto con las palabras clave que acepta la
propiedad background-position:

Además de la forma predeterminada de dos y un parámetro, la

propiedad background-position también acepta hasta cuatro parámetros.

Cuando se usan tres o cuatro parámetros, la longitud o el porcentaje de CSS

debe estar precedido por las palabras clave top, left, right o bottom para que el
navegador calcule desde qué borde del cuadro de CSS se debe originar el
desplazamiento.

Cuando se usan tres parámetros, la longitud o el valor del CSS puede ser el
segundo o el tercer parámetro, mientras que los otros dos son palabras clave.
La palabra clave que tenga éxito se usará para determinar el límite del valor o
la longitud del CSS que corresponde al desplazamiento. El desplazamiento de
la otra palabra clave especificada se establece en 0.

Sí

background-position: bottom 88% right;

Sí

background-position: right bottom 88%;

Qué no debes hacer

background-position: 88% bottom right;

El valor de longitud de CSS debe estar precedido por las palabras

clave top, right, bottom o left cuando se usan tres o más parámetros.
Sí

background-position: bottom 88% right 33%;

Sí

background-position: right 33% bottom 88%;

Qué no debes hacer

background-position: 88% 33% bottom left;

El valor de longitud de CSS debe estar precedido por las palabras

clave top, right, bottom o left cuando se usan tres o más parámetros.

Si se aplica background-position: top left 20% a una imagen de fondo CSS, la

imagen se coloca en la parte superior del cuadro. El valor 20% representa un
desplazamiento del 20% con respecto a la izquierda del cuadro (en el eje x).

Si se aplica background-position: top 20% left a una imagen de fondo de CSS, el

valor del 20% representa un desplazamiento del 20% con respecto a la parte
superior del cuadro de CSS (en el eje y), y la imagen se coloca a la izquierda
del cuadro.

Cuando se usan cuatro parámetros, las dos palabras clave se combinan con
dos valores que corresponden a un desfase con respecto a los orígenes de
cada palabra clave especificada. Si se aplica background-position: bottom 20%
right 30% a una imagen de fondo, esta se posiciona un 20% desde la parte
inferior y un 30% desde la derecha del cuadro de CSS.

En la siguiente demostración, se demuestra este comportamiento:

A continuación, se muestran más ejemplos del uso de la

propiedad background-position con una combinación de CSS y valores de
palabras clave:

Nota: Para obtener más información sobre los matices relacionados con el
posicionamiento de los fondos, consulta background-position en MDN.

Tamaño del fondo

Navegadores compatibles

 3
 12
 4
 5

Origen
La propiedad background-size establece el tamaño de las imágenes de fondo.
De forma predeterminada, el tamaño de las imágenes de fondo se ajusta en
función de su ancho, altura y relación de aspecto intrínsecos (reales).

La propiedad background-size usa valores porcentuales y de longitud del CSS o

palabras clave específicas. La propiedad acepta hasta dos parámetros que te
permiten cambiar el ancho y la altura de un fondo de forma independiente.

La propiedad background-size acepta las siguientes palabras clave:

 auto: Cuando se utiliza de forma independiente, el tamaño de la imagen de

fondo se basa en su ancho y alto intrínsecos. Cuando se usa auto junto con
otro valor de CSS para el ancho (primer parámetro) o la altura (segundo
parámetro), la dimensión establecida en auto se ajusta según sea necesario
para mantener la relación de aspecto natural de la imagen. Este es el
comportamiento predeterminado de la propiedad background-size.
 cover: Cubre toda el área de la capa en segundo plano. Esto puede significar
que la imagen se estiró o recortó.
 contain: Ajusta el tamaño de la imagen para llenar el espacio sin estirarla ni
recortarla. Como resultado, puede quedar un espacio vacío que provocará que
la imagen se repita, a menos que background-repeat se establezca en no-repeat.

Los últimos 2 están diseñados para usarse de forma independiente sin otro
parámetro.

La siguiente demostración demuestra estas palabras clave en acción:

Demostración que muestra cómo se aplican estas palabras clave

a background-size:

Archivo adjunto en segundo plano

Navegadores compatibles

 1
 12
 1
 1

Origen

La propiedad background-attachment te permite modificar el comportamiento

de posición fija de las imágenes de fondo (imágenes que forman parte de una
capa de fondo) una vez que la capa es visible en una pantalla.

Acepta 3 palabras clave: scroll, fixed y local.

El comportamiento predeterminado de la propiedad background-attachment es

el valor inicial de scroll. Cuando se necesita más espacio, las imágenes se
mueven con ese espacio dentro de la capa de fondo determinada por los
límites del cuadro CSS.

El uso del valor fixed corrige la posición de las imágenes de fondo en el

viewport.

Una vez que el espacio de las imágenes de la capa de fondo originalmente se

debe desplazar (o renderizar) fuera de la pantalla, las imágenes dentro de la
capa de fondo permanecen fijas en la posición original que la capa de fondo
habilitó hasta que el viewport desplaza toda la capa fuera de la pantalla.

La palabra clave local permite que la posición de las imágenes de fondo se fije
en relación con el contenido del elemento. Las imágenes de fondo ahora se
desplazan por el espacio que ocupan, ya que se renderiza dentro y fuera de
los límites del cuadro CSS (generalmente debido a transformaciones de
desplazamiento, 2D o 3D).

Origen en segundo plano

Navegadores compatibles

 1
 12
 4
 3

Origen

La propiedad background-origin te permite modificar el área de fondos

asociados con un cuadro en particular. Los valores que acepta la propiedad
corresponden a las regiones border-box, padding-box y content-box de un
cuadro .

Prueba estas opciones con la siguiente demostración:

Clip de fondo

Navegadores compatibles

 1
 12
 4
 5

Origen
La propiedad background-clip controla lo que se ve visualmente desde una
capa en segundo plano, sin importar los límites que cree la
propiedad background-origin.

Al igual que con background-origin, las regiones que se pueden especificar

son border-box, padding-box y content-box, que corresponden al lugar en el que
se puede renderizar una capa en segundo plano de CSS. Cuando se usen
estas palabras clave, se recortará o recortará cualquier renderización del
fondo que se encuentre más allá de la región especificada.

La propiedad background-clip también acepta una palabra clave text que

recorta el fondo para que no sea más allá del texto dentro del cuadro de
contenido. Para que este efecto sea evidente en el texto real de un cuadro
CSS, el texto debe ser parcial o totalmente transparente.

Es una propiedad relativamente nueva. En el momento de la redacción de

este documento, Chrome y la mayoría de los navegadores requieren el
prefijo -webkit- para usar esta propiedad.

Navegadores compatibles

 1
 12
 4
 5

Origen
Nota: Esta propiedad no es compatible con la configuración simultánea
de background-clip: text en un cuadro de CSS.

Varios fondos

Como se mencionó al comienzo del módulo, la capa de fondo permite definir

varias subcapas. Para abreviar, me referiré a estas subcapas como fondos.

Múltiples fondos se definen de arriba abajo; el primero es el más cercano al

usuario, mientras que el último es el más lejano a este.

El navegador designa el único fondo definido o la última capa como la capa

final en segundo plano. Solo esta capa puede asignar un
elemento background-color.

Nota: Teniendo en cuenta la imprevisibilidad de la Web, es posible que no se cargue

una imagen de fondo. Establecer un color de fondo en la capa final garantiza un buen
contraste para el texto y así sucesivamente si no se cargan capas de fondo
importantes.

Se pueden configurar varias capas individualmente con la mayoría de las

propiedades de CSS relacionadas con el fondo que están separadas por
comas, como se muestra en el fragmento de código y en la demostración en
vivo a continuación.

background-image: url("[Link]
[Link]"),
url("[Link]
linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
background-size: contain, cover, auto;
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 50% 50%, 10% 50%, 0% 0%;
background-origin: padding-box, border-box, content-box;

La abreviatura del fondo

Para que sea más fácil darle estilo a la capa de fondo de un cuadro
(especialmente cuando se desean varias capas de fondo), hay una
abreviatura que sigue el siguiente patrón específico:

background:
<background-image>
<background-position> / <background-size>?
<background-repeat>
<background-attachment>
<background-origin>
<background-clip>
<background-color>?

: Es importante tener en cuenta que cualquier propiedad de fondo omitida en la

abreviatura se establece en sus valores iniciales.

El orden es importante en la forma abreviada de declarar varios fondos. Los

valores de posición y tamaño deben proporcionarse, separados por una barra
diagonal (/). Si declaras el comportamiento del origen y del clip en el orden
correcto, podrás aprovechar la configuración de palabras clave que sean
válidas para ambos a la vez.

La siguiente declaración recorta el fondo y lo origina en el cuadro de

contenido:

background: url("[Link] 50%

50% / contain no-repeat content-box;

Con esta semántica abreviada en mente, las declaraciones anteriores

relacionadas con el segundo plano del fragmento de código podrían
reescribirse de la siguiente manera:

background: url("[Link]
50% 50%/contain no-repeat padding-box,
url("[Link] 10% 50% / cover border-box,
linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0%
/ cover no-repeat content-box ;

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre los antecedentes de CSS

Las imágenes de fondo se ubican en la parte superior izquierda de un cuadro

CSS.

Falso
Verdadero

Las imágenes de fondo no se repiten de forma predeterminada.

Verdadero
Falso

¿Cuáles de las siguientes declaraciones de background-position son válidas?

background-position: right bottom

background-position: top right 33%

background-position: 50% left

background-position: left

Para establecer que una imagen de fondo se corrija dentro de un viewport,

puedes usar lo siguiente:

background-attachment: scroll

background-attachment: fixed

background-position: fixed

background-fixed-to-viewport: true

El origen del fondo predeterminado de un fondo dentro de un cuadro CSS es

el siguiente:

margin-box

border-box

content-box

padding-box
Texto y tipografía
bookmark_border
El podcast de CSS - 036: Text & Typography

El texto es uno de los componentes básicos de la Web.

Cuando creas un sitio web, no necesariamente necesitas darle estilo al texto;

HTML tiene un estilo predeterminado bastante razonable.

Sin embargo, es probable que el texto componga la mayor parte de tu sitio

web, por lo que vale la pena agregarle algo de estilo. Si cambias algunas
propiedades básicas, puedes mejorar significativamente la experiencia de
lectura para tus usuarios.

En este módulo, primero veremos algunas propiedades fundamentales de las

fuentes de CSS, como font-family, font-style, font-weight y font-size. Luego,
analizaremos las propiedades que afectan los párrafos de texto, como text-
indent y word-spacing. El módulo finaliza con algunos temas más avanzados,
como las fuentes variables y los pseudoelementos.

Cambiar el tipo de letra

Navegadores compatibles

 1
 12
 1
 1

Origen
Usa font-family para cambiar el tipo de letra del texto.
La propiedad font-family acepta una lista de strings separadas por comas, ya
sea que hagan referencia a familias de fuentes específicas o genéricas. Las
familias de fuentes específicas son cadenas entrecomilladas, como
"Helvetica", "EB Garamond" o "Times New Roman". Las familias de fuentes
genéricas son palabras clave como serif, sans-serif y monospace (consulta
la lista completa de opciones en MDN). El navegador mostrará el primer tipo
de letra disponible de la lista proporcionada.
Nota: Cuando el navegador elige qué fuente mostrar de tu declaración de font-
family, no se detiene en la primera fuente disponible de la lista. En cambio,
selecciona las fuentes un carácter a la vez. Si un carácter en particular no está
disponible en la primera fuente de la lista, pasa a la siguiente y así sucesivamente.

Cuando uses font-family, debes especificar al menos una familia de fuentes

genéricas en caso de que el navegador del usuario no tenga tus fuentes
preferidas. En general, la familia de fuentes genéricas de resguardo debe ser
similar a tus fuentes preferidas: si usas font-family: "Helvetica" (una familia de
fuentes sans-serif), el resguardo debe ser sans-serif para que coincida.

Cómo usar fuentes oblicuas y cursivas

Navegadores compatibles

 1
 12
 1
 1

Origen
Usa font-style para establecer si el texto debe estar en cursiva o no. font-
style acepta una de las siguientes palabras clave: normal, italic y oblique.
Nota: P.: ¿Cuál es la diferencia entre italic y oblique? R: En las fuentes
compatibles, font-style: italic suele ser una versión cursiva del tipo de letra
normal. font-style: oblique muestra una versión inclinada del tipo de letra normal.

Aplicar negrita al texto

Navegadores compatibles

 2
 12
 1
 1

Origen
Usa font-weight para establecer la “negrita” del texto. Esta propiedad acepta
valores de palabras clave (normal, bold), valores relativos de palabra clave
(lighter, bolder) y valores numéricos (de 100 a 900).

Las palabras clave normal y bold son equivalentes a los valores

numéricos 400 y 700, respectivamente.

Las palabras clave lighter y bolder se calculan en relación con el elemento

superior. Consulta la sección Significado de los pesos relativos de MDN para
ver una tabla práctica que muestra cómo se determina este valor.
Nota: La mayoría de las fuentes, especialmente las "seguras para la Web", solo
admiten los grosores 400 (normal) y 700 (bold). Cuando importes fuentes con @font-
face o @import, puedes elegir los grosores específicos que quieras incluir. Aun así, las
fuentes no variables solo admiten valores numéricos para font-weight en las
centenas, [Link]., 100, 200, 300, etc. Si deseas usar font-weight: 321 (por ejemplo),
tendrás que usar una fuente variable.
Cómo cambiar el tamaño del texto

Navegadores compatibles

 1
 12
 1
 1

Origen
Usa font-size para controlar el tamaño de los elementos de texto. Esta
propiedad acepta valores de longitud, porcentajes y algunos valores de
palabras clave.

Además de los valores porcentuales y de longitud, font-size acepta algunos

valores absolutos de palabras clave (xx-small, x-small, small, medium, large, x-
large, xx-large) y un par de valores de palabra clave relativos (smaller, larger).
Los valores relativos son relativos al font-size del elemento principal.

Nota: P.: ¿Cuál es la diferencia entre em y rem? R.: En CSS, em representa el font-
size heredado del elemento superior. Por ejemplo, font-size: 2em equivale al valor
de font-size del elemento superior multiplicado por dos. rem es similar, pero, en
cambio, representa el font-size heredado del elemento raíz, es decir, <html>.

Cambiar el espacio entre las líneas

Navegadores compatibles

 1
 12
 1
 1

Origen
Usa line-height para especificar la altura de cada línea en un elemento. Esta
propiedad acepta un número, una longitud, un porcentaje o la palabra
clave normal. Por lo general, se recomienda usar un número en lugar de una
longitud o un porcentaje para evitar problemas con la herencia.
Cambiar el espacio entre caracteres

Navegadores compatibles

 1
 12
 1
 1
Origen
Usa letter-spacing para controlar la cantidad de espacio horizontal entre los
caracteres de tu texto. Esta propiedad acepta valores de longitud
como em, px y rem.

Ten en cuenta que el valor especificado aumenta la cantidad de espacio

natural entre caracteres. En la siguiente demostración, selecciona una letra
individual para ver el tamaño del formato letterbox y cómo cambia con letter-
spacing.

Cómo cambiar el espacio entre palabras

Navegadores compatibles

 1
 12
 1
 1

Origen
Usa word-spacing para aumentar o disminuir la longitud del espacio entre cada
palabra del texto. Esta propiedad acepta valores de longitud
como em, px y rem. Ten en cuenta que la longitud que especificas
corresponde al espacio adicional, además del espaciado normal. Esto significa
que word-spacing: 0 es equivalente a word-spacing: normal.
Abreviatura de font
Puedes usar la propiedad abreviada font para establecer muchas propiedades
relacionadas con la fuente a la vez. La lista de propiedades posibles es font-
family, font-size, font-stretch, font-style, font-variant, font-weight y line-height.
Consulta el artículo font de MDN para obtener información específica sobre
cómo pedir estas propiedades.
Cómo cambiar mayúsculas y minúsculas del texto

Navegadores compatibles

 1
 12
 1
 1

Origen
Usa text-transform para modificar las mayúsculas del texto sin necesidad de
cambiar el HTML subyacente. Esta propiedad acepta los siguientes valores de
palabra clave: uppercase, lowercase y capitalize.
Subrayar, subrayar y agregar líneas al texto

Navegadores compatibles
  1
 12
 1
 1

Origen
Usa text-decoration para agregar líneas al texto. Por lo general, los subrayados
son los más utilizados, pero es posible agregar líneas encima del texto o
directamente a través de él.

La propiedad text-decoration es la abreviatura de las propiedades más

específicas que se detallan a continuación.

La propiedad text-decoration-line acepta las palabras

clave underline, overline y line-through. También puedes especificar varias
palabras clave para varias líneas.
La propiedad text-decoration-color establece el color de todas las decoraciones
de text-decoration-line.
La propiedad text-decoration-style acepta las palabras
clave solid, double, dotted, dashed y wavy.
La propiedad text-decoration-thickness acepta cualquier valor de longitud y
establece el ancho del trazo de todas las decoraciones de text-decoration-line.

La propiedad text-decoration es una abreviatura de todas las propiedades

anteriores.

Nota: Usa text-underline-position para compensar el subrayado de una text-

decoration: underline por la cantidad especificada. Esta propiedad no funciona
para overline ni line-through.

Cómo agregar una sangría al texto

Navegadores compatibles

 1
 12
 1
 1

Origen
Usa text-indent para agregar una sangría a tus bloques de texto. Esta
propiedad toma una longitud (por ejemplo, 10px, 2em) o un porcentaje del
ancho del bloque contenedor.
Cómo abordar el contenido oculto o desbordado

Navegadores compatibles

 1
  12
 7
 1.3

Origen
Usa text-overflow para especificar cómo se representa el contenido oculto.
Existen dos opciones: clip (la opción predeterminada), que trunca el texto en
el punto de desbordamiento; y ellipsis, que muestra puntos suspensivos (...)
en el punto de desbordamiento.
Controlar los espacios en blanco

Navegadores compatibles

 1
 12
 1
 1

Origen
La propiedad white-space se usa para especificar cómo se deben controlar los
espacios en blanco en un elemento. Para obtener más detalles, consulta
el artículo de white-space sobre MDN.
white-space: pre puede ser útil para renderizar arte ASCII o bloques de código
con sangría cuidadosamente.
Controla cómo se rompen las palabras

Navegadores compatibles

 1
 12
 15
 3

Origen
Usa word-break para cambiar la forma en que las palabras deben estar "rotas"
cuando sobrepasan la línea. De forma predeterminada, el navegador no divide
palabras. Si usas el valor de palabra clave break-all para word-break, se
indicará al navegador que divida las palabras en caracteres individuales si es
necesario.
Cómo cambiar la alineación del texto

Navegadores compatibles

 1
 12
  1
 1

Origen
Usa text-align para especificar la alineación horizontal del texto en un bloque o
elemento de una celda de la tabla. Esta propiedad acepta los valores de
palabra clave left, right, start, end, center, justify y match-parent.

Los valores left y right alinean el texto a los lados izquierdo y derecho del
bloque, respectivamente.

Usa start y end para representar la ubicación del principio y el final de una
línea de texto en el modo de escritura actual. Por lo tanto, start se asigna
a left en inglés y a right en alfabeto árabe, que se escribe de derecha a
izquierda (RTL). Son alineaciones lógicas. Obtén más información en nuestro
módulo de propiedades lógicas.

Usa center para alinear el texto en el centro del bloque.

El valor de justify organiza el texto y cambia el espaciado entre palabras

automáticamente, de modo que el texto se alinee con los bordes izquierdo y
derecho del bloque.

Cómo cambiar la dirección del texto

Navegadores compatibles

 2
 12
 1
 1

Origen
Usa direction para definir la dirección del texto, que puede ser ltr (de izquierda
a derecha, predeterminada) o rtl (de derecha a izquierda). Algunos idiomas,
como el árabe, el hebreo o el persa, se escriben de derecha a izquierda, por lo
que se debe usar direction: rtl. Para inglés y todos los demás idiomas que se
escriben de izquierda a derecha, usa direction: ltr.
Precaución: Por lo general, te recomendamos que uses el atributo HTML dir en
lugar de direction. Consulta esta discusión de Stack Overflow para obtener más
detalles.

Cómo cambiar el flujo del texto

Navegadores compatibles

 48
 12
 41
  10.1

Origen
Usa writing-mode para cambiar la forma en que fluye y se organiza el texto. El
valor predeterminado es horizontal-tb, pero también puedes establecer writing-
mode en vertical-lr o vertical-rl para el texto que deseas que fluya
horizontalmente.
Cómo cambiar la orientación del texto

Navegadores compatibles

 48
 79
 41
 14

Origen
Usa text-orientation para especificar la orientación de los caracteres en el
texto. Los valores válidos para esta propiedad son mixed y upright. Esta
propiedad solo es relevante cuando writing-mode está configurado en un valor
distinto de horizontal-tb.
Cómo agregar una sombra al texto

Navegadores compatibles

 2
 12
 3.5
 1.1

Origen
Usa text-shadow para agregar una sombra al texto. Esta propiedad espera tres
longitudes (x-offset, y-offset y blur-radius) y un color.
Consulta la sección text-shadow de nuestro módulo sobre sombras para
obtener más información.
Fuentes variables

Por lo general, las fuentes “normales” requieren que se importen diferentes

archivos para distintas versiones del tipo de letra, por ejemplo, negrita,
cursiva o condensada. Las fuentes variables son fuentes que pueden contener
muchas variantes diferentes de un tipo de letra en un archivo.

Roboto Flex en combinaciones aleatorias de ancho y peso

Consulta nuestro artículo sobre fuentes variables para obtener más detalles.
Seudoelementos
Término clave: un seudoelemento es una parte de un elemento que puedes
segmentar con palabras clave de CSS sin necesidad de agregar más código HTML.
Consulta nuestro módulo sobre pseudoelementos para obtener un análisis detallado
de este tema.

Pseudoelementos ::first-letter y ::first-line

Navegadores compatibles

 1
 12
 1
 1

Origen
Los pseudoelementos ::first-letter y ::first-line se orientan a la primera letra y la
primera línea de un elemento de texto, respectivamente.
Pseudoelemento ::selection
Navegadores compatibles

 1
 12
 62
 1.1

Origen
Usa el seudoelemento ::selection para cambiar la apariencia del texto
seleccionado por el usuario.

Cuando se usa este seudoelemento, solo se pueden utilizar determinadas

propiedades de CSS: color, background-color, text-decoration, text-shadow, stroke-
color, fill-color y stroke-width.

font-variant

Navegadores compatibles

 1
 12
 1
 1

Origen
La propiedad font-variant es una abreviatura de varias propiedades de CSS que
te permiten elegir variantes de fuente, como small-caps y slashed-zero. Las
propiedades de CSS que se incluyen en esta abreviatura son font-variant-
alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures y font-
variant-numeric. Consulta los vínculos de cada propiedad para obtener más
detalles sobre su uso.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre tipografía en la Web

¿Cuál de las siguientes palabras clave se puede usar como un resguardo

genérico de font-family?

sans-serif

monospace

italic

serif

helvetica

sci-fi

¿Qué sentencia se usa para convertir la primera letra de cada palabra en

mayúscula? [Link]., This is a sentence. ➡ This Is A Sentence.

text-capitalize: true;

text-transform: capitalize;

font-style: capitals;

font-variant: capitalize;

text-case: capitalize;

Verdadero o falso: Usa text-orientation para alinear el texto a la izquierda, la

derecha o el centro.

Falso
Verdadero

¿Qué propiedad de CSS se puede usar para cambiar el espacio entre las líneas
de texto?

line-spacing

baseline-distance

leading

line-height

Recursos
 En Prácticas recomendadas sobre fuentes, se aborda la importación y la
renderización de fuentes, además de otras prácticas recomendadas para usar
fuentes en la Web.
 Estilos fundamentales de texto y fuente de MDN .
Conclusión y próximos pasos
bookmark_border
El podcast de CSS - 025: Resumen de la temporada 1

¡Felicitaciones! Llegaste al final del curso. Hasta ahora,

aprendiste mucho sobre CSS y esperamos que te sientas más cómodo
trabajando con él que antes.

Tal vez te preguntes adónde puedes ir a partir de aquí. Una de las mejores
formas de aprender es aprender de la práctica: prueba tus nuevas habilidades
de CSS creando tu propio sitio web. Explora estos recursos adicionales para
seguir desarrollando tus habilidades de CSS:

Recursos adicionales
 Documentación de CSS sobre MDN
 Escuchar el podcast de CSS
 Artículos de CSS en [Link]
 How To Learn CSS (Cómo aprender CSS: Smashing Magazine)
 Trucos de CSS
 Layout Land - YouTube
Servicio brindado por

Adam Argyle

Andy Bell

Camden Bickel

Emma Twersky
Jiwoong Lee

Kayce Basques

Kevin Lozandier

Rachel Andrew

Rob Dodson

Una Kravets