• Saltar-se la navegació
• Índex del curs

Mòdul 2: Els llenguatges XHTML i CSS

• Índex
• Pràctica 1
• Pràctica 2
• Pràctica 3
• Pràctica 4
• Pràctica 5
• Pràctica 6
• Pràctica 7
• Pràctica 8
• Exercicis

Característiques dels fulls d'estils (CSS)

Una de les característiques més importants del CSS és el que es coneix com herència o ordre en cascada. El que significa treballar en cascada es pot entendre fàcilment a partir de l'exemple següent.

Imagineu-vos que voleu crear un document que tingui tota la tipografia de color gris, d'una mida de 12 píxels, sobre un fons clar. Per aconseguir-ho haureu de definir la regla següent:

* {
	color: #33f;
	background-color: #eee;
	font-size: 12px;
}

Aquesta regla de selector universal afectarà a tots els elements del document. Però, poseu per cas, que no voleu que la capçalera del primer nivell tingui el mateix color que la resta d'elements, sinó que el que voleu és que sigui de color vermell. Per això caldrà afegir una segona regla:

h1 {
	color: red;
}

El navegador sobreescriurà el valor del color selector h1 sobre el selector universal, però el selector h1 heretarà la resta de propietats de la regla més general, i mostrarà, per tant, la mateixa mida i el mateix color de fons que la resta d'elements.

Es pot dir que les diferents regles competeixen entre elles segons un ordre de jerarquia o prioritat, de manera que, les propietats d'una regla d'un ordre superior, prevaldran sempre sobre les d'un ordre inferior.

Aquest ordre en cascada separa les regles en sis grups diferents segons el tipus de selector utilitzat. El llistat dels sis grups està ordenat de major a menor prioritat. En termes generals, tindran sempre preferència els tipus de selectors de més precisió davant dels selectors més generals.

Els sis grups en què queden agrupades les regles segons el tipus de selector utilitzat, ordenats de major a menor prioritat són els següents:

1. Propietats que continguin l'expressió !important darrere del seu valor:

   h1 {
   	color: red !important;
   }
   

2. Estils declarats com a valor de l'atribut style de l'element XHTML:

   <h1 style="color: red;">Lorem Ipsum</p>

3. Regles definides per un o més selectors del tipo ID:

   #vermell {
   	color: red;
   }
   

4. Regles definides per una o més classes, atributs o pseudo-selectors:

   .vermell {
   	color:red;
   }
   
   p:first-letter {
      color: red;
   }
   	

5. Regles que contenen un o més selectors XHTML:

   h1 {
   	color: red;
   }
   

6. Regles que contenen el selector universal:

   * {
   	color: red;
   }
   

Què passa quan es troben dues regles del mateix nivell i del mateix grup?

Prioritzarà sempre la regla que contingui més selectors d'una jerarquia superior. Veieu un exemple:

#contingut .expressio .irregular 
	color: red;
}

#contingut .expressio p strong {
	font-size: 20px;
}

Les dues regles comparteixen el mateix selector id, #contingut, però la primera regla tindrà preferència sobre la segona, degut a que conté dos selectors del tipus class mentre que la segona només conté un del mateix tipus.

En el cas hipotètic de que les dues regles continguin el mateix nombre de selectors d'ordre preferent, la prioritat vindrà donada per la seva ubicació. Una regla situada en una ubicació de prioritat alta s'imposarà sobre una altra d'ubicació de menys prioritat.

Hi ha sis tipus d'ubicacions, que queden ordenades de major a menor segons el seu nivell de prioritat, de la següent manera:

1. Tota regla d'estil ubicada dins de l'element <style> tindrà preferència sobre la resta d'ubicacions.
2. Tota regla d'estil ubicada en un full d'estil extern invocada mitjançant l'expressió @import dins de l'element <style> del document.
3. Tota regla d'estil invocada mitjançant un enllaç del tipus <link />.
4. Tota regla d'estil invocada mitjançant una expressió @import dins d'una etiqueta <link /> del document.
5. Tota regla d'estil enllaçada manualment per l'usuari.
6. Tota regla d'estil proporcionada per defecte pel navegador.

Finalment, quan diferents regles d'estil comparteixen el mateix nivell de prioritat d'ubicació, l'ordre de preferència vindrà determinat per l'ordre d'aparició. Una regla que apareix més tard que una altra tindrà preferència sobre la que ha aparegut prèviament.

Tornar a l'inici de la pràctica