Cascada i herència

This translation is incomplete. Please help translate this article from English.

Aquesta és la quarta secció del tutorial CSS Getting Started ; descriu com els fulls d'estil interactuenen en cascada, i com els elements hereten l'estil dels seus pares. S'agrega a la vostre fulla d'estils d'exemple, utilitzant l'herència per alterar l'estil de moltes parts del document en un sol pas.

Informació: Cascada i herència

L'estil final per a un element es pot especificar en molts llocs diferents, que poden interactuar d'una manera complexa. Aquesta interacció complexa fa que el CSS sigui de gran abast, però també pot fer que sigui confús i difícil de depurar.

Tres fonts principals d'informació d'estil formen una cascada. Aqueste son:

  • Estils per defecte del navegador per al llenguatge de marques.
  • Estils especificats per un usuari que està llegint el document.
  • Els estils relacionats amb el document pel seu autor. Aquests es poden especificar en tres llocs:
    • En un arxiu extern: aquest tutorial discuteix principalment aquest mètode de definició d'estils.
    • En una definició al començament del document: utilitzar aquest mètode només per als estils que s'utilitzen només en aquesta pàgina.
    • En un element específic en el cos del document: aquest és el mètode menys mantenible, però pot ser utilitzat per a les proves.

L'estil de l'usuari modifica l'estil per defecte del navegador. L'estil de l'autor del document modifica l'estil una mica més. En aquest tutorial, vosaltres sou l'autor del document d'exemple, i només es treballa amb fulls d'estil d'autor.

Exemple

Quan llegiu aquest document en un navegador, part de l'estil que es veu prové dels valors per defecte del navegador per HTML.

Part de l'estil podria venir de la configuració del navegador a mida o un arxiu de definició d'estil personalitzat. A Firefox, la configuració es pot personalitzar en el quadre de diàleg Preferències, o es pot especificar estils en un arxiu userContent.css arxiu anomenat en el vostre perfil de navegador.

Part de l'estil prové de les fulles d'estil vinculades al document per part del servidor.

En obrir el document d'exemple en el navegador, els elements <strong> destacan més que la resta del text. Això ve de l'estil per defecte del navegador per HTML.

Els elements <strong> són de color vermell. Això ve de la pròpia fulla d'estils d'exemple.

Els elements <strong> també hereten gran part de  l'estil de l'element <p>, perquè són els seus fills. De la mateixa manera, l'element <p> hereta gran part de l'estil de l'element <body>.

Per estils en cascada, els fulls d'estil d'autor tenen prioritat, a continuació els fulls d'estil del lector i seguidament els valors per defecte del navegador.

Per estils heretats, l'estil propi d'un node fill té prioritat sobre l'estil heretat del seu pare.

Aquestes no són les úniques prioritats que s'apliquen. Una pàgina més endavant en aquest tutorial s'explica més.

Més detalls

CSS proporciona una manera perquè el lector pugui anul·lar l'estil de l'autor del document, mitjançant l'ús de la paraula clau !important.

Això vol dir que, com a autor del document, no sempre es pot predir amb exactitud el que els vostres lectors veuran.

Si vols conèixer tots els detalls de cascada i herència, consulteu Assignació de valors de les propietats, Cascada i herència en l'especificació CSS.

Acció: L'ús de l'herència

  1. Edita l'arxiu CSS d'exemple.
  2. Afegir aquesta línia copiant-la i enganxant-la. Realment no importa si l'afegeixes per damunt o per sota de la línia ja existent. No obstant això, afegir-la en la part superior és el mes lògic, ja que en el document  l'element <p> és el pare de l'element <strong>:
    p {color: blue; text-decoration: underline;}
    
  3. Actualitzar el navegador per veure l'efecte en el document d'exemple. El subratllat afecta a tot el text en el paràgraf, incloent les lletres inicials. Els elements <strong> han hagut d'heretar l'estil subratllat del seu pare, l'element <p>.
     

    Però els elements <strong> estan sent vermells. El color vermell correspont el seu propi estil, pel que té prioritat sobre el color blau del seu pare, l'element <p>.

Abans

Contingut HTML

<p>
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>

Contingut CSS

strong {color:red}

Després

Contingut HTML

<p>
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>

Contingut CSS

p {color:blue; text-decoration:underline}
strong {color:red}

 

Repte
Modifiqueu el full d'estils perquè només les lletres vermelles estiguin subratllades:
Cascading Style Sheets
Possible solution

Move the declaration for underlining from the rule for <p> to the one for <strong>. The resulting file looks like this:

p {color: blue; }
strong {color: red; text-decoration: underline;}

 

Hide solution
Veure la solució per el repte.

 

I ara què?

El full d'estils d'exemple especifica els estils per a les etiquetes <p> i <strong>, modificant l'estil dels elements corresponents a tot el document. La següent secció descriu com especificar l'estil de manera més selectiva.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,