Dos reglas mandan a la vez
CSS es el lenguaje que dice cómo se ve cada elemento de una página. Cuando dos reglas dan órdenes distintas al mismo elemento, el navegador elige una, y saber cuál gana te ahorra horas de pruebas.
Sus siglas vienen de Cascading Style Sheets, hojas de estilo en cascada. Imagina que una regla pinta de gris todos los párrafos y otra pinta de naranja los avisos. Un aviso es un párrafo: ¿de qué color sale?
Al terminar esta lección
Nota
Puedo predecir qué regla CSS gana cuando dos reglas afectan al mismo elemento.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Regla | un selector con sus declaraciones entre llaves | |
| Selector | la parte que dice a qué elementos se aplica la regla | .plato |
| Declaración | un ajuste de la regla: una propiedad y su valor | margin: 1rem |
| Especificidad | el peso de un selector cuando dos reglas chocan | |
| Cascada | el orden de decisión que elige qué regla gana | |
| Herencia | un hijo recibe algunos valores de su padre |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Una regla CSS tiene un selector y declaraciones
Una regla empieza con un selector, que dice a qué elementos habla. Después, entre llaves, van las declaraciones. Cada una es una propiedad, dos puntos, un valor y un punto y coma.
Hay tres selectores básicos. Uno por etiqueta, como h2. Uno por clase, que empieza con punto, como .plato. Y uno por identificador, que empieza con almohadilla, como #buscar.
Tres reglas con tres tipos de selector
h2 {
color: #b3402a;
margin-bottom: 0.5rem;
}
.plato.vegetariano {
border-left-width: 8px;
}
#buscar {
padding: 0.4rem;
}La especificidad decide entre dos reglas
Si dos reglas chocan, gana la de selector más específico. Se cuenta en tres columnas, por este orden de importancia: identificadores, clases y etiquetas.
Se comparan columna a columna, de izquierda a derecha. Un solo identificador gana a cualquier número de clases. Si hay empate, gana la regla que va más tarde en el archivo.
Ejemplo resuelto: el peso de seis selectores
| Selector | Identificadores | Clases | Etiquetas |
|---|---|---|---|
| p | 0 | 0 | 1 |
| .aviso | 0 | 1 | 0 |
| p.aviso | 0 | 1 | 1 |
| nav a | 0 | 0 | 2 |
| #menu | 1 | 0 | 0 |
| #menu .plato a | 1 | 1 | 1 |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Tres reglas para un mismo párrafo
p {
color: gray;
}
.aviso {
color: orange;
}
p.aviso {
color: red;
}
<p class="aviso">Hoy no hay paella</p>Un error frecuente
Advertencia
Mucha gente cree que siempre gana la última regla del archivo. Solo gana la última cuando el peso es el mismo. Una regla anterior con un selector más específico gana a una posterior más simple. Cuenta primero los pesos y mira el orden después.
Algunos valores pasan de padre a hijo
La herencia hace que un elemento reciba de su padre algunas propiedades, como el color del texto o la fuente. No hace falta escribirlas en cada elemento.
Otras no se heredan, como el borde o el margen. Si cada hijo heredara el borde de su padre, la página sería un cuadro dentro de otro cuadro.
Qué propiedades pasan de padre a hijo
| Propiedad | Se hereda | Por qué |
|---|---|---|
| color | Sí | Todo el texto de un bloque suele tener el mismo color |
| font-family | Sí | Una página usa una fuente en casi todo |
| border | No | Cada elemento decide si lleva borde |
| margin | No | El espacio exterior es asunto de cada caja |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Lee las reglas de la página del laboratorio
La página del laboratorio tiene su hoja de estilos en site/style.css. El primer script cuenta sus reglas y sus declaraciones y dice qué propiedad se usa más. Los textos que escribe están en inglés: declarations son las declaraciones.
Verás 17 reglas y 39 declaraciones. Después, un grep muestra las líneas donde aparece dish, que quiere decir plato. La tarjeta de un plato vegetariano tiene el borde izquierdo más grueso porque .dish.vegetarian pesa más que .dish.
Contar las reglas de la hoja de estilos
docker exec jupyter python3 steps/css.pySe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Ver las reglas que tocan a los platos
docker exec jupyter grep -n "dish" site/style.cssSe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.