Tabla resumen de propiedades CSS y sus valores

Tabla resumen CSS

A continuación, hemos preparado una práctica chuleta CSS en forma de tabla resumen de propiedades CSS junto con sus valores correspondientes. Estamos seguros de que esta chuleta en forma de tablas será de gran ayuda en el desarrollo de tus proyectos de diseño web, facilitándote el acceso rápido a la información que necesitas. ¡Esperamos que te resulte útil y que simplifique tu trabajo!

1. Tabla resumen de propiedades CSS Nivel Inicial

Ver Curso de CSS Nivel Inicial

1.1. Sintaxis selector

1.2. Selectores básicos

Selector	Descripción
*	Selecciona todos los elementos del DOM
etiqueta	Selecciona todas las etiquetas indicadas
.class	Selección de los elementos con la clase .class
#id	Selección del elemento con id #id
sel1 sel2	Selección de los selectores sel2 que se encuentren dentro de los selectores sel1
.class1.class2	Selección de los elementos con las dos clases: class1 y class2
sel1.class1	Selección de todos los selectores sel1 con clase class1
sel1, sel2	Selección de todos los selectores separados por comas
sel1 > sel2	Selección de los selectores sel2 cuando son hijos de sel1
sel1 + sel2	Selección del selector sel2 cuando es hermano de sel1 (su elemento padre es el mismo)

Ver más sobre selectores básicos →

1.3. Unidades de medida

Longitudes relativas
px	Píxeles (relativo al dispositivo)
em	Relativo al tamaño de la fuente del elemento ( 2em significa 2 veces el tamaño de la fuente actual)
%	Porcentaje (relativo al elemento padre)
vh y vw	Medidas relativas de acuerdo al viewport 1vh = 1% de la altura del viewport 100vh = altura del viewport
Longitudes absolutas
in	Pulgadas (1pulgada = 2.54 cm)
cm	Centímetros
mm	Milímetros
pt	Puntos (1pt = 1/72 pulgadas)
pc	Picas (1pica = 12 puntos)

Ver más sobre unidades de medida →

1.4. Colores básicos

Tabla 3: Colores básicos

Colores básicos
Color	Nombre	HEX	RGB
	black	#000000	0,0,0
	white	#ffffff	255,255,255
	red	#ff0000	255,0,0
	blue	#0000ff	0,0,255
	yellow	#ffff00	255,255,0
	gray	#808080	128,128,128
	green	#008000	0,128,0

Ver todos los colores →

1.5. Color y fondo

Propiedad	Descripción	Valores
color	Color del texto	RGB | HSL | HEX | nombre del color | RGBA | HSLA
background-color	Color de fondo	RGB | HSL | HEX | nombre del color | RGBA | HSLA
background-image	Imagen de fondo	url(«…») | none
background-repeat	Repetición de la imagen de fondo	repeat | repeat-x | repeat-y | no-repeat
background-attachment	Desplazamiento de la imagen de fondo	scroll | fixed
background-position	Posición de la imagen de fondo	percentage | length | left | center | right
background-size	Tamaño de la imagen de fondo	auto | cover | contain | valor
Opacity	Transparencia de un elemento	[ 0 – 1 ] (0 → totalmente transparente)

Ver más sobre color y fondo →

1.6. Texto

Propiedad	Descripción	Valores
text-indent	Desplazamiento de la primera línea del texto	longitud | porcentaje
text-align	Alineamiento del texto	left | right | center | justify
text-decoration	Efectos de subrayado y tachado	none | underline | overline | line-through
letter-spacing	Espacio entre caracteres	normal | longitud
word-spacing	Espacio entre palabras	normal | longitud
text-transform	Transformación a mayúsculas / minúsculas	capitalize | uppercase | lowercase | none
line-height	Tamaño del espacio entre líneas	longitud | porcentaje
vertical-align	Alineación vertical	top | middle | bottom baseline | sub | super | valor

Ver más sobre texto →

1.7. Fuentes

Propiedad	Descripción	Valores
font-family	Familias de fuentes	nombre-familia|nombre-familia-genérica| *
font-style	Estilo de la fuente	normal | italic | oblique
font-variant	Convierte a mayúsculas manteniendo un tamaño inferior	normal | small-caps
font-weight	Anchura de los caracteres. Normal = 400, Negrita = 700	normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-size	Tamaño de la fuente	xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | longitud | porcentaje

Ver más sobre fuentes →

1.8. Listas

Propiedad	Descripción	Valores
list-style-type	Estilo aplicable a los marcadores visuales o viñetas de las listas	disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none
list-style-image	Imagen aplicable a las viñetas de las listas	url(«…») | none
list-style-position	Posición de las viñetas dentro de la lista	inside | outside
list-style	Permite establecer varios estilos de la lista en una sola propiedad	list-style-type | list-style-position | list-style-image

Ver más sobre listas →

1.9. Tablas

Propiedad	Descripción	Valores
caption-side	Posición del título respecto la tabla	top | bottom
table-layout	Formato de las celdas, filas y columnas	auto | fixed
border-collapse	Selección del modelo de los bordes	collapse | separate
border-spacing	Espaciado entre los bordes de celdas adyacentes	longitud
empty-cells	Visibilidad de los bordes de celdas sin contenido	show | hide

Ver más sobre tablas →

1.10. Pseudo-clases para selección de hijos o hermanos

Pseudo-clase	Descripción
:first-child	Primer hijo
:last-child	Último hijo
:first-of-type	Primer hermano de su tipo
:last-of-type	Último hermano de su tipo
:only-child	Hijos únicos
:only-of-type	Únicos hermanos de su tipo
:empty	Elementos que no tienen hijos
:nth-child(n)	Enésimo elemento hijo
:nth-last-child(n)	Enésimo elemento hijo contando desde el último
:nth-of-type(n)	Enésimo hermano de su tipo
:nth-last-of-type(n)	Enésimo hermano de su tipo comenzando desde el último

Ver más sobre pseudo-clases →

1.11. Pseudo-clases para los estados de un elemento

Pseudo-clase	Descripción
:link	No visitado por el usuario
:visited	Visitado por el usuario
:hover	Modifica el estilo cuando un elemento apuntador pasa por encima
:active	Se activa cuando el usuario pulsa el elemento
:focus	Se activa cuando tiene el foco sobre el elemento

Ver más sobre pseudo-clases →

1.12. Pseudo-elementos

Pseudo-clase	Descripción
::first-line	Primera línea de texto de un elemento
::first-letter	Primera letra de la primera línea de texto de un elemento
::before	Añade contenido al principio del documento
::after	Añade contenido al final del documento

Ver más sobre pseudo-elementos →

1.13. Modelo de cajas: márgenes, relleno y bordes

Propiedad	Descripción	Valores
padding-top padding-right  padding-bottom padding-left	Tamaño del relleno superior, derecho, inferior e izquierdo	longitud | porcentaje
padding	Tamaño del relleno	longitud | porcentaje {1,4}
margin-top margin-right  margin-bottom margin-left	Tamaño del margen superior, derecho, inferior e izquierdo	longitud | porcentaje | auto
margin	Ancho de los margenes	longitud | porcentaje | auto {1,4}
border-top-width border-right-width  border-bottom-width border-left-width	Anchura del borde superior, derecho, inferior o izquierdo	thin | medium | thick | longitud
border-width	Anchura del borde	thin | medium | thick | longitud {1,4}
border-top-color border-right-color  border-bottom-color border-left-color	Color del borde superior, derecho, inferior e izquierdo	color | transparent
border-color	Color del borde	color | transparent {1,4}
border-top-style border-right-style  border-bottom-style border-left-style	Estilo del borde superior, derecho, inferior e izquierdo	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-style	Estilo del borde	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset {1,4}
border-top border-right  border-bottom border-left	Ancho, estilo y color para el borde superior, derecho, inferior e izquierdo	border-top-width | border-top-style | border-top-color
border	Ancho, estilo y color para los bordes	border-width | border-style | border-color
border-radius	Curvatura del borde	longitud | porcentaje {1,4}

Ver más sobre el modelo de cajas →

1.14. Propiedades width, height, max-width, min-width, max-height y min-height

Nombre propiedad	Descripción	Valores
width	Establece el ancho del área de contenido de un elemento	Unidad de longitud (px, em, %, etc.), auto, initial, inherit
height	Establece el alto del área de contenido de un elemento	Unidad de longitud (px, em, %, etc.), auto, initial, inherit
max-width	Establece el ancho máximo que puede tener un elemento	Unidad de longitud (px, em, %, etc.), none, initial, inherit
min-width	Establece el ancho mínimo que debe tener un elemento	Unidad de longitud (px, em, %, etc.), 0, initial, inherit
max-heigt	Establecer el alto máximo que debe tener un elemento	Unidad de longitud (px, em, %, etc.), 0, initial, inherit
min-height	Establecer el alto mínimo que debe tener un elemento	Unidad de longitud (px, em, %, etc.), 0, initial, inherit

Ver más sobre propiedades width y height →

1.15. Comportamiento de los contenedores

Propiedad	Descripción	Valores
display	Comportamiento del contenedor	inline | block | inline-block | none
position	Esquema de posicionamiento	static | relative | absolute | fixed
top right bottom left	Desplazamiento de la caja respecto al borde superior, derecho, inferior o izquierdo	longitud | porcentaje | auto
float	Posicionamiento flotante	left | right | none
clear	Control de cajas adyacentes a las float	none | left | right | both
z-index	Nivel de la capa	auto | número entero
box-sizing	Control de bordes y relleno en el comportamiento del contenedor	content-box | border-box
visibility	Muestra u oculta un elemento ocupando el espacio	visible | hidden
overflow	Visibilidad de los elementos de tipo bloque	visible|hidden|scroll|auto

Ver más sobre el comportamiento de los contenedores →

1.16. Tamaño de los elementos

Nombre propiedad	Descripción	Valores
width	Establece el ancho del área de contenido de un elemento	Unidad de longitud (px, em, %, etc.), auto, initial, inherit
height	Establece el alto del área de contenido de un elemento	Unidad de longitud (px, em, %, etc.), auto, initial, inherit
max-width	Establece el ancho máximo que puede tener un elemento	Unidad de longitud (px, em, %, etc.), none, initial, inherit
min-width	Establece el ancho mínimo que debe tener un elemento	Unidad de longitud (px, em, %, etc.), 0, initial, inherit

Ver más sobre el tamaño de los elementos →

1.17. Propiedad overflow, excedente de contenido

Propiedad CSS overflow	Valores
overflow	visible, hidden, scroll, auto
overflow: visible	Por defecto
overflow: hidden	Oculta los contenidos desbordados
overflow: scroll	Muestra barras de desplazamiento
overflow: auto	El navegador decide
overflow-x	visible, hidden, scroll, auto
overflow-y	visible, hidden, scroll, auto

Ver más sobre la propiedad overflow →

2. Tabla resumen de propiedades CSS Nivel Intermedio

Ver curso de CSS Intermedio

2.1. Medios en CSS

Medio	Descripción
all	Todos los dispositivos
print	Para documentos paginados y mostrados en vista de impresión
screen	Pantallas de ordenador
speech	Sintetizadores para navegadores de voz utilizados por personas discapacitadas

Formas de definir los medios:

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="especialStyle.css" />

@media print  { body { font-size: 11pt; } } 
@media screen { body { font-size: 12px; } } 
@media { body { color: blue; } } /* Se aplica a todo */

@import url("estilosPantalla.css") screen; 
@import url("estilosImpresora.css") print;
@import url("estilos.css"); /* Se aplica a todo por defecto*/

Ver más sobre medios →

2.2. Media queries

@media (min-width: 768px) {
  /* Estilos para pantallas con un ancho mínimo de 768px */
}

@media (max-width: 767px) {
  /* Estilos para pantallas con un ancho máximo de 768px */
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Estilos para pantallas con un ancho entre 768px y 1024px */
}

Ver más sobre media queries →

2.3. Cursores: propiedad cursor

Valor cursor	Descripción
crosshair	Cursor tipo cruz para tareas en las que se requiere precisión.
help	Interrogación. Cursor de ayuda.
move	Flechas hacia todos lados. Cursor para mover elementos.
pointer	Mano o apuntador. Cursor para hacer clic.
progress	Barra progreso o similar. Cursor que indica que se está trabajando en segundo plano.
text	Cursor que permite seleccionar texto.
wait	Cursor que indica que se debe esperar.
vertical-text	Flecha vertical, utilizado para texto en orientación vertical.
alias	Flecha diagonal, utilizado para indicar que se puede acceder a un enlace o recurso externo.
no-drop	Círculo con una línea diagonal, utilizado para indicar que no se permite soltar el elemento arrastrado.
grab	Mano cerrada, utilizado para indicar que el elemento se puede agarrar
grabbing	Mano abierta, utilizado para indicar que el elemento está siendo arrastrado o agarrado.
zoom-in	Símbolo de lupa con un signo de más, utilizado para indicar que se puede hacer zoom in.
zoom-out	Símbolo de lupa con un signo de menos, utilizado para indicar que se puede hacer zoom out.
not-allowed	Círculo con una línea diagonal, utilizado para indicar que la interacción no está permitida.
cell	Cursor tipo cruz, utilizado en hojas de cálculo para ajustar celdas.
copy	Puntero con un símbolo de copia, utilizado para indicar que se puede realizar una copia de un elemento.
ew-resize	Flecha bidireccional horizontal, utilizado para indicar que se puede ajustar el tamaño horizontalmente.
ns-resize	Flecha bidireccional vertical, utilizado para indicar que se puede ajustar el tamaño verticalmente.
nwse-resize	Flecha bidireccional diagonal, utilizado para indicar que se puede ajustar el tamaño diagonalmente en dirección noroeste-sureste.
nesw-resize	Flecha bidireccional diagonal, utilizado para indicar que se puede ajustar el tamaño diagonalmente en dirección noreste-suroeste.
col-resize	Flecha bidireccional horizontal con una línea vertical, utilizado para indicar que se puede ajustar el tamaño de una columna.
row-resize	Flecha bidireccional vertical con una línea horizontal, utilizado para indicar que se puede ajustar el tamaño de una fila.
context-menu	Puntero con un símbolo de menú, utilizado para indicar que se puede abrir un menú contextual.
none	No se muestra ningún cursor.
Personalized	Imagen o valor personalizado en el cursor.

Ver más sobre la propiedad cursor →

2.4. Sombras CSS

Propiedad	Valores	Ejemplo
text-shadow	posx posy desenfoque color | none	text-shadow: 2px 2px 5px red;
box-shadow	posx posy desenfoque posición color inset | none	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

Ver más sobre sombras →

2.5. Selector de atributos CSS

Selector	Descripción
[nombre_atributo]	Selecciona los elementos que tienen establecido el atributo llamado nombre_atributo independientemente de su valor
[nombre_atributo=valor]	Selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con un valor igual a valor
[nombre_atributo~=valor]	Selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y al menos uno de los valores del atributo es valor
[nombre_atributo|=valor]	Selecciona los elementos que tienen establecido un atributo llamado nombre_atributo, cuyo valor es una lista de valores, donde alguno comienza por valor
[nombre_atributo$=valor]	Selecciona aquellas etiquetas cuyo atributo acabe en ese valor
[nombre_atributo^=valor]	Selecciona aquellas etiquetas cuyo atributo comience por ese valor

Ver más sobre selectores de atributos →

2.6. Formatos de las fuentes

Formato	Descripción
EOT	Embedded OpenType, Explorer
TTF	TrueType Font, IOS
WOFF	Web Open Font Format, Chrome
WOFF2	Mejora de WOFF
SVG	Scalar Vector Graphics

Ver más sibre formatos de las fuentes →

2.7. Flexbox CSS

Propiedad	Descripción	Valores Ejemplo
display	Define el contenedor como un flex container	flex
flex-wrap	Controla si los elementos flex deben trasladarse a la siguiente fila	nowrap (por defecto), wrap, wrap-reverse
justify-content	Alineación horizontal de los elementos de un contenedor flexible	flex-start (por defecto), flex-end, center, space-between, space-around, space-evenly
align-items	Alineación vertical de los elementos de un contenedor flexible	stretch (por defecto), flex-start, flex-end, center, baseline
flex-direction	Dirección de los elementos	row (por defecto), row-reverse, column, column-reverse
flex-grow	Controla cómo los elementos flex se expanden	Número (valor relativo)
flex-shrink	Controla cómo los elementos flex se encogen	Número (valor relativo)
flex-basis	Tamaño inicial de los elementos flex	Valor, auto (por defecto)
order	Orden de los elementos flex dentro del contenedor	Número (entero)

Ver más sobre Flexbox →

3. Tabla resumen de propiedades CSS Nivel Avanzado

Ver curso de CSS Avanzado

3.1. Variables CSS o propiedades personalizadas

:root {
  --principal-color: black; /* Valor personalizado */
  --font: "Arial";
}
.clase {
  background-color: var(--principal-color);
  font-family: var(--font);
}

Ver más sobre variables CSS →

3.2. Gradiente linear y radial CSS

Propiedad	Valores	Ejemplo
background	linear-gradient(dirección{to top, to bottom, to left y to right}|ángulo, color, color, color…)	background: linear-gradient(to right, red, orange);
background	linear-gradient(dirección{to top, to bottom, to left y to right}|ángulo, color posición, color posición, color posición…)	background: linear-gradient(to right, red 20%, orange 40%);
background	linear-gradient(color, color, color…)	background: linear-gradient(red, orange);
background	radial-gradient(forma{circle y ellipse}, color, color, color…)	background: radial-gradient(circle, red, orange);
background	radial-gradient(forma{circle y ellipse} posición, color, color, color…)	background: radial-gradient(circle closest-side, red, orange);
background	radial-gradient(forma{circle y ellipse}, color posición, color posición, color posición…)	background: radial-gradient(circle at top left, red 20%, orange 40%);
background	radial-gradient(color, color, color…)	background: radial-gradient(red, orange, blue);
background	radial-gradient(farthest-side, color, color, …)	background: radial-gradient(farthest-side, red, blue);

Ver más sobre gradientes →

3.3. Transiciones CSS

transition:[propiedad a modificar] [Duración] [Tipo de animación] [Retardo];

Ver más sobre transiciones →

3.4. Transformaciones CSS

transform: funcion(<valor>);

Función	Descripción	Ejemplo
Scale	Se establece con uno o dos valores, que representan la cantidad de escala que se aplica en cada dirección: scale(x) o scale(x,y). Cuando el valor está fuera del rango [-1, 1], el elemento crece a lo largo de esa dimensión. Cuando está dentro del rango el elemento se encoge.	transform: scale(0.5)
Translate	Cambia la posición del elemento hacia la izquierda, derecha, arriba o abajo. La función translate() se establece con uno o dos valores: translate(x) o translate(x,y). Sus valores pueden estar definidos en píxeles, porcentajes,…	transform: translate(10px)
Rotate	Gira o rota los elementos en grados: rotate(v).	transform: rotate(45deg)
Skew	Distorsiona los elementos según el ángulo en grados. La función skew() se establece con uno o dos valores: skew(x) o skew(x,y).	transform: skew(45deg)
Matrix	Mueve o transforma los elementos con precisión de píxel. La función matrix() se establece con seis valores numéricos: matrix(a,b,c,d,x,y). Los dos últimos valores representan la translación y los primeros la transformación lineal.	transform: matrix(0.5, 0.1, 0.5, 1, 10, -2)

La propiedad transform se usa junto con la propiedad transition. Ejemplo:

.caja1{
   -webkit-transition: 1s linear;
   transition: 1s linear;
}
.caja1:hover{
   -webkit-transform: scale(.5);
   transform: scale(.5);
}

Ver más sobre transformaciones →

3.5. Animation CSS

Sintaxis propiedad abreviada:

selector {
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

1. name: Nombre de la regla @keyframes que describe los fotogramas de la animación.
2. duration: Cantidad de tiempo que la animación consume en completar su ciclo. Se expresa en segundos (s) o milisegundos (ms).
3. timing-function: Ritmo de la animación, es decir, cómo se muestran los fotogramas a lo largo del tiempo. Puede ser lineal, ease, ease-in, ease-out, ease-in-out, cubic-bezier, step-start, step-end, steps, etc.
4. delay: Tiempo de espera antes de que la animación comience a ejecutarse. Se expresa en segundos (s) o milisegundos (ms).
5. iteration-count: Número de veces que se repetirá la animación. Puede ser un número entero, infinite para que se repita infinitamente, o un valor específico como 2, 3, etc.
6. direction: Define si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia. Puede ser normal, reverse, alternate, o alternate-reverse.
7. fill-mode: Especifica qué valores tendrán las propiedades después de finalizar la animación. Puede ser none, forwards, backwards, o both.
8. play-state: Permite pausar y reanudar la secuencia de la animación. Puede ser running o paused.

Sintaxis subpropiedades:

selector{
      animation-name: identifier;
      subproperty: value;
}

Las subpropiedades de animation son:

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

Ver más sobre animaciones CSS →

3.6. Funciones matemáticas en CSS

Función	Descripción	Valores Ejemplo
abs()	Devuelve el valor absoluto de un número	abs(-10) = 10
sin()	Devuelve el seno de un ángulo	sin(45deg) ≈ 0.71
cos()	Devuelve el coseno de un ángulo	cos(60deg) = 0.5
tan()	Devuelve la tangente de un ángulo	tan(30deg) ≈ 0.58
sqrt()	Devuelve la raíz cuadrada de un número	sqrt(16) = 4
pow()	Eleva un número a una potencia	pow(2, 3) = 8
min()	Devuelve el valor mínimo entre dos números	min(10, 5) = 5
max()	Devuelve el valor máximo entre dos números	max(10, 5) = 10
random()	Devuelve un número aleatorio entre 0 y 1	random() ≈ 0.35
floor()	Devuelve el valor entero menor o igual	floor(3.8) = 3
ceil()	Devuelve el valor entero mayor o igual	ceil(3.2) = 4
round()	Devuelve el valor redondeado al entero más cercano	round(3.7) = 4
clamp()	Limita un valor dentro de un rango	clamp(10, 5, 8) = 8
calc()	Realiza cálculos matemáticos en propiedades CSS	width: calc(100% - 20px)
attr()	Obtiene el valor de un atributo HTML y lo utiliza en CSS	content: attr(data-text)

Ver más sobre funciones matemáticas →

3.7. CSS Grid

Propiedad	Descripción	Valores Ejemplo
display	Define el contenedor como un grid container	grid (por defecto), inline-grid
grid-template-columns	Define las columnas del grid	grid-template-columns: 1fr 2fr 1fr
grid-template-rows	Define las filas del grid	grid-template-rows: 100px 200px
grid-gap	Propiedad abreviada para establecer grid-column-gap y grid-row-gap	grid-gap: 10px
grid-column-gap	Establece el tamaño del espacio entre columnas	grid-column-gap: 20px
grid-row-gap	Establece el tamaño del espacio entre filas	grid-row-gap: 10px

Ver más sobre CSS Grid →

3.8. CSS Clamp()

propiedad: clamp(valor_mínimo, valor_preferido, valor_máximo);

1. propiedad: Propiedad a la que se va a aplicar clamp(). Por ejemplo: font-size para modificar el tamaño de las fuentes.
2. valor_mínimo: Tamaño mínimo que se aplicará a la propiedad, independientemente del tamaño de la pantalla o del contenedor. Si el valor preferido es menor que este, se aplicará el valor mínimo.
3. valor_preferido: Valor que se aplicará de manera predeterminada a la propiedad. Este valor puede ser relativo, como en el caso de unidades como vw (viewport width) o em, lo que permite que el tamaño del texto se ajuste dinámicamente en función del tamaño de la pantalla.
4. valor_máximo: Tamaño máximo que se aplicará a la propiedad. Si el valor preferido es mayor que este, se aplicará el valor máximo.

Ver más sobre CSS Clamp() →

3.9. CSS line-clamp

.elemento-truncado {
    display: -webkit-box;
    -webkit-line-clamp: <numero_de_lineas>;
    -webkit-box-orient: horizontal | vertical;
    overflow: hidden;
}

• display: -webkit-box;: Se utiliza para establecer el tipo de caja de diseño utilizado para el elemento. En este caso, -webkit-box es necesario para compatibilidad con navegadores basados en WebKit, como Safari y Chrome.
• -webkit-line-clamp: <numero_de_lineas>;: Especifica el número de líneas que se mostrarán antes de truncar el texto. Por ejemplo, si estableces -webkit-line-clamp: 3;, solo se mostrarán las primeras tres líneas del texto y el resto será truncado.
• -webkit-box-orient: vertical;: Establece la orientación del contenido dentro del contenedor. En el contexto de line-clamp, normalmente se usa vertical para que los elementos de línea se apilen verticalmente dentro del contenedor flexible, permitiendo así la truncación vertical del texto.
• overflow: hidden;: Ocultar el contenido que se desborda del contenedor. Es importante para asegurarse de que el texto truncado no sea visible fuera del área designada.

Ver más sobre CSS line-clamp →

3.10. CSS Scroll Snap

.contenedor-scroll {
   scroll-snap-type: [x | y | block | inline] [mandatory | proximity];
}
.seccion {
   scroll-snap-align: [start | center | end | none];
}

• scroll-snap-type especifica cómo se debe comportar el desplazamiento dentro del contenedor. Puede definir el tipo de desplazamiento en los ejes horizontal (x) o vertical (y), así como también en bloques (block) o en líneas (inline). Además, determina si el desplazamiento debe detenerse obligatoriamente en los puntos de anclaje especificados (mandatory) o si puede detenerse en el punto más cercano (proximity).
• scroll-snap-align se aplica a los elementos hijos del contenedor. Esta propiedad determina cómo se alineará cada elemento con respecto al punto de anclaje. Los valores comunes para scroll-snap-align son start, end, center, none, etc. Por ejemplo, scroll-snap-align: start; alinea el inicio del elemento con el punto de anclaje.

Ver más sobre CSS Scroll Snap →

3.11. CSS scroll-behavior

html{
   scroll-behavior: auto | smooth;
}

• auto: Valor predeterminado. Indica que el desplazamiento será instantáneo, sin transición o animación.
• smooth: Activa el desplazamiento suave, lo que significa que el movimiento entre los diferentes elementos de la página será gradual y animado.

Ver más sobre CSS scroll-behavior →

3.12. CSS mix-blend-mode

.elemento {
    mix-blend-mode: <modo-de-mezcla>;
}

Blend Mode	Descripción	Características
multiply	Multiplica los colores de la capa superior con los de la capa inferior.	– Oscurece la imagen resultante.
screen	Invierte los colores de la capa superior y los multiplica con los de la capa inferior.	– Aclara las áreas de la imagen.
overlay	Combina Multiply y Screen, oscureciendo o aclarando la capa inferior dependiendo de sus colores.	– Produce un efecto de contraste y saturación.
darken	Conserva los colores más oscuros de las dos capas.	– Selecciona el color más oscuro de cada píxel de ambas capas.
lighten	Conserva los colores más claros de las dos capas.	– Selecciona el color más claro de cada píxel de ambas capas.
color-dodge	Aclara los colores de la capa inferior dependiendo de los colores de la capa superior.	– Aclara las áreas de la imagen de la capa inferior.
color-burn	Oscurece los colores de la capa inferior dependiendo de los colores de la capa superior.	– Oscurece las áreas de la imagen de la capa inferior.
difference	Resta los colores de la capa superior de los de la capa inferior.	– Produce un efecto de inversión de colores.
exclusion	Similar a Difference, pero con una apariencia menos extrema.	– Combina los colores de ambas capas con un efecto de exclusión.
hard-light	Combina Multiply y Screen, pero de una manera más intensa.	– Produce un efecto más fuerte de contraste y saturación.
soft-light	Similar a Overlay, pero con una apariencia más suave.	– Produce un efecto más suave de contraste y saturación.
hue	Preserva el brillo y la saturación de la capa inferior, pero adopta el tono de la capa superior.	– Aplica el tono de la capa superior a la capa inferior.
saturation	Preserva el brillo y el tono de la capa inferior, pero adopta la saturación de la capa superior.	– Aplica la saturación de la capa superior a la capa inferior.
color	Preserva el brillo de la capa inferior, pero adopta el tono y la saturación de la capa superior.	– Aplica el tono y la saturación de la capa superior a la capa inferior.
luminosity	Preserva el tono y la saturación de la capa inferior, pero adopta el brillo de la capa superior.	– Aplica el brillo de la capa superior a la capa inferior.

Ver más sobre CSS Blend modes →

3.13. CSS Hyphens

.hyphenation {
    hyphens: auto | manual | none;
}

• auto: El navegador decide dónde dividir las palabras para evitar el desbordamiento del texto. Utiliza las reglas de separación de sílabas del idioma predeterminado del documento.
• manual: Las palabras no se dividirán automáticamente. Debes utilizar el carácter de guion (-) para indicar dónde se pueden dividir las palabras manualmente.
• none: Desactiva la división automática y manual de palabras. El texto puede desbordarse si no cabe en el contenedor.

Ver más sobre CSS Hyphens →

3.14. Filtros CSS

Sintaxis:

selector {
  filter: <función-de-filtro>(<valor>) ;
}

Valores más comunes que acepta la propiedad filter:

Función	Descripción	Valores
blur(<valor>)	Aplica un desenfoque al elemento	<valor> cantidad de desenfoque a aplicar
brightness(<valor>)	Ajusta el brillo del elemento	<valor> 0: completamente oscuro, 1: original
contrast(<valor>)	Ajusta el contraste del elemento	<valor> 0: completamente gris, 1: original
grayscale(<valor>)	Convierte el elemento a escala de grises	<valor> 0: original, 1: escala de grises
hue-rotate(<valor>)	Gira el espectro de colores del elemento	<valor> es la cantidad de grados en sentido horario 0 a 360deg
invert(<valor>)	Invierte los colores del elemento	<valor> 0: original, 1: invertido
opacity(<valor>)	Ajusta la opacidad del elemento	<valor> 0: transparente, 1: original
saturate(<valor>)	Ajusta la saturación del elemento	<valor> 0: grisáceo , 100%: original
sepia(<valor>)	Aplica un tono sepia al elemento	<valor> 0: original, 1: sepia completo

Ver más sobre filtros →

3.15. Prefijos para los navegadores

Prefijo	Navegador
-moz-	Firefox
-webkit-	Safari y Chrome
-o-	Opera
-khtml-	Konqueror
-ms-	Internet Explorer
-chrome-	Google Chrome

Ver más sobre prefijos →

¡Enhorabuena por llegar hasta aquí! Esperamos que te haya resultado interesante este recopilatorio de propiedades CSS y que hayas aprendido las bases fundamentales para dar estilo a tus páginas web. Si te interesan las chuletas relacionadas con el front-end, te puede ayudar también la chuleta de HTML. Además, te recomendamos seguir explorando y ampliando tus conocimientos con cursos como el de Bootstrap 5, el de accesibilidad y el de usabilidad.

Si te ha gustado este artículo y quieres recibir más contenido sobre diseño web, CSS y otras tecnologías relacionadas, te invitamos a suscribirte a nuestro boletín informativo. Mantente al día con las últimas tendencias, consejos y trucos para mejorar tus habilidades de desarrollo web. No te pierdas ninguna actualización y únete a nuestra comunidad de aprendizaje. ¡Suscríbete ahora y continúa tu viaje hacia el dominio del diseño web!