.class Selector de clase
#id Selector de ID
element Selector de tipo/etiqueta
parent > child Combinador de hijo directo
ancestor descendant Combinador de descendiente
el + sibling Combinador de hermano adyacente
el ~ siblings Combinador de hermano general
[attr="value"] Selector de atributo (coincidencia exacta)
:hover / :focus / :active Pseudoclases interactivas
:first-child / :last-child Pseudoclase primer/último hijo
:nth-child(2n) Cada hijo par
::before / ::after Pseudoelementos (contenido generado)
:not(.class) Pseudoclase de negación
:has(.child) Selector de padre (contiene hijo)
:is(h1, h2, h3) Coincide con cualquiera de la lista
display: block | inline | inline-block | none Modo de visualización
position: static | relative | absolute | fixed | sticky Esquema de posicionamiento
top / right / bottom / left Desplazamiento para elementos posicionados
z-index: 10 Orden de apilamiento (mayor = encima)
overflow: hidden | scroll | auto Manejar contenido desbordante
box-sizing: border-box Incluir relleno/borde en el tamaño
margin: 0 auto Centrar elemento de bloque horizontalmente
width / height / min-width / max-width Restricciones de tamaño
float: left | right | none Elemento flotante (diseño legado)
display: flex Habilitar flexbox en contenedor
flex-direction: row | column Dirección del eje principal
justify-content: center | space-between | space-around Alinear elementos en el eje principal
align-items: center | stretch | flex-start | flex-end Alinear elementos en el eje transversal
flex-wrap: wrap Permitir que los elementos pasen a la siguiente línea
gap: 1rem Espacio entre elementos flex/grid
flex: 1 Flex grow (llenar espacio disponible)
flex: 0 0 200px Elemento flex de ancho fijo (sin crecer/encoger)
align-self: center Sobreescribir align-items para un elemento
order: -1 Cambiar orden visual del elemento
display: grid Habilitar CSS Grid en contenedor
grid-template-columns: 1fr 2fr 1fr Definir tamaños de columna (fracciones)
grid-template-columns: repeat(3, 1fr) Repetir patrón de columnas
grid-template-columns:
repeat(auto-fill, minmax(200px, 1fr)) Grid responsivo con auto-fill
grid-template-rows: auto 1fr auto Definir tamaños de fila
grid-column: 1 / 3 Extender elemento a través de columnas
grid-row: 1 / -1 Extender elemento a través de todas las filas
place-items: center Centrar elementos en ambos ejes (abreviado)
grid-template-areas:
"header header"
"sidebar main"
"footer footer" Áreas de grid con nombre
font-family: 'Inter', sans-serif Pila de fuentes con respaldo
font-size: 1rem | 16px | clamp(1rem, 2vw, 2rem) Tamaño de fuente (responsivo con clamp)
font-weight: 400 | 700 | bold Grosor de fuente
line-height: 1.5 Interlineado (ratio sin unidades)
letter-spacing: 0.05em Espacio entre caracteres
text-align: left | center | right | justify Alineación del texto
text-decoration: underline | line-through | none Decoración del texto
text-transform: uppercase | lowercase | capitalize Transformación de mayúsculas/minúsculas
white-space: nowrap Evitar salto de línea del texto
text-overflow: ellipsis Truncar desbordamiento con ...
color: #ff6600 | rgb(255, 102, 0) | hsl(24, 100%, 50%) Color de texto (hex/rgb/hsl)
background-color: var(--bg) Color de fondo (variable CSS)
background: linear-gradient(to right, #f00, #00f) Fondo con gradiente lineal
opacity: 0.5 Transparencia del elemento (0-1)
box-shadow: 0 4px 6px rgba(0,0,0,0.1) Sombra de caja
border: 1px solid #ccc Borde (abreviado)
border-radius: 0.5rem | 50% Esquinas redondeadas (50% = círculo)
outline: 2px solid blue Contorno (no afecta al diseño)
transition: all 0.3s ease Transiciones suaves de propiedades
transition: transform 0.2s, opacity 0.2s Transicionar propiedades específicas
transform: translateX(10px) Mover elemento
transform: scale(1.1) rotate(5deg) Escalar y rotar
@keyframes fade {
from { opacity: 0 }
to { opacity: 1 }
} Definir animación de keyframes
animation: fade 0.3s ease-in forwards Aplicar animación
will-change: transform Indicar al navegador para optimización
@media (max-width: 768px) { ... } Punto de corte mobile-first
@media (min-width: 1024px) { ... } Punto de corte escritorio
@media (prefers-color-scheme: dark) { ... } Media query para modo oscuro
@media (prefers-reduced-motion: reduce) { ... } Reducir animaciones para accesibilidad
@container (min-width: 400px) { ... } Consulta de contenedor
clamp(1rem, 3vw, 2rem) Tamaño fluido (mínimo, preferido, máximo)
Cheat Sheet de CSS — Flexbox, Grid, Selectores y Pseudo-Clases
CSS ha pasado de dar estilo a texto en 1996 a llevar la capa de diseño entera de los navegadores modernos, y los puntos donde tropieza la gente han cambiado con él. La chuleta de abajo cubre 70+ propiedades en selectores, diseño, Flexbox, Grid, tipografía, colores, animaciones y responsive. La mayoría de los líos en hojas reales no vienen de olvidar propiedades. Vienen de rarezas que parecen evidentes en aislamiento y se desbaratan dentro de una cascada. Un selector `#id` gana a cualquier número de clases porque la especificidad pesa el id por encima de la clase, así que una sola regla con id en una hoja global fija un color que ningún `.theme-dark` posterior sobrescribirá. `z-index` solo surte efecto sobre un elemento posicionado (o un hijo de flex/grid con z-index explícito), así que `z-index: 9999` sobre `position: static` no surte efecto. Un `margin-top` en el primer hijo de un padre sin padding ni borde se colapsa hacia el padre y lo empuja hacia abajo. Estos son los fragmentos consultados al depurar eso: el selector adecuado, el `box-sizing` correcto, la media query que aplica, sin releer la especificación desde la primera línea cada vez.
Trampas habituales en CSS
Hay un puñado de reglas que merecen sitio cerca de la cabecera de cualquier hoja moderna. `box-sizing: border-box` aplicado con un reset `*` mantiene que `width: 300px` signifique 300px reales en pantalla y no 300px más lo que el padding y el borde sumen después — el modelo `content-box` por defecto es la causa de más deriva de layout que ninguna otra propiedad. La especificidad se lee como cuatro columnas, no como un único número: los estilos inline ganan a los ids, los ids ganan a clases y atributos, las clases ganan a los selectores de tipo, y dentro del mismo peso vence la última regla. El selector `:has()` por fin ofrece una coincidencia real con el padre (`article:has(> img)`) y reescribe patrones enteros que antes requerían JavaScript. Grid y Flexbox dejan de anidarse con limpieza cuando un elemento intermedio con `display: contents` interrumpe la cadena o cuando un hijo tiene `min-width: auto` (el valor por defecto), lo que hace que los ítems flex desborden su contenedor de formas sutiles. La chuleta agrupa todo esto en Selectores, Layout, Flexbox, Grid, Tipografía, Colores, Animaciones y Responsive para que la sección adecuada esté a un clic.
- Más de 70 propiedades y patrones CSS
- 8 categorías incluyendo Flexbox y Grid
- Selectores modernos (:has, :is, :not)
- Patrones de diseño responsivo
- Copia al portapapeles con un clic
- Consultas de contenedor y clamp()
Gratis. Sin registro. Tus datos permanecen en tu navegador. Anuncios mediante Google AdSense (con consentimiento).
Por Marco B. ·