Curs curt de CSS
La cascada és el que fa que els fulls d'estil CSS siguin tan útils. En definitiva, la cascada defineix l'ordre de prioritat de com s'han d'aplicar els estils conflictius. En altres paraules, si teniu dos estils:
p {color: vermell; }
p {color: blau; }
La cascada determina quin color ha de ser els paràgrafs, tot i que el full d'estils indica que han de ser tant de color vermell com de blau. En última instància, només es pot aplicar un color als paràgrafs, per tant, ha d'existir una comanda.
I s'aplica aquest ordre mitjançant el qual els selectors (el p en l'exemple anterior) tenen la major prioritat i quin ordre apareixen al document.
La llista següent és una simplificació de com el vostre navegador decideix la preferència d'un estil:
- Mireu el full d'estils d'un selector que coincideixi amb l'element. Si no hi ha estils definits, utilitzeu les regles predeterminades al navegador
- Mireu el full d'estils per als selectors marcats. Importants i apliqueu-los als elements adequats.
- Tots els estils del full d'estils anul·laran els estils de navegador predeterminats (excepte en el cas dels fulls d'estil de l'usuari).
- Com més específic sigui el selector d'estil, major serà la prioritat que tindrà. Per exemple, div> p.class és més específic que p.class que és més específic que p.
- Finalment, si dues regles s'apliquen al mateix element i tenen la mateixa preferència del selector, s'aplicarà el que s'hagi carregat últimament. En altres paraules, el full d'estils es llegeix de dalt a baix, i els estils s'apliquen un sobre l'altre.
Basant-se en aquestes regles, en l'exemple anterior, els paràgrafs serien escrits en blau, perquè p {color: blau; } arriba últimament al full d'estils.
Aquesta és una explicació molt simplificada de la cascada. Si esteu interessats a aprendre més sobre com funciona la cascada, heu de llegir què significa "cascada" en fulls d'estil en cascada? .