Differences

This shows you the differences between two versions of the page.

--- 2017_2018:s1:webdoc:td2 [2017/11/06 07:22] – [La notion d’héritage/cascade] pourcelot
+++ 2017_2018:s1:webdoc:td2 [2017/11/16 10:15] (current) – [La notion d’héritage/cascade] pourcelot
@@ Line 96: / Line 96: @@
 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>
 ul > li { margin-left: 10em; }
@@ Line 122: / Line 156: @@
 | lien actif (cliqué)   | a:active {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: |
 | Texte en gras | font-weight:bold; |
@@ Line 129: / Line 163: @@
 | Texte souligné | text-decoration:underline; |
 | Couleur de fond | background-color: |
+Vous pouvez également utiliser la balise ''<abbr>'' ([[https://developer.mozilla.org/fr/docs/Web/HTML/Element/abbr|description]]).
 </note>
 ==== Combinaison de sélecteurs ====