This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
2017_2018:s1:webdoc:td2 [2017/11/06 08:15] pourcelot [#TD2 { CSS : à chacun son style }] |
2017_2018:s1:webdoc:td2 [2017/11/16 11:15] (current) pourcelot [La notion d’héritage/cascade] |
||
---|---|---|---|
Line 10: | Line 10: | ||
Veillez à vous concentrer sur la technique et non pas sur la beauté relative de vos œuvres. | Veillez à vous concentrer sur la technique et non pas sur la beauté relative de vos œuvres. | ||
- | [[https://fr.wiktionary.org/wiki/des_go%C3%BBts_et_des_couleurs,_on_ne_discute_pas|Les goûts et les couleurs...] | + | [[https://fr.wiktionary.org/wiki/des_go%C3%BBts_et_des_couleurs,_on_ne_discute_pas|Les goûts et les couleurs...]] |
Line 81: | Line 81: | ||
Si on traduit les trois mots de « Cascading Style Sheets » on obtient Feuille de style en cascade. Pourquoi « en cascade » ? | Si on traduit les trois mots de « Cascading Style Sheets » on obtient Feuille de style en cascade. Pourquoi « en cascade » ? | ||
- | Car si vous définissez une police de type "Trebuchet MS" sur la balise <body>, l'ensemble des autres éléments du site (parce qu'inclus dans cette balise) prendra comme police ''Trebuchet MS'', inutile de le redéfinir pour chaque élément. | + | Car si vous définissez une police de type "Trebuchet MS" sur la balise <body> , l'ensemble des autres éléments du site (parce qu'inclus dans cette balise) prendra comme police ''Trebuchet MS'', inutile de le redéfinir pour chaque élément. |
Autre exemple, si vous définissez la balise ''body'' avec une couleur rouge (comme le montre la commande suivante), les autres éléments du ''body'' auront une couleur rouge par défaut : | Autre exemple, si vous définissez la balise ''body'' avec une couleur rouge (comme le montre la commande suivante), les autres éléments du ''body'' auront une couleur rouge par défaut : | ||
<code css> body { color: #FF0000; } </code> | <code css> body { color: #FF0000; } </code> | ||
- | Si vous souhaitez une autre police pour les balises ''<h1>'' par exemple, il suffit de la définir à nouveau. | + | Si vous souhaitez une autre couleur pour les balises ''<h1>'' par exemple, il suffit de la définir à nouveau. |
<code css> | <code css> | ||
- | h1 {font-family: Georgia, sans-serif;} | + | h1 {color: #FF7F50;} |
- | p {font-family: Tahoma, serif;} | + | p { |
+ | color: #696969; | ||
+ | font-family: Tahoma, serif; | ||
+ | } | ||
</code> | </code> | ||
Les navigateurs appliquent donc à un élément la règle la plus **spécifique** qui le concerne, donc préférentiellement une règle qui cible directement cet élément, s'il n'y en a pas ce sera la règle de son élément père, puis de son grand-père, etc, jusqu'à la règle par défaut. | Les navigateurs appliquent donc à un élément la règle la plus **spécifique** qui le concerne, donc préférentiellement une règle qui cible directement cet élément, s'il n'y en a pas ce sera la règle de son élément père, puis de son grand-père, etc, jusqu'à la règle par défaut. | ||
- | Un sélecteur de la forme sélecteur1 > sélecteur2, au contraire, ne désigne que le cas où sélecteur2 est directement fils de sélecteur1. Par exemple, ceci peut être utile si l'on souhaite que la règle s'applique à un ''li'' qui serait contenu dans une sous-liste de type ''ul'' seulement, mais pas ''ol''. | + | CSS permet de créer des règles d'héritages plus complexes à l'aide de //motifs contextuels//. |
+ | |||
+ | Par exemple, un sélecteur de la forme //sélecteur1 sélecteur2// désigne le cas où sélecteur 2 descend de sélecteur 1. | ||
+ | |||
+ | Considérons par exemple la règle suivante~: | ||
+ | |||
+ | <code css> | ||
+ | p a {color:Orange;} | ||
+ | </code> | ||
+ | |||
+ | Ceci colorera en orange uniquement les liens placés dans un paragraphe. | ||
+ | |||
+ | Considérons par exemple une page HTML contenant le code suivant, et à laquelle on associe la feuille de style contenant la règle ''p a {color:Orange;}'' : | ||
+ | <code html> | ||
+ | <body> | ||
+ | <h1>Menu</h1> | ||
+ | <ul> | ||
+ | <li><a href="#presentation">Présentation du site</a></li> | ||
+ | <li><a href="#licence">Disclaimer</a></li> | ||
+ | </ul> | ||
+ | <h1 id="presentation">Présentation</h1> | ||
+ | <p>Ce site propose des informations sur la cryptographie :</p> | ||
+ | <ul> | ||
+ | <li><a href="crypto_sym.html">Cryptographie symétrique (AES...)</a></li> | ||
+ | <li><a href="crypto_asym.html">Cryptographie asymétrique (RSA...)</a></li> | ||
+ | </ul> | ||
+ | <p>Plus d'informations sur le site <a href="a_propos.html">ici</a>.</p> | ||
+ | <h1 id="licence">Disclaimer</h1> | ||
+ | <p>Les informations contenues sur ce site sont sous licence <a href="https://creativecommons.org/licenses/by-sa/2.0/fr/">Creative Commons CC-by-SA</a>.</p>. | ||
+ | </body> | ||
+ | </code> | ||
+ | |||
+ | Quels sont les liens qui vont apparaître en orange sur la page ? | ||
+ | |||
+ | Cas particulier, un sélecteur de la forme //sélecteur1 > sélecteur2// ne désigne que le cas où sélecteur2 est ''directement'' fils de sélecteur1. Par exemple, ceci peut être utile si l'on souhaite que la règle s'applique à un ''li'' qui serait contenu dans une sous-liste de type ''ul'' seulement, mais pas ''ol'', y compris pour des listes imbriquées. | ||
<code css> | <code css> | ||
ul > li { margin-left: 10em; } | ul > li { margin-left: 10em; } | ||
Line 119: | Line 156: | ||
| lien actif (cliqué) | a:active {color:} | | | lien actif (cliqué) | a:active {color:} | | ||
| lien survolé | a:hover {color:} | | | lien survolé | a:hover {color:} | | ||
- | | Type de police | {font-family:"French Script MT"; | | + | | Type de police | font-family:"French Script MT"; | |
- | | Taille de police | {font-size:xx-large; //par exemple// | | + | | Taille de police | font-size:xx-large; | |
| Couleur du texte | color: | | | Couleur du texte | color: | | ||
| Texte en gras | font-weight:bold; | | | Texte en gras | font-weight:bold; | | ||
Line 126: | Line 163: | ||
| Texte souligné | text-decoration:underline; | | | Texte souligné | text-decoration:underline; | | ||
| Couleur de fond | background-color: | | | Couleur de fond | background-color: | | ||
+ | |||
+ | Vous pouvez également utiliser la balise ''<abbr>'' ([[https://developer.mozilla.org/fr/docs/Web/HTML/Element/abbr|description]]). | ||
</note> | </note> | ||
+ | |||
==== Combinaison de sélecteurs ==== | ==== Combinaison de sélecteurs ==== |