Què significa "Cascade" en fulls d'estil en cascada?

Les fulles d'estil en cascada o CSS estan configurades de manera que pugueu tenir moltes propietats que afecten el mateix element. Algunes d'aquestes propietats poden estar en conflicte entre elles. Per exemple, podeu establir un color de lletra de color vermell a l'etiqueta del paràgraf i, més endavant, establir un color de font de color blau. Com sap el navegador el color per fer els paràgrafs? Això es decideix per la cascada.

Tipus de fulls d'estil

Hi ha tres tipus diferents de fulls d'estil:

  1. Fulls d'estil de l'autor
    1. Són fulls d'estil creats per l'autor de la pàgina web. Són el que la majoria de la gent pensa quan pensen en fulls d'estil CSS.
  2. Fulles d'estil d'usuari
    1. Els fulls d'estil de l'usuari els defineix l'usuari de la pàgina web. Això permet que l'usuari tingui més control sobre com es mostren les pàgines.
  3. Fulls d'estil de l'agent d'usuari
    1. Aquests són estils que el navegador web aplica a la pàgina per ajudar a mostrar aquesta pàgina. Per exemple, en XHTML, la majoria dels agents visuals de l'usuari mostren l'etiqueta com a text en cursiva. Això es defineix al full d'estils de l'agent d'usuari.

Les propietats que es defineixen en cadascun dels fulls d'estil anteriors tenen un pes. De manera predeterminada, el full d'estil d'autor té més pes, seguit del full d'estil d'usuari i, finalment, el full d'estils d'agent d'usuari. L'única excepció a això és la regla important en un full d'estil d'usuari. Això té més pes que el full d'estil de l'autor.

Ordre en cascada

Per resoldre conflictes, els navegadors web utilitzen el següent ordre de classificació per determinar quin estil té prioritat i s'utilitzarà:

  1. Primer, busqueu totes les declaracions que s'apliquen a l'element en qüestió i el tipus de suport assignat.
  2. A continuació, consulteu el full d'estils que prové. Com anteriorment, els fulls d'estil de l'autor apareixen primer, a continuació, l'usuari i, a continuació, l'agent d'usuari. Amb els estils d'usuari importants que tenen una major prioritat que els estils importants de l'autor.
  3. Com més específic sigui un selector, més avantatge tindrà. Per exemple, un estil de "div.cop" tindrà una major prioritat que un només a l'etiqueta "p".
  4. Finalment, ordeneu les regles segons l'ordre en què es van definir. Les regles que es defineixen més endavant en l'arbre del document tenen una major prioritat que les definides anteriorment. Les regles d'un full d'estil importat es consideren abans de les regles directament al full d'estils.