CSS-Propiedades

Índice

⸞ Modelo de caja ⸞ ⸞ Fondo ⸞ ⸞ Fuente ⸞ ⸞ Efectos ⸞

➢ width ➢ color ➢ @font-face ➢ box-shadow
➢ height ➢ background-color ➢ font ➢ text-shadow
➢ min-width ➢ background-image ➢ font-family ➢ filter
➢ max-width ➢ background-repeat ➢ font-size ➢ mix-blend-mode
➢ min-height ➢ background-attachment ➢ font-style ➢ background-blend-mode
➢ max-height ➢ background-position ➢ font-weight ➢ isolation
➢ overflow ➢ background-clip ➢ letter-spacing ➢ clip-path
➢ overflow-x ➢ background-origin ➢ word-spacing ➢ mask
➢ overflow-y ➢ background-size ➢ line-height ➢ mask-image
➢ margin ➢ linear-gradient (...) ➢ text-indent ➢ mask-mode
➢ padding ➢ radial-gradient (...) ➢ white-space ➢ mask-repeat
➢ border ➢ conic-gradient (...) ➢ tab-size ➢ mask-position
➢ border-radius ➢ opacity ➢ direction ➢ mask-clip
➢ border-image ➢ object-fit ➢ hyphens ➢ mask-origin
➢ box-sizing ➢ object-position ➢ overflow-wrap ➢ mask-size
➢ block-start/block-end ➢ image-orientation ➢ line-break ➢ mask-composite
➢ inline-start/inline-end ➢ image-rendering ➢ word-break ➢ scroll-snap-type
➢ text-align ➢ scroll-snap-align
➢ text-justify ➢ scroll-snap-stop
➢ text-overflow ➢ scroll-margin/padding-…
➢ text-decoration
⸞ Flexbox ⸞ ⸞ Grid ⸞ ➢ text-transform
➢ display ➢ grid-template-columns ➢ font-stretch
➢ visibility ➢ grid-template-rows ➢ font-size-adjust
➢ position ➢ repeat(…) ➢ font-display
➢ z-index ➢ grid-template-areas ➢ font-variant ⸞ Animaciones ⸞
➢ float ➢ grid-area ➢ transition
➢ clear ➢ grid-gap ➢ transition-delay
➢ flex ➢ justify-items ➢ transition-timing-function
➢ flex-direction ➢ align-items ➢ transition-duration
➢ flex-wrap ➢ justify-content ➢ transition-property
➢ flex-flow ➢ align-content ➢ animation
➢ justify-content ➢ place-items ➢ animation-name
➢ align-items ➢ place-content ⸞ Misc. ⸞ ➢ animation-duration
➢ align-content ➢ grid-auto-columns ➢ border-collapse ➢ animation-timing-function
➢ place-content ➢ grid-auto-rows ➢ border-spacing ➢ animation-delay
➢ align-self ➢ grid-auto-flow ➢ caption-side ➢ animation-iteration-count
➢ gap ➢ justify-self ➢ empty-cells ➢ animation-direction
➢ order ➢ align-self ➢ table-layout ➢ animation-fill-mode
➢ grid-column-start/end ➢ list-style ➢ animation-play-state
➢ grid-row-start/end ➢ list-style-image ➢ @keyframes
➢ list-style-position ➢ transform
➢ list-style-type ➢ transform-origin
➢ outline ➢ transform-style
⸞ Reglas ⸞ ➢ outline-color ➢ translate (…)
➢ @media screen ➢ outline-style ➢ scale (…)
➢ @media print ➢ outline-width ➢ rotate (…)
➢ @supports ➢ outline-offset ➢ skew (…)
➢ @container ➢ cursor ➢ translate3d (…)
➢ @page ➢ content ➢ perspective
➢ @import ➢ counter-increment ➢ perspective-origin
➢ @layer ➢ counter-reset ➢ backface-visibility

LEYENDA: TEMA – PROPIEDAD – VALOR – DIRECTIVA - FUNCIÓN

Modelo de caja

El modelo de caja es un concepto fundamental en el diseño y maquetación web que describe cómo se
construye y representa visualmente cada elemento en una página web. La representación básica del modelo de
cajas se basa en varios conceptos importantes, como veremos a continuación:
➢El borde (border), en negro, es el límite que separa el interior del exterior del elemento.
➢El márgen (margin), en naranja, es la parte exterior del elemento, por fuera del borde.
➢El relleno (padding), en verde, es la parte interior del elemento, entre el contenido y el borde.
➢El contenido, en azul, es la parte interior del elemento, excluyendo el relleno.

Las propiedades que pertenecen a este grupo son las siguientes:

width

La propiedad width en el modelo de caja (box model) de CSS se utiliza para definir el ancho de un
elemento. Este ancho se refiere específicamente al área del contenido del elemento, excluyendo el relleno
(padding), los bordes (border) y el margen (margin).

height
La propiedad height en el modelo de caja (box model) de CSS funciona de manera similar a la
propiedad width, pero controla el alto de un elemento, es decir, la altura del área del contenido. Al igual que
con width, la altura se refiere solo al área del contenido, excluyendo el relleno (padding), el borde (border) y el
margen (margin).

min-width
La propiedad min-with es utilizada para controlar el ancho mínimo de un elemento. El valor de width
nunca será menor que el valor especificado en min-width, incluso si el contenido o el diseño del contenedor hace
que el ancho sea más pequeño. Si el contenido es más pequeño que el valor de min-width, el elemento se
expandirá hasta alcanzar ese mínimo.

max-width

La propiedad max-width es utilizada para controlar el ancho máximo de un elemento. El valor de width
nunca será mayor que el valor especificado en max-width, incluso si el contenido o el diseño del contenedor hace
que el ancho sea más grande. Si el contenido es más grande que el valor de max-width, el elemento se reducirá
para ajustarse a ese máximo.
min-heigth
Esta propiedad permite definir la altura mínima de un elemento. Si el contenido es más pequeño que el
valor de min-height, el elemento se expandirá hasta alcanzar esa altura mínima. Esto es útil para asegurarse de
que un elemento no se colapse si tiene poco contenido.

max-height
Esta propiedad permite definir la altura máxima de un elemento. Si el contenido es más alto que el
valor de max-height, el elemento se limitará a esa altura máxima y, en la mayoría de los casos, se generará un
desbordamiento (overflow) si el contenido excede ese valor. Esto es útil para evitar que un elemento se expanda
demasiado verticalmente, especialmente en elementos que contienen mucho contenido.

overflow

La propiedad overflow se utiliza para controlar cómo se maneja el contenido que se desborda del área de
un elemento, es decir, cuando el contenido excede el tamaño (ancho o altura) asignado al contenedor. Es esencial
para manejar situaciones en las que el contenido es más grande que el área visible de un elemento. Puede tener
los valores:
➢ visible: es el valor por defecto, el contenido no se recorta aunque desborde el contenedor. Se
mostrará fuera del área definida.
➢ hidden: el contenido que excede el tamaño del contenedor se recorta y no es visible. El contenido
que desborda no se muestra, y no se pueden desplazar las partes ocultas.
➢ scroll: se generan barras de desplazamiento (scrollbars) tanto verticales como horizontales
siempre, independientemente de si el contenido se desborda o no. El contenido que excede el
tamaño del contenedor se puede desplazar utilizando estas barras de desplazamiento.
➢ auto: las barras de desplazamiento se generan solo cuando sea necesario, es decir, si el contenido se
desborda. Si el contenido caba dentro del contenedor, no se mostrarán scrollbars.

overflow-x

Funciona como el overflow pero con la particularidad de que controla el comportamiento del
desbordamiento en el eje horizontal (ancho).

overflow-y
Funciona como el overflow pero con la particularidad de que controla el comportamiento del
desbordamiento en el eje vertical (alto).

margin
El comando margin se utiliza para definir el espacio exterior de un elemento, es decir, el espacio entre
el borde del elemento y los elementos que lo rodean. Los márgenes permiten separar y posicionar elementos en
una página web, mejorando la representación visual y la estructura del diseño.
Se pueden especificar valores individuales:
➢ margin-top: margen superior.
➢ margin-right: margen derecho.
➢ margin-bottom: margen inferior.
➢ margin-left: margen izquierdo.
 O podemos realizar valores combinados los cuales se aplican según el número de valores y su
posición:
➢ Con 1 valor: aplicamos ese valor a todos los márgenes.
➢ Con 2 valores: el primer valor establece el margen vertical y el segundo el margen horizontal.
➢ Con 3 valores: el primer valor establece el margen superior, el segundo el margen horizontal y el
tercero el margen inferior.
➢ Con 4 valores: el primer valor establece el margen superior, el segundo el derecho, el tercero el
izquierdo y el último el inferior.
Por último, también podemos añadir el valor auto para centrar un elemento horizontalmente dentro de
su contenedor (funciona solo si se ha establecido un width para el elemento) o podemos aplicar un valor 0 para
eliminar cualquier margen.

padding
La propiedad padding se utiliza para definir el espacio interior de un elemento, es decir, el espacio entre
el contenido del elemento (como texto o imágenes) y su borde. Esta propiedad es fundamental para mejorar la
legibilidad y la estética de los elementos en una página web. Posee los mismo valores que el margin ( padding-top,
padding-right, padding-bottom y padding-left; así como los valores combinados).

border
La propiedad border se utiliza para aplicar un borde alrededor de un elemento. Esta propiedad controla
el estilo, el grosor y el color del borde, mejorando la estructura visual de una página web o destacando elementos
especificos.
Puede definirse de manera individual:
➢ border-widht: establece el grosor del borde.
➢ border-style: establece el estilo visual del borde. Posee los siguientes valores: none (sin borde); solid
(borde sólido, continuo); dashed (borde con guiones); dotted (borde punteado); double (doble
borde); groove (efecto de surco); ridge (efecto de cresta); inset (efecto de borde embebido); y outset
(efecto de borde sobresaliente).
➢ border-color: define el color del borde. Se deben utilizar los valores de color (codigo hexadecimal;
rgb, rgba, etc.).
O de manera abreviada colocando primero el valor del grosor, seguido del valor del estilo y por último
el color.
También podemos aplicarselo a un lado especifico usando border-top, border-right, border-bottom y
border-left y añadiendo la propiedad que queramos cambiar, por ejemplo: border-top-color.

border-radius
Border-radius es una propiedad que se utiliza para definir el radio de las esquinas de un elemento. Esta
propiedad permite redondear las esquinas de un borde, creando un efecto visual más suave y atractivo en los
elementos de una página web. Podemos aplicarle valores abreviados:
➢ 1 valor: aplica a todas las esquinas
➢ 2 valores: el primero aplica a las esquinas superior izquierda e inferior derecha y el segundo valor
aplica a la superior derecha y la inferior izquierda.
➢ 3 valores: el primero aplica a la superior izquierda, el segundo a la superior derecha y el tercero a las
inferiores.
 ➢ 4 valores: el primero aplica a la superior izquierda, el segundo a la superior derecha, el tercero a la
inferior derecha, y el último a la inferior izquierda.
O tambien le añadimos entre ambas palabras: top-left, top-right, bottom-left y bottom-right para
especificar la esquina. Ejemplo: border-top-left-radius.
También podemos aplicar el valor en porcentajes, lo que permite crear formas más complejas como
círculos o elípses.

border-image
Es una propiedad que te permite utilizar una imagen como borde de un elemento. Esta propiedad
ofrece mucha flexibilidad visual, ya que puedes personalizar los bordes con imágenes, permitiendo una apariencia
más compleja y estilizada. Esta propiedad posee las siguientes especificaciones:
➢ border-image-source: especifica la URL de la imagen que se usará como borde.
➢ border-image-slice: divide la imagen en nueve secciones (cuadro 3x3). Los cuatro lados del bordese
toman de estas secciones. Puedes usar valores en pixeles o en porcentajes.
➢ border-image-width: define el grosor del borde creado a partir de la imagen.
➢ border-image-outset: especifica cuánto sobresaldrá la imagen del borde fuera de su contenedor.
➢ border-image-repeat: define como se repetirá o ajustará la imagen a lo largo de los bordes. Los
valores posibles son: stretch, estira la imagen para ajustarse al tamaño del borde; repeat, repite la
imagen a lo largo del borde; y round, repite la imagen, pero ajusta el tamaño para encajar
exactamente.

box-sizing
La propiedad box-sizing controla cómo se calculan el ancho y el alto de un elemento. Afecta cómo el
navegador mide los elementos y garantiza que el tamaño de los elementos sea consistente y más fácil de manejar,
lo que es especialmente importante en diseños responsivos. Esta propiedad posee dos valores principales:
➢ content-box: es el valor por defecto. Cuando usas content-box, el ancho y el alto que defines solo
afectan al área de contenido del elemento. Esto significa que el padding y el border se agregan al
tamaño definido. Es decir supongamos que tenemos un elemento que le hemos dado un valor de
100px, un padding de 25px y un border de 25px a cada lado. Al tener estos valores el navegador
entenderá que el tamaño del contenedor es de 150px.
➢ border-box: es el valor más usado debido a su comportamiento más práctico. Con border-box, el
ancho y el alto que defines incluyen el área de contenido, el padding y el border. Esto significa que
el tamaño total del elemento no cambia cuando añades padding o border, haciendo que sea más fácil
controlar el tamaño final del elemento. En el mismo ejemplo anterior, si usáramos border-box, el
tamaño del contenedor incluirá el padding y el border dentro del tamaño que hemos predefinido
quedando el contenedor con un tamaño de 100px.

block-start/block-end
Estas propiedades permiten definir el margen, el padding, y la posición de bordes en relación con el flujo
del contenido, teniendo en cuenta el esquema de escritura de la página. Se usan en lugar de la propiedades
tradicionales como top, bottom, margin-top, margin-bottom,etc., que están basadas en un eje fijo (vertical u
horizontal).
Estas propiedades lógicas son útiles para crear diseños más flexibles y adaptables que cambian su
comportamiento en función del idioma y dirección del texto.
De esta forma:
 ➢ margin-block-start y margin-block-end: son las versiones lógicas de margin-top y margin-bottom.
➢ padding-block-start y padding-block-end: versiones lógicas de padding-top y padding-bottom.
➢ border-block-start y border-block-end: versiones lógicas de border-top y border-bottom.
En resumen estas propiedades son esenciales para crear interfaces globales y diseños fluidos.

inline-start/inline-end
Estas propiedades son identicas a block-start y block-end con la particularidad de que se basan en el eje
horizontal. Así pues:
➢ margin-inline-start y margin-inline-end: son las versiones lógicas de margin-left y margin-right.
➢ padding-inline-start y padding-inline-end: versiones lógicas de padding-left y padding-right
➢ border-inline-start y border-inline-end: versiones lógicas de border-left y border-right

Flexbox
Flexbox (Flexible Box Layout) es un modelo de diseño en CSS que permite organizar y alinear
elementos dentro de un contenedor de manera eficiente, incluso cuando el tamaño de los elementos es
desconocido o dinámico. Flexbox está diseñado para distribuir espacio y alinear elementos en contenedores de
una manera flexible, haciendo que sea más fácil crear layouts responsivos.
Dentro del flexbox debemos entender que hay 2 conceptos claves: el flex container y el flex items.
El flex container es el elemento padre que tiene activado el modo de diseño flexible. Se convierte en
contenedor flexible cuando aplicas la propiedad display: flex o display: inline-flex; y el flex items son los
elementos hijos directos del contenedor flexible que serán organizados en la dirección y alineación especificada.
A continuación, encontraremos las propiedades pertenecientes a este grupo:

display
Se utiliza para controlar cómo se muestran o se comportan los elementos HTML en una página web,
definiendo si un elemento debe mostrarse como bloque, en línea, como tabla, entre otros. Aunque lo tengamos
añadido en el apartado de flexbox por su importancia en el mismo, la propiedad display posee varios valores:
➢ block: hace que un elemento se comporte como un bloque, ocupando todo el ancho disponible
➢ inline: hace que un elemento se comporte como línea, solo ocupa el espacio necesario
➢ inline-block: combina las dos anteriores, se comporta como una línea pero puedes añadirle ancho y
alto.
➢ none: oculta completamente el elemento, tanto visualmente como el espacio que ocupa.
➢ flex: activa el modelo de caja flexbox, se debe aplicar al contenedor flexible.
➢ grid: activa el sistema de cuadrícula CSS Grid, que permite crear estructuras complejas y bien
organizadas de filas y columnas para el diseño de la página.
➢ table: hace que un elemento se comporte como una tabla.
visibility
Está propiedad al igual que display no es exclusiva de flexbox. Controla si un elemento es visible o no,
pero se diferencia de display: none en que este visibility no elimina el espacio que ocupa el elemento. Posee los
siguientes valores:
➢ visible: por defecto. El objeto es visible en la página y ocupará su espacio habitual.
 ➢ hidden: el elemento será invisible pero seguirá ocupando el lugar en el layout.
➢ collapse (solo para tablas o elementos en un contexto de tabla): colapsa las filas o columnas, lo que
significa que oculta el elemento y no ocupa espacio.
position
La propiedad position se utiliza para controlar cómo se posicionan los elementos en una página web.
Define el comportamiento de un elemento en relación con su entorno o contenedor y cómo se coloca en el
flujo del documento. Al igual que los anteriores, position no es exclusivo de flex pero debido a su importancia en
la flexbox se añade a este grupo. Sus valores principales son:
➢ static: es el valor por defecto. El elemento sigue el flujo normal del documento, es decir se posiciona
donde debería estar según su lugar en el HTML (no se pueden usar las propiedades de
desplazamiento: top, right, bottom, left).
➢ relative: el elemento permanece en el flujo del documento, pero puedes desplazarlo desde su
posición original usando las propiedades top, right, bottom o left. El espacio que ocupa el elemento
sigue estando en su posicion original, aunque visualmente se haya movido.
➢ absolute: el elemento se elimina del flujo normal del documento, lo que significa que no afecta el
posicionamiento de otros elementos. Se posiciona en relación con su contenedor más cercano que
tenga una posición diferente a static y puedes usar top, right, bottom y left para colocar el elemento.
➢ fixed: el elemento se posiciona en relación con la ventana del navegador, por lo que permanece en
la misma posición incluso cuando haces scroll en la página. Es similar a absolute, se elimina del flujo
del documento y no afecta a otros elementos.
➢ sticky: es una mezcla entre relative y fixed. El elemento actúa como relative hasta que el usuario hace
scroll más allá de un cierto punto, momento en el que se “fija” en su lugar como si fuera fixed. Es
útil para crear encabezados pegajosos que permanecen visibles cuando el usuario hace scroll.

z-index
La propiedad z-index se utiliza para controlar el orden de apilamiento de los elementos en una página
web, es decir, qué elementos se muestran encima o debajo de otros cuando se superponen visualmente. Esto
solo funciona con elementos posicionados con la propiedad position que no sean static. Puede tener valores
negativos (colocandose por debajo) o positivos (colocandose por encima). Cuanto mayor sea el valor más por
encima se encontrará el elemento en relación a los de menor valor nivel. Es decir, si en una página hay un
elemento con z-index 1, otro con 0 y otro con -1, el primero estará a mayor nivel q los otros dos, el segundo
estará bajo el primero pero por encima del tercero y el último estará detrás de todo.
Los elementos pueden formar lo que se llama un contexto de apilamiento. Si un elemento tiene un
valor de z-index y está dentro de un contenedor, ese valor se evaluará solo dentro del contexto de ese
contenedor. Esto significa que el orden de apilamiento puede verse afectado por el contenedor padre.

float
Esta propiedad se utiliza para hacer que un elemento “flote” a un lado de su contenedor, permitiendo
que el texto y otros elementos lo rodeen o lo acompañen en el flujo del documento. Originalmente fue diseñada
para controlar el posicionamiento de imágenes y su relación con el texto, pero se ha utilizado en diversos casos
para crear diseños de columnas ande de que otras técnicas modernas como Flexbox o CSS Grid se volvieran
populares. Los valores aplicables son:
➢ left: el elemento flota hacia el lado izquierdo del contenedor y los demás elementos se ajustan al
lado derecho.
 ➢ right: el elemento flota hacia el lado derecho del contenedor y los demás elementos se ajustan al
lado izquierdo.
➢ none: es el valor por defecto. El elemento no flota y sigue el flujo normal del documento
➢ inherit: el elemento hereda el valor de float de su elemento padre.
Cuando todos los elementos dentro de un contenedor usan float, el contenedor “colapsa” porque, al
usar float, los elementos se sacan del flujo normal del documento. Como resultado, el contenedor puede
parecer que tiene un alto de 0px. Para evitar este problema se utiliza la propiedad clear.

clear
La propiedad clear se utiliza para controlar la relación de un elemento con los elementos flotantes
anteriores. Indica que el elemento no debe colocarse junto a elementos flotantes (en un lado específico). Los
valores son:
➢ left: el elemento no se colocará junto a un elemento flotante a la izquierda.
➢ right: el elemento no se colocará junto a un elemento flotante a la derecha.
➢ both: el elemento no se colocará junto a ningún elemento flotante (ni a la izquierda ni a la derecha).
flex
Es una propiedad que se utiliza en los elementos hijos de un contenedor flex para definir cómo deben
crecer, reducirse o distribuirse en relación con otros elementos dentro del mismo contenedor. Esta propiedad es
un acceso directo a tres propiedades:
➢ flex-grow (crecimiento): define cuánto espacio adicional puede ocupar un elemento en relación con
los otros elementos flexibles. Un valor de 1 indica que el elemento puede crecer y ocupar espacio
extra y un valor de 0 (por defecto) significa que el elemento no crecerá.
➢ flex-shrink (encogimiento): define cómo se encoge un elemento cuando hay menos espacio del
necesario. Un valor de 1 permite el encogimiento y un valor 0 hará que el elemento no se encoja.
➢ flex-basis (tamaño base): define el tamaño inicial del elemento antes de aplicar el crecimiento o
encogimiento. Puede poseer cualquier valor de ancho o alto (px, %, rem, etc.) o el valor auto, lo que
significa que el tamaño depende del contenido del elemento.
Si queremos añadir la información de manera abreviada podemos poner la propiedad flex, seguido del
valor de flex-grow, el valor de flex-shrink y el valor de flex-basis.

flex-direction
Es una propiedad que define en que dirección se colocarán los elementos hijos (flex items) dentro de
un contenedor flex (flex-container). En otras palabras, determina si los elementos se organizan en fila
(horizontalmente) o en columna (verticalmente), y también si ese orden se invierte. Los valores son los
siguientes:
➢ row: los elementos flexibles se organizan en una fila horizontal, de izquierda a derecha (si el idioma
del documento es uno que se escribe de derecha a izquierda, como árabe o hebreo, las disposición
será de derecha a izquierda).
➢ row-reverse: los elementos se organizan en una fila horizontal pero en orden inverso, es decir, de
derecha a izquierda.
➢ column: los elementos se organizan en una columna vertical, de arriba hacia abajo.
 ➢ column-reverse: los elementos se organizan en una columna vertical pero en orden inverso, de
abajo hacia arriba.

flex-wrap
La propiedad flex-wrap es parte del diseño Flexbox y se utiliza para controlar el comportamiento de los
elementos hijos (flex items) dentro de un contenedor flexible (flex container) cuando no hay suficiento espacio
disponible para acomodarlos en una sola línea.
Por defecto, los elementos en un contenedor flex se alinean en una sola línea. Si el espacio disponible se
llena, los elementos pueden desbordarse o sobresalir del contenedor. La propiedad flex-wrap permite que los
elementos se envuelvan a la siguiente línea o columna, manteniendo el diseño ordenado y dentro de los límites
del contenedor.
Los posibles valores de flex-wrap son:
➢ nowrap: es el valor por defecto. Los elementos se mantendrán en una sola línea, y el contenido que
no quepa en la línea se desbordará.
➢ wrap: los elementos flexibles se envolverán a la siguiente línea cuando no haya suficiente espacio en
la línea actual.
➢ wrap-reverse: los elementos flexibles también se envolverán a la siguiente línea, pero en orden
inverso.

flex-flow
Es una propiedad abreviada en CSS que combina las propiedades flex-direction y flex-wrap. Estas
dos propiedades son clave en el sistema Flexbox para controlar la dirección y la envoltura (wrapping) de los
elementos flexibles dentro de un contenedor flex. La sintaxis es la siguiente:
flex-flow: valor del flex-direction valor del flex-wrap
De esta forma podemos realizar los cambios al mismo tiempo de manera más abreviada generando así
que se utilizen menos líneas de código.

justify-content
Antes de explicar esta propiedad debemos tener en cuenta que el flujo del texto contiene un eje principal
y un eje secundario. El eje principal por defecto es el que va en horizontal mientras que el secundario será el que
va en vertical.

Esto cambia en el caso que utilicemos el flex-direction: column (y su reverse), que, al colocar los items
unos sobre otros, cambiará el sentido de los ejes donde el principal será el vertical y el secundario el horizontal.
Dicho esto, justify-content es una propiedad de CSS Flexbox y Grid que controla cómo se distribuyen
los elementos hijos (flex items) a lo largo del eje principal (main axis) dentro de un contenedor flex.
A continuación veremos los posibles valores que puede tener:
➢ flex-start: los elementos se alinean al inicio del eje principal.
 ➢ flex-end: los elementos se alinean al final del eje principal.
➢ center: los elementos se centran a lo largo del eje principal.
➢ space-between: los elementos se distribuyen uniformemente a lo largo del eje principal, con
espacios iguales entre ellos, pero sin espacio extra al inicio y final.
➢ space-around: los elementos tienen espacio igual alrededor de ellos, es decir, hay espacios antes,
entre, y después de los elementos, pero los espacios entre ellos son el doble de los espacios al
principio y al final.
➢ space-evenly: los elementos tienen espacio uniformemente distribuido tanto entre ellos como al
principio y al final del contenedor.

align-items
Align-items es una propiedad de CSS Flexbox y Grid que se utiliza para controlar la alineación
vertical de los elementos hijos (flex items) dentro de un contenedor flexible a lo largo del eje transversal
(cross axis). Sus valores son:
➢ stretch: es el valor por defecto. Los elementos flexibles se estiran para llenar todo el contenedor a lo
largo del eje transversal, siempre que no se les haya dado una altura o ancho específico.
➢ flex-start: los elementos se alinean al inicio del eje secundario (transversal).
➢ flex-end: los elementos se alinean al final del eje secundario.
➢ center: los elementos se alinean al centro del eje secundario.
➢ baseline: los elementos se alinean según la línea base de su contenido, lo que significa que el texto o
el contenido dentro de los elementos estará alineado al mismo nivel.

align-content
Se utiliza para controlar cómo se distribuyen y alinean varias filas o líneas de elementos dentro de un
contenedor flexible (flex container), a lo largo del eje transversal (cross axis), cuando hay espacio disponible
en el contenedor. También es aplicable en Grid.

Es importante notar que align-content solo tiene efecto cuando hay múltiples líneas de elementos, es
decir, cuando los elementos flexibles ocupan más de una fila o columna, lo que generalmente ocurre cuando se
utiliza la propiedad flex-wrap para permitir la envoltura de los elementos. Esto es su principal diferencia con la
propiedad align-items.
Los valores de align-content son los siguientes:
➢ stretch: es el valor por defecto: las filas de elementos flexibles se estiran para llenar todo el espacio
disponible en el contenedor a lo largo del eje transversal.
➢ flex-start: las filas de elementos se alinean al inicio del contenedor en el eje transversal.
➢ flex-end: las filas de elementos se alinean al final del contenedor en el eje transversal.
➢ center: las filas de elementos se centran a lo largo del eje transversal dentro del contenedor.
➢ space-between: las filas se distribuyen de manera que haya espacios iguales entre ellas, sin espacio
adicional en los bordes del contenedor.
➢ space-around: las filas tienen espacio igual alrededor de ellas, es decir, hay espacios antes, entre y
después de las filas, pero los espacios entre las filas son el doble de los espacios al principio y al final
del contenedor.
 ➢ space-evenly: las filas tienen espacio uniforme tanto entre ellas como en los bordes del contenedor,
distribuyéndose de manera equilibrada.

place-content
Es una propiedad que sirve para abreviar las funcionalidades de align-content y justify-content haciendo
que ocupemos menos lineas de código. Las sintaxis es la siguiente:
place-content: valor de align-content valor de justify-content

align-self
Permite ajustar la alineación de un elemento individual dentro de su contenedor, ignorando la
alineación definida para los demás elementos. En otras palabras, align-self te da control sobre cómo se alinea
un solo elemento a lo largo del eje transversal (que puede ser vertical u horizontal dependiendo del diseño) sin
afectar a los demás elementos. Posee los siguientes valores:
➢ auto: es el valor por defecto. El elemento toma el valor de align-items definido en su contenedor.
➢ flex-start: el elemento se alinea al inicio del eje transversal.
➢ flex-end: el elemento se alinea al final del eje transversal.
➢ center: el elemento se centra a lo largo del eje transversal.
➢ baseline: el elemento se alinea según la línea base del contenido, lo que asegura que el texto dentro
de los elementos alineados esté al mismo nivel.
➢ stretch: el elemento se estira para llenar el contenedor a lo largo del eje transversal, siempre que no
tenga un tamaño fijo.

gap
Define el espacio (o brecha) entre las filas y/o columnas de los elementos dentro de un contenedor.
Esta propiedad es especialmente útil para separar elementos sin tener que utilizar márgenes (margin)
individuales en cada uno, haciendo el código más limpio y fácil de mantener. Si solo le ponemos un valor, se le
aplicará tanto a la distancia entre las columnas como a la distancia entre las filas. Si ponemos 2 valores el primero
se le aplicara al espacio entre las filas y el segundo al de las columnas.
Si solo queremos especificar uno de los espacios podemos utilizar las siguientes propiedades:
➢ row-gap: controla el espacio entre filas.
➢ column-gap: controla el espacio entre columnas.
order
Permite cambiar el orden visual de los elementos dentro de un contenedor flexible (flex container),
independientemente del orden en el que aparecen en el código HTML.
Por defecto, los elementos en un contenedor flex se presentan en el orden en que están definidos en el
código HTML. Sin embargo, con la propiedad order, puedes alterar este orden sin modificar la estructura
HTML, lo que facilita el diseño flexible y la organización de contenido en interfaces responsivas.
El valor de order es un número entero (positivo, negativo o cero). Por defecto, todos los elementos
tienen un valor de order: 0.
➢ Un número menor aparece antes.
➢ Un número mayor aparece después.
Reglas
En CSS, los comandos que comienzan con el símbolo @ se denominan directivas o reglas at-rules (at-
rules en inglés). Estas directivas permiten a los desarrolladores definir reglas especiales para el procesamiento de
los estilos, como importar hojas de estilos, establecer condiciones para aplicar estilos (por ejemplo, según el
tamaño de la pantalla) o definir conjuntos de fuentes personalizadas.

@media screen
La directiva @media screen es una de las más comunes en CSS y se utiliza para aplicar media queries o
consultas de medios. Estas permiten adaptar el diseño de una página web según las características del dispositivo
en el que se está visualizando, como el ancho de la pantalla, la resolución, la orientación (horizontal o vertical),
entre otros.
El término screen dentro de @media screen especifica que las reglas CSS definidas dentro de esa
consulta se aplicarán únicamente a dispositivos con pantallas, como monitores de computadoras, teléfonos
móviles, tabletas, etc. Esto excluye otros tipos de medios, como la impresión (para la que se usaría @media
print).

En este ejemplo, Sin media query: El color de fondo del <body> será blanco en cualquier dispositivo.
Con media query @media screen: Si el ancho de la pantalla del dispositivo es igual o menor a 768 píxeles
(como un teléfono o una tableta), el color de fondo cambiará a azul claro (lightblue).

@media print
Se utiliza para aplicar estilos específicos cuando una página web se imprime. Esto permite adaptar el
diseño de una página web para que se vea mejor en papel, lo que puede ser diferente de cómo se muestra en una
pantalla.

@support
Se utiliza para aplicar estilos condicionales basados en la compatibilidad del navegador con ciertas
características de CSS. Esta regla permite verificar si el navegador soporta una propiedad o un valor específico, lo
que te permite escribir CSS más robusto y adaptable. Debemos utilizarlo para cuando un navegador aún no
puede leer ciertas propiedades y valores que no han implementado aún.

@container
Es una característica de CSS que forma parte de la especificación de "Container Queries". Permite
aplicar estilos a un elemento en función del tamaño de su contenedor, en lugar del tamaño de la ventana del
navegador. Esto es especialmente útil para diseñar componentes más adaptables y responsivos, permitiendo que
los estilos se ajusten según el contexto en el que se utilicen.

@page
Es una característica que se utiliza para definir estilos específicos para las páginas cuando se imprimen.
Permite a los desarrolladores controlar la apariencia de una página impresa, estableciendo propiedades como
márgenes, tamaños y otros estilos que se aplican exclusivamente en el contexto de la impresión.
Para cambiar el tamaño de la página a imprimir debemos utilizar la propiedad size (utilizando como
selector la directiva @page). Así podemos añadirle los valores del width y el height si lo queremos personalizado
o poner formato A4 o letter (carta).
 También podemos usar la propiedad margin para establecer un margen:
➢ Si añadimos un valor: afectará a todos los márgenes.
➢ Si añadimos 2 valores: el primero afectará a arriba/abajo y el segundo izquierda/derecha.
➢ Si añadimo 3 valores: el primero será arriba, el segundo izquierda/derecha y el tercero abajo.
➢ Si añadimos 4 valores: el primero será arriba, el segundo será derecha, el tercero abajo y el último
izquierda.
Tambien podemos encontrar ligadas a esta directiva las propiedades orphans y widows.
➢ orphans: se utiliza en el contexto de la impresión o cuando se visualizan documentos en pantallas
grandes. Su propósito es controlar el número mínimo de líneas de un párrafo que deben permanecer
al final de una página o columna antes de que el contenido sea dividido por un salto de página o de
columna. Esto ayuda a evitar que una sola línea (o pocas líneas) de un párrafo se quede "huérfana" al
final de la página, lo que puede afectar la legibilidad.
➢ widows: es similar, pero se refiere al número mínimo de líneas que deben quedar al principio de una
página o columna después de un salto.
Por último, podemos también modificar los saltos de página con las propiedades:
➢ page-break-inside: se utiliza para controlar si se permite o no un salto de página dentro de un
elemento cuando se imprime un documento. Esto es útil cuando se desea mantener ciertos
elementos completos en una sola página, como tablas, imágenes o secciones de texto, evitando que
se dividan entre páginas cuando el contenido se imprime. Puede tener los valores: auto (valor por
defecto) que permite el salto de página ocurra dentro del elemento si es necesario; y avoid, que evita
que el elemento se divida en dos páginas.
➢ page-break-before/page-break-after: controla si se debe realizar un salto de página antes o después
de que el elemento seleccionado sea impreso, respectivamente. Comparten los valores: auto (por
defecto), no se fuerza ningún salto de página antes/después del elemento; always, siempre fuerza el
salto de página; avoid, intenta evitar un salto de página antes/después del elemento; left, fuerza un
salto de página antes/después del elemento para que la nueva página sea una página izquierda
(utilizado en impresiones de doble cara); y right, fuerza un salto de página antes/después del
elemento para que la nueva página sea una página derecha (utilizado en impresiones de doble cara).
@import
Se utiliza para importar otros archivos CSS dentro de un archivo CSS principal. Esto permite
modularizar y organizar el código CSS de manera más efectiva, facilitando la gestión de estilos en proyectos más
grandes.
@layer
Es una característica reciente en CSS que se utiliza para crear capas de estilos. Permite a los
desarrolladores organizar y controlar el orden de los estilos de manera más efectiva, lo que ayuda a resolver
problemas de especificidad y a gestionar el CSS en proyectos grandes. Esta regla está diseñada para hacer que el
CSS sea más modular y manejable.

Fondo
En el contexto del diseño de sitios web, el fondo (o background) se refiere a la imagen, color o
gradiente que aparece detrás del contenido visible en una página web o elemento HTML. Las propiedades
relacionadas con el fondo son las siguientes:
color
El comando color se utiliza para establecer el color del texto dentro de un elemento en HTML. Es una
de las propiedades más básicas y fundamentales del diseño web, y su propósito es cambiar el color de las letras
para hacerlas más visibles, estilizadas o adaptadas al esquema de diseño de una página web.
En cuanto al valor podemos aplicar:
➢ El nombre de un color (red)
 ➢ Un valor hexadecimal (#000000)
➢ Un valor rgb (rgb:(0, 0, 0)) o rgba (con opacidad)
➢ O un valor hsl (120%, 100%, 50%) o hsla (con opacidad)
background-color
Es una propiedad que se utiliza para establecer el color de fondo de un elemento HTML, como un
párrafo, un div, un encabezado o incluso toda la página web. Esta propiedad es fundamental para el diseño web,
ya que permite mejorar la apariencia visual y resaltar diferentes secciones de una página.
Posee los mismos valores que la propiedad color.
background-image
Es una propiedad de CSS que se utiliza para establecer una imagen como fondo de un elemento
HTML, como un div, un párrafo o incluso toda la página. Esta propiedad permite agregar imágenes decorativas o
funcionales detrás del contenido de un elemento, lo que mejora el diseño y la experiencia visual de una página
web.
El valor posee el url de la imagen que se aplicará de fondo y su sintaxis es la siguiente:
background-image: url (‘ruta de la imagen’)
background-repeat
Se utiliza para controlar cómo se repite una imagen de fondo dentro de un elemento HTML. De forma
predeterminada, cuando se asigna una imagen de fondo a un elemento, esta se repite en mosaico (horizontal y
verticalmente) para llenar todo el área del elemento. La propiedad background-repeat te permite modificar este
comportamiento y definir si la imagen se debe repetir y en qué dirección.
Estos son sus valores:
➢ repeat: es el valor predeterminado. La imagen de fondo se repite en ambas direcciones, horizontal
y verticalmente, llenando todo el espacio del elemento.
➢ no-repeat: la imagen no se repite. Se muestra una sola vez.
➢ repeat-x: la imagen se repite solo horizontalmente.
➢ repeat-y: la imagen se repite solo verticalmente.
➢ space: la imagen de fondo se repite tantas veces como sea posible sin recortar, y el espacio sobrante
entre cada repetición se distribuye uniformemente.
➢ round: la imagen se ajusta y se escala para que se repita tantas veces como sea posible, pero sin
recortar. Si la imagen no cabe completamente, se escala para ajustar el espacio.
background-attachment
Se utiliza para controlar cómo se comporta la imagen de fondo de un elemento cuando se hace scroll
(desplazamiento) en la página. Es decir, esta propiedad define si la imagen de fondo se mueve junto con el
contenido cuando el usuario desplaza la página o si permanece fija en su posición.
Podemos encontrar 3 valores ligados a esta propiedad:
➢ scroll: es el valor predeterminado. La imagen de fondo se desplaza junto con el contenido del
elemento cuando se hace scroll en la página.
➢ fixed: la imagen de fondo permanece fija en su posición, independientemente del desplazamiento
de la página. Esto significa que mientras el contenido se desplaza, la imagen de fondo no lo hace.
➢ local: la imagen de fondo se desplaza junto con el contenido del elemento, pero si ese elemento tiene
una barra de desplazamiento interna (como un div con overflow), la imagen de fondo se desplaza
solo cuando el contenido de ese elemento se desplaza. Es similar a scroll, pero afecta al
desplazamiento interno de un contenedor específico.
background-position
Es una propiedad de CSS que se utiliza para establecer la posición de la imagen de fondo dentro de un
elemento HTML. Define exactamente dónde se coloca la imagen de fondo en relación con el área de fondo de
un elemento, como un div, un párrafo o incluso toda la página web. Esta propiedad debe poseer siempre dos
valores: el primero especificando el valor horizontal y el segundo el valor vertical.

Los posibles valores son:

➢ Valores en porcentaje: puedes usar porcentajes para definir posiciones más precisas. El 0%
representa el borde superior o izquierdo, y el 100% representa el borde inferior o derecho.
➢ Valores en unidades de medida: también puedes usar unidades como px, em, rem, etc., para definir
una posición específica.
➢ Palabras clave: como top, bottom, left, right o center.

background-clip
Te permite controlar hasta dónde se aplicará la imagen o el color de fondo de un elemento. Es
especialmente útil cuando deseas controlar cómo se comporta el fondo en relación con el borde o el relleno
(padding) del elemento.
Los valores de esta propiedad son 3:
➢ border-box: es el valor por defecto. El fondo se extiende hasta el borde exterior del elemento, es
decir, el borde del elemento. Esto significa que el fondo llenará tanto el contenido como el relleno
(padding) y el área del borde.
➢ padding-box: el fondo solo se extiende hasta el área del relleno (padding) del elemento, pero no
cubre el borde. Esto significa que el color o imagen de fondo no llegará al borde, solo al área de
relleno y contenido.
➢ content-box: el fondo solo se aplica al área del contenido, excluyendo el relleno (padding) y el
borde. En este caso, el fondo no cubre el borde ni el área de relleno, solo el contenido del elemento.
background-origin
Es una propiedad de CSS que define el punto de origen (o el área de referencia) desde donde se
posiciona la imagen de fondo o el color de fondo en un elemento. En otras palabras, establece cuál será el área
desde la que se comenzará a dibujar el fondo, en relación con el borde, el relleno (padding) o el contenido del
elemento.
Posee los siguientes valores:
➢ border-box: el fondo se posiciona desde el borde exterior del elemento, es decir, desde el borde
más externo del contenedor. Esto incluye el área de borde, relleno y contenido.
➢ padding-box: es el valor predeterminado. El fondo comienza desde el borde del relleno (padding).
Esto significa que el fondo no incluirá el área del borde, pero sí cubrirá el área de contenido y
relleno.
➢ content-box: el fondo comienza desde el borde del área de contenido, ignorando tanto el borde
como el relleno. En este caso, el fondo solo cubrirá el área de contenido, no el relleno ni el borde.
background-size
Define el tamaño de la imagen de fondo de un elemento. Esta propiedad permite ajustar cómo se
muestra la imagen de fondo dentro del área del elemento, ya sea escalándola, repitiéndola o mostrándola a su
tamaño original.
Estos son sus posibles valores:
➢ auto: es el valor por defecto. La imagen mantiene su tamaño original. Si el tamaño de la imagen es
mayor que el del contenedor, se recortará. Si es más pequeña, solo cubrirá parte del área de fondo.
➢ cover: la imagen de fondo se redimensiona para que cubra completamente el contenedor. Esto
significa que la imagen puede recortarse para mantener sus proporciones, pero se asegura de cubrir
todo el área del fondo.
 ➢ contain: la imagen se ajusta para que encaje completamente dentro del contenedor sin recortarse,
pero manteniendo sus proporciones. Esto significa que la imagen se escalará para que quepa dentro
del contenedor, pero puede no cubrir todo el fondo, dejando espacio en blanco si la imagen es más
pequeña que el contenedor.
➢ Valores de medida: puedes especificar el tamaño del fondo usando unidades como pixeles,
porcentajes, o incluso valores combinados. Si especificamos un valor afectará a todos los lados y
si aplicamos dos valores, el primero afectara al ancho y el segundo al alto.
background: linear-gradient (...)
Es una función de CSS que permite crear un degradado lineal como fondo. Un degradado es una
transición suave entre dos o más colores. En el caso de un degradado lineal, los colores cambian a lo largo de una
línea recta, que puede tener cualquier ángulo o dirección.
Los valores que puede llevar esta función son:
➢ Direcciones predefinidas (es opcional): podamos usar to right, to left, to top o to bottom para
definir hacia que dirección irá el degradado.
➢ Ángulos: puedes especificar un ángulo en grados (deg). Así 0deg, hace que el degradado sea hacia
arriba; 90deg, de izquierda a derecha; 180deg, de arriba a abajo; y 45deg, en diagonal.
➢ Colores: debemos añadir, como mínimo, dos colores (hexadesimal, rgb/rgba, hsl/hsla o nombre del
color). Si queremos especificar hasta donde llega cada color podemos utilizar porcentajes junto a
cada color para indicarlo.
Aquí dos ejemplos de la sintaxis:
background: linear-gradient (to left, red, blue)
background: linear-gradient (45deg, red 25%, blue 50%, yellow 75%)
background: radial-gradient (…)
Es una función de CSS que se utiliza para crear un degradado radial como fondo de un elemento. A
diferencia del linear-gradient, en el que los colores cambian a lo largo de una línea recta, en radial-gradient los
colores se dispersan de manera circular o elíptica, partiendo desde un punto central hacia afuera.
Aquí podemos añadir los siguientes valores:
➢ Forma (opcional): especifica si queremos un degradado en forma de círculo (circle) o elipse (ellipse).
➢ Posición (opcional): define el punto central del degradado. El valor predeterminado es center (el
centro del elemento), pero se puede ajustar usando coordenadas (por ejemplo, left, right, top,
bottom o porcentajes -al aplicar porcentajes debemos añadir 2 valores: valor horizontal y valor
vertical- ).
➢ Colores: debemos añadir, como mínimo, dos colores (hexadesimal, rgb/rgba, hsl/hsla o nombre del
color). Si queremos especificar hasta donde llega cada color podemos utilizar porcentajes junto a
cada color para indicarlo.
Un ejemplo de la sintaxis:
background: radial-gradient(circle at 50% 50%, red, blue)
-Especificamos que queremos un circulo, donde el color rojo se extienda convirtiendose en azul desde el
centro.-
background: conic-gradient(…)
Crea un degradado cónico como fondo de un elemento. A diferencia de los degradados lineales o
radiales, en un degradado cónico los colores se distribuyen alrededor de un punto central siguiendo un patrón
circular, similar a los sectores de un gráfico de pastel o los colores de una rueda de colores.
Podemos indicar los siguientes valores:
➢ Ángulo: este valor determina desde qué ángulo comienza el degradado. Por ejemplo, si indicas from
90deg, el degradado comenzará en el ángulo de 90 grados, que sería hacia la derecha. Si no se
especifica, el degradado comienza en 0deg (que corresponde a la parte superior).
 ➢ Posición: define el centro desde el cual el degradado se proyecta. Por defecto, el degradado
comienza desde el centro del contenedor (at center), pero se puede ajustar a cualquier punto usando
coordenadas como at left, at right, at top, at bottom, o porcentajes (con dos valores: uno horizontal
y uno vertical).
➢ Colores: debemos añadir, como mínimo, dos colores (hexadesimal, rgb/rgba, hsl/hsla o nombre del
color). Si queremos especificar hasta donde llega cada color podemos utilizar porcentajes junto a
cada color para indicarlo.
opacity
Es una propiedad de CSS que se utiliza para ajustar el nivel de transparencia de un elemento HTML,
incluyendo su contenido, como texto, imágenes o bordes. El valor de opacity puede variar entre 0 y 1, donde 0
representa total transparencia (invisible) y 1 significa opacidad completa (el elemento es totalmente visible).
object-fit
El comando object-fit es una propiedad de CSS que se utiliza para controlar cómo se ajusta el contenido
de un elemento (generalmente imágenes o vídeos) dentro de su contenedor, cuando las dimensiones del
contenido no coinciden exactamente con las dimensiones del contenedor. Esta propiedad permite definir cómo
se debe comportar el contenido dentro de ese marco sin deformarse o recortarse de manera inapropiada.
Valores de object-fit:
➢ fill: es el valor por defecto. El contenido se estira para ajustarse al contenedor, aunque eso pueda
deformarlo.
➢ contain: el contenido mantiene sus proporciones originales y se escala para ajustarse al contenedor,
pero sin recortarse. Si el contenido no tiene las mismas proporciones que el contenedor, puede
haber espacio en blanco alrededor.
➢ cover: el contenido se escala para llenar completamente el contenedor, manteniendo sus
proporciones. Si las proporciones no coinciden, el contenido puede recortarse para evitar el espacio
en blanco.
➢ none: el contenido no se escala, sino que mantiene su tamaño original. Si es más grande que el
contenedor, se desbordará.
➢ scale-down: es como combinar none y contain. Escala el contenido solo si es más grande que el
contenedor. Si ya cabe dentro, no se escala.
object-position
La propiedad object-position es una propiedad de CSS que se utiliza en conjunto con object-fit para
especificar cómo se posiciona el contenido de un elemento (como imágenes o vídeos) dentro de su contenedor
cuando el tamaño del contenido no coincide con el tamaño del contenedor. Esta propiedad permite ajustar la
alineación del contenido en relación con el espacio disponible.
Los valores más comunes son:
➢ left: alinea el contenido al lado izquierdo del contenedor.
➢ right: alinea el contenido al lado derecho del contenedor.
➢ top: alinea el contenido en la parte superior del contenedor.
➢ bottom: alinea el contenido en la parte inferior del contenedor.
➢ center: alinea el contenido en el centro del contenedor.
➢ Porcentajes: aplicando dos valores porcentuales: el primero sigue el eje horizontal y el segundo el
vertical.
➢ Valores de longitud: valores fijos como px o em.
image-orientation
Se utiliza para controlar la orientación de una imagen en relación con su rotación original. Esta
propiedad es especialmente útil cuando se trabaja con imágenes que contienen metadatos EXIF, que son
comúnmente utilizados en fotografías tomadas con cámaras digitales y teléfonos móviles. Los metadatos EXIF
pueden incluir información sobre la orientación de la imagen, lo que permite que la imagen se muestre en la
dirección correcta sin necesidad de editar la imagen misma.
Los valores son:
➢ from-image: es el valor por defecto. Permite que el navegador utilice la información de orientación
del metadato EXIF de la imagen. Si la imagen tiene metadatos que indican que debe estar rotada, el
navegador aplicará esa rotación automáticamente.
➢ Ángulo: si aplicamos 0deg, no tendrá rotación; si aplicamos 90deg, rotará 90º en el sentido de las
agujas del reloj; si usamos 180deg, le dará la vuelta; y si aplicamos 270deg, rotará 270º.
image-rendering
Se utiliza para controlar cómo se muestra una imagen cuando se escala (ya sea para hacerla más grande o
más pequeña) dentro de un elemento. En particular, esta propiedad define el método que se utiliza para el
"resampling" o la interpolación de la imagen, lo que afecta su nitidez y calidad visual, especialmente en imágenes
con un estilo específico como gráficos de baja resolución o arte en píxeles.
Los valores más comunes:
➢ auto: es el valor por defecto. El navegador decide automáticamente cómo escalar la imagen,
normalmente utilizando técnicas de interpolación suavizada para que la imagen se vea lo mejor
posible cuando se redimensiona.
➢ crisp-edges: optimiza la imagen para mantener los bordes bien definidos y nítidos, lo cual es útil para
gráficos o imágenes que contienen líneas duras o transiciones de color abruptas (como pixel art). El
navegador puede desactivar la suavización de los píxeles para mantener la nitidez.
➢ pixelated: la imagen se escala utilizando una técnica de redimensionado basada en el aumento o
reducción de los píxeles, sin suavizar ni interpolar. Es ideal para gráficos retro o pixel art, ya que
mantiene los píxeles visibles y no suaviza los bordes, lo que da un efecto deliberadamente pixelado.
➢ smooth: indica al navegador que priorice una interpolación suave al escalar la imagen, lo que suaviza
los bordes y puede hacer que las imágenes de baja resolución se vean más suaves. En la práctica, este
valor es muy similar a auto, y su soporte puede variar entre navegadores.
Grid
Grid es un sistema de diseño de disposición en CSS que se utiliza para crear estructuras complejas de
manera sencilla y flexible en el diseño de páginas web. Es una de las herramientas más potentes para organizar
contenido en dos dimensiones (filas y columnas), lo que permite crear maquetas más organizadas y responsive
(adaptables a diferentes tamaños de pantalla) de una manera mucho más eficiente que otros enfoques anteriores
como el uso de float o flexbox para el mismo propósito. Para iniciar un grid, debemos utilizar la propiedad
display: grid.
Estas son las propiedades relacionadas con Grid:
grid-template-columns
Se utiliza para definir el número de columnas y sus tamaños dentro de una cuadrícula (grid). Con esta
propiedad, puedes especificar cómo deseas distribuir las columnas en términos de anchura dentro del
contenedor.
El número de columnas se especificará según la cantidad de valores que añadamos a la propiedad. El
valor que apliquemos determinará el tamaño de las columnas a lo ancho.
Los valores que puede poseer son:
➢ Valores fijos: como px o em.
➢ Valores flexibles: como fr (fracción) o porcentajes (%).
grid-template-rows
Se utiliza para definir el número y el tamaño de las filas en una cuadrícula (grid). Funciona de manera
muy similar a grid-template-columns, pero se aplica en el eje vertical, es decir, controla cómo se distribuyen las
filas en lugar de las columnas.
 Como en grid-template-columns, la cantidad de valores especificará el número de filas y su valor
determinará el tamaño a lo alto.
Los valores pueden ser:
➢ Valores fijos: como px o em.
➢ Valores flexibles: como fr (fracción) o porcentajes (%).
repeat (…)
La función repeat se utiliza para simplificar la definición de patrones repetitivos en las columnas o filas
de una cuadrícula. Es especialmente útil cuando deseas crear múltiples filas o columnas con el mismo tamaño o
patrón sin tener que escribirlo manualmente varias veces.
Esto es, en lugar de usar grid-template-columns: 50px 50px 50px 50px… Podemos hacerlo de una
forma más abreviada si ponemos: grid-template-columns: repeat(4, 50px). Ambos representan lo mismo pero
este último de manera más abreviada. Podemos utilizar la función, tanto para columnas como para filas.
También podemos decir que repita un sistema, es decir, en lugar de usar grid-template-rows: 50px 20px
50px 20px 50px 20px… Podemos decir: grid-template-rows: repeat(3, 50px 20px).
Como se puede observar el primer valor indica el número de veces que queremos que se repita el
tamaño especificado de cada casilla. Así en el primer caso habrán 4 columnas con 50px de ancho y en el segundo
6 filas de 50px y 20px de alto de forma intercalada.
grid-template-areas
Te permite definir una disposición visual explícita de los elementos de una cuadrícula (grid) utilizando
nombres de áreas. Esta propiedad es útil cuando quieres crear un diseño complejo de manera simple y legible.
Con grid-template-areas, defines "áreas" nombradas dentro de tu grid usando cadenas de texto, donde
cada área puede ocupar una o varias celdas de la cuadrícula. Posteriormente, puedes asignar elementos
específicos a esas áreas mediante la propiedad grid-area.

En este ejemplo podemos ver como señalamos las áreas con grid-template-areas y con grid-area en cada
elemento le indicamos que “espacios” o “casillas” deben ocupar.
grid-area
Sirve para definir y colocar un elemento en una o varias áreas dentro de una cuadrícula (grid). Esta
propiedad tiene dos usos principales: asignar un elemento a un área nombrada creada con grid-template-
areas; especificar las líneas de inicio y fin para filas y columnas de un elemento dentro de la cuadrícula.
Cuando se utiliza grid-template-areas, se le asigna al elemento una posición señalada en el grid-template-
areas; cuando no se usa la propiedad, grid area sirve para especificar las lineas de inicio y fin de un elemento en
una cuadrícula.
En el segundo caso la sintaxis es:
grid-area: valor del row-start/column-start/row-end/column-end
grid-gap
Es una propiedad que se utiliza para definir el espacio (o separación) entre las filas y columnas de una
cuadrícula, sin afectar el tamaño de los elementos dentro de las celdas.
Si aplicamos un valor, se añadirá tanto al espacio entre filas como al espacio entre columnas.
Si le aplicamos dos valores, el primero indicará el espacio entre filas y el segundo, el espacio entre las
columnas.
Por último, también podemos seleccionar que espacios modificar (entre filas o columnas). Para ello
podemos utilizar las propiedades:
➢ grid-row-gap: para los espacios entre filas.
➢ grid-column-gap: para los espacios entre columnas.
justify-items
Sirve para alinear los elementos hijos horizontalmente (en el eje inline) dentro de cada celda del grid.
Controla cómo se distribuyen los elementos dentro de su contenedor cuando el tamaño de la celda es mayor que
el tamaño del contenido.
Posee los siguientes valores:
➢ start: alinea los elementos al principio de la celda.
➢ end: alinea los elementos al final de la celda
➢ center: alinea los elementos en el centro de la celda.
➢ stretch: es el valor por defecto. Estira los elementos para llenar completamente la celda.
place-items
Es una propiedad abreviada que combina align-items con justify-items. Se utiliza en contenedores de
grid o flexbox para alinear los elementos dentro del contenedor tanto en el eje vertical (bloque) como en el
eje horizontal (inline) simultáneamente.
Primero colocaremos el valor de align-items y luego el valor de justify-items. Recordemos los valores
posibles:
➢ start: alinea al principio.
➢ end: alinea al final.
➢ center: alinea al centro.
➢ stretch: valor por defecto. Estira para llenar el espacio disponible.
grid-auto-columns
Si no defines explícitamente una columna en el grid y añades elementos que exceden las columnas
definidas, CSS Grid crea automáticamente nuevas columnas para ajustarse a los elementos. grid-auto-
columns te permite controlar el tamaño de esas nuevas columnas generadas.
Los valores pueden ser:
➢ Tamaños fijos: como px, em, rem, etc.
➢ Porcentajes.
➢ Fraciones: con fr, para distribuir el espacio disponible entre las columnas.
➢ Valores autoajustables: tenemos auto, el tamaño de la columna lo determinará el contenido; min-
content, la columna tendrá el tamaño mínimo necesario para acomodar su contenido; y max-
content, la columna tendrá el tamaño máximo necesario para acomodar su contenido.
grid-auto-rows
Define la altura de las filas generadas automáticamente en un contenedor de grid. Es similar a grid-
auto-columns, pero se aplica a las filas en lugar de a las columnas.
Posee los mismos valores que grid-auto-columns.
grid-auto-flows
Es una propiedad de CSS Grid que controla cómo se colocan automáticamente los elementos
dentro de una cuadrícula cuando no se especifican sus posiciones de manera explícita (es decir, cuando no se
usan propiedades como grid-column o grid-row para ubicarlos manualmente).
Posee los siguientes valores:
➢ row: es el valor por defecto. Los elementos se colocan automáticamente fila por fila. Cuando una
fila se llena, pasa a la siguiente fila.
➢ column: los elementos se colocan automáticamente columna por columna. Cuando una columna
se llena, pasa a la siguiente columna.
➢ row-dense: los elementos se colocan fila por fila como en row, pero el navegador intentará rellenar
los espacios vacíos que quedan en la cuadrícula, moviendo los elementos hacia arriba si es
necesario.
➢ column-dense: los elementos se colocan columna por columna como en column, pero con el
comportamiento "denso", que rellena los espacios vacíos moviendo los elementos hacia arriba
cuando es posible.
justify-self
Es una propiedad de CSS que se usa para alinear un elemento individual dentro de su contenedor de
grid o flexbox, específicamente a lo largo del eje horizontal (eje inline). Esta propiedad controla cómo se alinea
un solo elemento dentro de su celda o contenedor, sin afectar a los demás elementos.
Los valores de esta propiedad son:
➢ start: el elemento se alinea al inicio de la celda (lado izquierdo en la mayoría de los casos, según el
idioma de la página).
➢ end: el elemento se alinea al final de la celda (lado derecho en la mayoría de los casos).
➢ center: el elemento se alinea en el centro horizontalmente dentro de la celda.
➢ stretch: es el valor por defecto. El elemento se estira para llenar todo el ancho disponible de la
celda.
grid-column-start/grid-column-end
grid-column-start y grid-column-end son propiedades de CSS Grid que permiten controlar la
ubicación y el tamaño de un elemento en una cuadrícula, especificando en qué columnas comienza y
termina el elemento dentro del grid.
Estas propiedades se utilizan para posicionar un elemento en una cuadrícula de forma precisa,
definiendo desde qué línea de columna comienza y en qué línea de columna termina.
Las líneas del grid son números que representan las divisiones entre las columnas. Puedes pensar en ellas
como las líneas que separan las columnas, comenzando desde 1 para la primera línea (antes de la primera
columna), 2 para la siguiente línea (después de la primera columna), y así sucesivamente.
línea 1 columna linea 2 columna
grid-row-start/grid-row-end
grid-row-start y grid-row-end son propiedades de CSS Grid que permiten posicionar y
dimensionar un elemento dentro de una cuadrícula en el eje vertical (filas). Estas propiedades te
permiten especificar en qué fila comienza un elemento y en qué fila termina dentro del grid. Es igual que
grid-column-start/end pero referente a las filas.

línea 1 fila

línea 2 fila