CSS a été conçu pour que les enfants d'un élément héritent des propriétés de leurs parents.
Ainsi si je définis une couleur de texte dans le
<body>, les éléments enfants auront la même couleur.
Exemple:
| <style> |
|---|
| body |
|---|
| { |
|---|
| color:red; |
|---|
| } |
|---|
| |
|---|
| </style> |
|---|
Résultat:
Titre
Ecrasement des propriétés
CSS permet de redéfinir les propriétés d'un élément plusieurs fois, le dernier enregistrement étant celui qui sera utilisé.
| <style> |
|---|
| body |
|---|
| { |
|---|
| color:red; |
|---|
| } |
|---|
| h1 |
|---|
| { |
|---|
| color:blue; |
|---|
| } |
|---|
| #main h1 |
|---|
| { |
|---|
| color:green; |
|---|
| } |
|---|
| #main h1 |
|---|
| { |
|---|
| color:orange; |
|---|
| } |
|---|
| </style> |
|---|
Dans cet exemple la balise
<h1> qui se trouve dans l'élement
#main aura comme couleur
d'abord rouge puis bleu puis vert et enfin orange. A la fin de la lecture du fichier le navigateur retiendra la dernière valeur,
donc la couleur orange sera utilisée.
L'intéret de cette information est de savoir qu'il faut dabord importer les
CSS génériques, puis des modules exterieurs et enfin des
CSS personnalisés à votre site. L'ordre jouant un rôle important, vous devez y penser dès la création de votre site.
UNE QUESTION SUR L'ARTICLE?
CSSW