|
|
 |
|
 |
|
Cours CSS N°3 : héritage et cascade| Auteur : Nicolas Chu |
Le principe de l'héritage
Certains éléments de la page HTML héritent des propriétés des styles définis. Supposons le style suivant où la couleur turquoise en arrière-plan est appliquée à la balise H1:
Lorsque nous appliquons la balise H1 dans le corps de la page, il arrive fréquemment que nous y combinions d'autres balises comme ceci :
<H1> Le principe de <I> l'héritage </I> </H1>
Nous nous retrouvons avec la balise italique à l'intérieur de la balise H1. En conséquence, la balise italique héritera des propriétés du style H1 et affichera également la couleur de fond turquoise. Le même principe s'applique à beaucoup d'autres styles.
Prenons l'exemple de 3 styles imbriqués :
- Le Style 1 se caractérise par son propre style
- Le Style 2 se caractérise par son propre style et celui du style 1
- Le Style 3 se caractérise par son propre style et ceux des styles 1 et 2
Les feuilles de style en cascade
En cas de concurrence entre plusieurs éléments de style, intervient alors la notion de "cascade" ou d'ordre de priorité.
La concurrence entre plusieurs éléments de style peut provenir des différentes possibilités de localisation de feuilles de style :
- dans un fichier externe avec l'extension css.
- dans la balise HEAD du document.
- dans le BODY du document.
La règle de priorité appliquée par le browser sera d'appliquer pour la présentation du document la feuille de style la plus proche de l'élément.
Ainsi, un style spécifié dans le BODY sera retenu par rapport à un style déclaré dans un fichier externe.
Il y a cependant moyen de contourner ces règles de priorité par la déclaration ! important;
Exemple (Ne fonctionne que sous Explorer) :
Si nous tapons :
<HEAD>
<STYLE TYPE="text/css">
<!--
BODY { background-color : #0000FF }
-->
</STYLE>
</HEAD>
<BODY STYLE="background-color:#FF0000; ">
Le fond d'écran sera…Rouge (#FF0000)
Par contre, si nous tapons :
<HEAD>
<STYLE TYPE="text/css">
<!--
BODY { background-color : #0000FF ! important;}
-->
</STYLE>
</HEAD>
<BODY STYLE="background-color:#FF0000; ">
Le fond d'écran sera bleu (#0000FF)
Nous vous informons que ce cours constitue une œuvre protégée en France par le Code de la Propriété Intellectuelle, et à l’étranger par les conventions internationales en vigueur sur le droit d’auteur. La violation de l’un des droits d’auteur de l’œuvre est un délit de contrefaçon. Il est donc interdit, à titre privé ou public, de reproduire, copier, vendre, revendre ou exploiter, que ce soit dans un but commercial ou purement gratuit, ce cours, sauf accord exprès et préalable de son auteur.
| RESSOURCES GRATUITES |
 Caractères spéciaux |
| Code Couleurs HTML |
| Compresseur images |
| Générateur Méta Tags |
| Références HTML |
| Scripts : ASP |
| Scripts : Java Scripts |
|
| PRATIQUE / OUTILS |
| Salons Informatiques |
| Astuces Windows |
| Offres d'Emploi Web |
| Syndication Contenu |
|
| TÉLÉCHARGEMENTS |
| Utilitaires système |
| Logiciels pratiques |
| Jeux & démos |
|
| INFOS SITE |
| Contacts |
| Mentions légales |
| NewsList |
| Qui sommes-nous ? |
|
| PARTENAIRES |
| Jeux et Jouets |
| Murielle Cahen |
| Cours d'anglais |
| Droit NTIC |
| Directeur Internet |
| Australie |
|
|
|
|