Differences

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

--- 2017_2018:s1:webdoc:td2 [2017/10/23 00:01]
pourcelot created
+++ 2017_2018:s1:webdoc:td2 [2017/11/16 11:15] (current)
pourcelot [La notion d’héritage/cascade]
@@ Line 1: / Line 1: @@
 ====== #TD2 { CSS : à chacun son style } ======
-Inspiré du cours de Gaëtan Rey.
+Ce cours est une reprise (à quelques corrections près) de celui d'Ivan Logre (lui-même inspiré de celui de Gaëtan Rey).
 ** Toutes les questions du TD sont à répondre dans un document .html validé qui contiendra les noms et prénoms du binome **
@@ Line 8: / Line 8: @@
 Même si nous adressons ici des problématiques d'affichage et de style, ce module n'a pas la prétention de faire de vous des designers.
-Veillez à vous concentrer sur la technique et non pas sur la beauté relative de vos oeuvres.
+Veillez à vous concentrer sur la technique et non pas sur la beauté relative de vos œuvres.
-[[http://www.i3s.unice.fr/~logre/docs/divers/ET.gif|Les gouts 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 17: / Line 17: @@
 Les feuilles de style en cascade nommées CSS (Cascading Style Sheets) servent à décrire la présentation, ou style, des documents (x)HTML et XML.
-Les standards définissant CSS sont publiés par le W3C. Introduit au fin 1996, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.
+Les standards définissant CSS sont publiés par le W3C. Introduit fin 1996, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.
 L'un des objectifs majeurs de CSS est de séparer le contenu de la forme dans un document (x)HTML. Il est par exemple <del>possible</del>, non... <del>souhaitable</del>, non! **OBLIGATOIRE**  de ne décrire que la structure d'un document en HTML, et de décrire toute la présentation dans une feuille de style CSS séparée.
@@ Line 81: / Line 81: @@
 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 :
 <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>
-h1 {font-family: Georgia, sans-serif;}
+h1 {color: #FF7F50;}
-p {font-family: Tahoma, serif;}
+p {
+   color: #696969;
+   font-family: Tahoma, serif;
+   }
 </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.
-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 99: / Line 136: @@
 <box round rgb(185,211,238) 95%|**A Faire :**  >
-  * Visualiser {{:2016_2017:s1:webdoc:gardencss0.html.zip|ce fichier}} avec un navigateur
+  * Visualiser {{:2017_2018:s1:webdoc:gardencss0.html.zip|ce fichier}} avec un navigateur
   * Vérifiez la [[https://validator.w3.org/#validate-by-upload|validité]] du document. Votre objectif est de le rendre valide en séparant contenu et présentation.
   * Recopier le fichier sous ''gardenWithoutCss.html'' puis séparer le style dans un fichier css.
@@ Line 119: / 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 126: / 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 ====

Cours au département INFO - IUT - UNS

User Tools

Site Tools

Differences

Page Tools