Chuleta de CSS
Una referencia de CSS buscable e imprimible: selectores, el modelo de caja, flexbox, grid, tipografía, transiciones y funciones modernas. Gratis.
Selectores
13.class
Selecciona todos los elementos con la clase
#id
Selecciona el elemento con el id
a, b
Grupo: selecciona a y b
a b
Descendiente: b dentro de a
a > b
Hijo directo b de a
a + b
Hermano adyacente justo después de a
a ~ b
Hermano general b después de a
[type="text"]
Selector de atributo
:hover :focus
Pseudoclases de estado
:nth-child(2n)
Cada hijo par
::before ::after
Pseudoelementos (contenido generado)
:not(.x)
Negación: todo menos .x
:is(h1, h2, h3)
Coincide con cualquier selector de la lista
Modelo de caja
7box-sizing: border-box;
Incluye padding y borde en el ancho
margin: 0 auto;
Centra un bloque horizontalmente
padding: 1rem 2rem;
Vertical 1rem, horizontal 2rem
border: 1px solid #ccc;
Ancho, estilo, color
border-radius: 8px;
Esquinas redondeadas
outline: 2px dashed red;
Contorno (no afecta el layout)
overflow: hidden;
Recorta el contenido que desborda
Flexbox
8display: flex;
Crea un contenedor flex
flex-direction: row | column;
Dirección del eje principal
justify-content: space-between;
Alinea a lo largo del eje principal
align-items: center;
Alinea a lo largo del eje cruzado
flex-wrap: wrap;
Permite que los ítems se ajusten
gap: 1rem;
Espacio entre ítems
flex: 1;
Crece para llenar el espacio (1 1 0)
align-self: flex-end;
Anula el eje cruzado para un ítem
Grid
8display: grid;
Crea un contenedor grid
grid-template-columns: 1fr 1fr 1fr;
Tres columnas iguales
repeat(3, 1fr)
Abreviatura para pistas repetidas
minmax(200px, 1fr)
Pista entre un mínimo y un máximo
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
Columnas automáticas responsivas
gap: 1rem;
Espacio entre filas y columnas
grid-column: 1 / 3;
Abarca de la línea 1 a la 3
place-items: center;
Centra los ítems en ambos ejes
Tipografía
8font-family: system-ui, sans-serif;
Pila de fuentes
font-size: 1.125rem;
Tamaño de fuente relativo
font-weight: 600;
Grosor en negrita
line-height: 1.6;
Interlineado
letter-spacing: .02em;
Espaciado entre letras
text-align: center;
Alineación horizontal del texto
text-transform: uppercase;
Cambia mayúsculas/minúsculas
text-overflow: ellipsis;
Trunca con … (necesita overflow+nowrap)
Colores y fondo
7color: #1f2937;
Color del texto
background: rgb(0 0 0 / 50%);
rgb moderno con alfa
background: linear-gradient(90deg,#f06,#48f);
Degradado lineal
opacity: .5;
Transparencia del elemento
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
Sombra paralela
background-size: cover;
Escala la imagen para cubrir
color-mix(in srgb, red 40%, blue);
Mezcla dos colores
Posicionamiento
6position: relative;
Desplazamiento desde la posición normal
position: absolute;
Relativo al ancestro posicionado más cercano
position: fixed;
Relativo al viewport
position: sticky; top: 0;
Se fija al desplazarse más allá
inset: 0;
top/right/bottom/left = 0
z-index: 10;
Orden de apilamiento
Transiciones y animación
5transition: all .2s ease;
Anima los cambios de propiedad
transform: translateY(-4px) scale(1.05);
Mueve, escala, rota
@keyframes spin { to { transform: rotate(360deg); } }
Define una animación
animation: spin 1s linear infinite;
Ejecuta una animación de keyframes
will-change: transform;
Sugiere al navegador que optimice
Responsivo y moderno
7@media (max-width: 768px) { ... }
Punto de quiebre con media query
clamp(1rem, 2vw, 2rem)
Valor fluido con mín/máx
aspect-ratio: 16 / 9;
Mantiene una relación de aspecto
var(--brand)
Usa una propiedad personalizada
:root { --brand: #4f46e5; }
Define una propiedad personalizada
container-type: inline-size;
Habilita container queries
@container (min-width: 400px) {…}
Container query
Ninguna entrada coincide con “:q”.
¿Necesitas ayuda?
¿Encontraste un problema con esta herramienta? Avísanos.