Selectores y el modelo de caja
26 pasos en 7 series de CSS.
Selectores y el modelo de caja, es decir, las dos cosas de las que depende todo lo demás en CSS. Después la cascada, color y tipografía, cajas, unidades, y cómo dar estilo al contenido de texto.
Veintiséis pasos, cada uno verificado contra el parser de CSS del propio Chromium. Si una propiedad o un valor de aquí fuera inválido, la suite de pruebas lo habría dicho.
Selectores
- Selectores de elementoReglas ligadas al nombre del elemento, más la forma agrupada y la universal.
- Clases e idsLas clases son para estilos; los ids, para anclas y etiquetas — sus pesos difieren.
- CombinadoresDescendiente, hijo, hermano adyacente y general: cuatro maneras de relacionar elementos.
- Selectores de atributoCoincidir por la presencia de un atributo o por la forma de su valor.
- PseudoclasesSelectores de estado: hover, focus, disabled y los estructurales.
- Selectores estructuralesSeleccionar por posición: fila por medio, las primeras, la última.
La cascada
- EspecificidadCuando dos reglas fijan la misma propiedad gana el selector más específico — y la cuenta no es pareja.
- inherit, initial, unset, revertCuatro palabras clave que dicen de dónde debe venir un valor en vez de nombrarlo.
- Las capas deciden antes que la especificidadEl orden de la capa le gana a todo selector interno; así evitas que un reset pelee con un componente.
Color y tipografía
- ColorHex, rgb, hsl y las formas relativas modernas, más la transparencia.
- Color en una gama más ampliaoklch es luminosidad, croma y matiz: una paleta es un número cambiando a la vez.
- TipografíaFamilia, tamaño, peso y el espaciado que hace legible el texto.
- Estilizar textoAlineación, mayúsculas, decoración y qué pasa con las líneas largas.
Cajas
- El modelo de cajaContenido, padding, borde y margen — y por qué border-box es más amable.
- Hacer que width mida el anchoPor defecto width es solo el contenido, y cada borde que agregas agranda la caja.
- Bordes, radios y outlinesLos bordes: estilos, esquinas redondeadas y outlines que no mueven el layout.
- FondosColor, imágenes, degradados y cómo se dimensiona y ubica un fondo.
- Display y tamañosCómo participa una caja en el layout y los tamaños que la restringen.
- Overflow y scrollQué pasa cuando el contenido es más grande que su caja.
Valores y unidades
- Qué unidad elegirLas unidades absolutas ignoran al lector; las relativas, no.
- calc y unidadesMezclar unidades en una expresión y las unidades que conviene usar.
- Propiedades lógicasBlock e inline en vez de top y left, para que un layout sobreviva a la traducción.
Estilo del contenido
- Estilizar listasLos marcadores ya son su propia cajita, accesible sin trucos de pseudoelementos.
- Estilizar una tablaDos propiedades hacen casi todo el trabajo, y ambas van sobre la tabla misma.
- Cursores, selección y eventos del punteroLas propiedades pequeñas que deciden cómo se siente una superficie bajo el mouse.
Bis
- base_styles.cssUna hoja base completa: reset, tokens, tipografía y valores por defecto de formularios.