CSS
Revisa la sintaxis de CSS, declaraciones, reglas, bloques, comentarios y at-rules como media, supports, layer, import y keyframes.
Una hoja CSS contiene reglas que seleccionan elementos y les asignan declaraciones.
.project-card {
padding: 1rem;
border-radius: 1rem;
}.project-card → selector
{ ... } → bloque
padding → propiedad
1rem → valor
padding: 1rem; → declaraciónh1,
h2 {
line-height: 1.1;
}La lista comparte declaraciones. Un selector inválido puede descartar la regla completa; funciones como :is() y :where() admiten listas más tolerantes en sus contextos.
.card {
color: #111;
background-color: white;
}El colon separa propiedad y valor. El punto y coma separa declaraciones. Conserva el último para evitar errores al añadir otra línea.
.card {
margin: 1rem 2rem;
}margin establece cuatro longhands. Una shorthand puede reiniciar subpropiedades no escritas.
.element {
background-color: red;
background: url("texture.png");
}La segunda declaración también reinicia background-color.
:root {
--space-md: 1rem;
}
.card {
padding: var(--space-md);
}Los nombres --* conservan tokens para reutilizarlos con var().
/* Main navigation */
.nav { ... }CSS no usa //. Los comentarios llegan al cliente.
Los espacios cambian selectores:
.card.title { }
.card .title { }El primero exige ambas clases en el mismo elemento; el segundo selecciona un descendiente.
@media (width >= 48rem) { ... }
@supports (display: grid) { ... }
@layer components { ... }
@keyframes fade { ... }Algunas terminan con punto y coma:
@import url("theme.css") layer(theme);@import debe aparecer antes de reglas normales y puede retrasar el descubrimiento frente a <link>.
.card {
color: red;
width: not-a-size;
padding: 1rem;
}Se descarta width, no todo el bloque.
.card {
color: #6b46c1;
color: oklch(55% 0.2 300);
}Un navegador sin soporte conserva el primer valor. Uno compatible usa el posterior.
.card {
padding: 1rem;
& > h2 {
margin-block: 0;
}
}No es idéntico en todos sus detalles a Sass y participa en la especificidad normal.
//.@import después de reglas normales.¿Por qué background: url(...) puede eliminar un color anterior?
Porque background es una shorthand y reinicia sus subpropiedades no incluidas.
Aplicar CSS y orígenes de estilo explica de dónde llegan las reglas.