GoupillWiki

Outils pour utilisateurs

Outils du site

Piste :
nsi:langages:html:start

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
nsi:langages:html:start [2021/10/22 23:37] – ↷ Page déplacée de nsi:tds:serveur_web20:langages:html:start à nsi:langages:html:start goupillwikinsi:langages:html:start [2023/10/18 18:00] (Version actuelle) – goupillwiki
Ligne 184: Ligne 184:
     <p style="font-family:Arial, sans-serif; font-size:12pt; text-align:justify; text-indent: 20px;">Petit bloc de texte comme exemple.</p>     <p style="font-family:Arial, sans-serif; font-size:12pt; text-align:justify; text-indent: 20px;">Petit bloc de texte comme exemple.</p>
     <p style="font-family:Arial, sans-serif; font-size:12pt; text-align:justify; text-indent: 20px;">Autre bloc de texte comme exemple.</p>     <p style="font-family:Arial, sans-serif; font-size:12pt; text-align:justify; text-indent: 20px;">Autre bloc de texte comme exemple.</p>
 +    <p style="font-family:Arial, sans-serif; font-size:12pt; text-align:justify; text-indent: 20px; color:#FF0000;">Autre bloc de texte mais écrit en couleur.</p>
   </body>   </body>
 </html> </html>
Ligne 204: Ligne 205:
     <style type="text/css">     <style type="text/css">
         body { width:80%; }         body { width:80%; }
-        p { font-family:Arial, sans-serif; } +        p { 
-        p.normal {+           font-family:Arial, sans-serif;
            font-size:12pt;            font-size:12pt;
            text-align:justify;            text-align:justify;
            text-indent: 20px;            text-indent: 20px;
         }         }
-        .enrouge { color: #FF0000; }+        p.encouleur { color: #FF0000; }
     </style>     </style>
   </head>   </head>
   <body>   <body>
-    <p class="normal">Petit bloc de texte comme exemple.</p> +    <p>Petit bloc de texte comme exemple.</p> 
-    <p class="normal enrouge">Autre bloc de texte comme exemple.</p>+    <p>Autre bloc de texte comme exemple.</p> 
 +    <p class="encouleur">Autre bloc de texte mais écrit en couleur.</p>
   </body>   </body>
 </html> </html>
Ligne 222: Ligne 224:
 Cette méthode est déjà meilleure : elle est beaucoup plus lisible. Cette méthode est déjà meilleure : elle est beaucoup plus lisible.
   * Le style défini en ligne 8 s'applique à tous les éléments de type ''%%<p>%%'',   * Le style défini en ligne 8 s'applique à tous les éléments de type ''%%<p>%%'',
-  * le style en ligne 9 s'applique à tous les éléments de type ''%%<p>%%'' et ayant la classe ''%%normal%%'', +  * le style en ligne 14 s'applique à tous les éléments de type ''%%<p>%%'' ayant la classe ''%%encouleur%%'' 
-  * le style en ligne 14 s'applique à tous les éléments ayant la classe ''%%enrouge%%'' +  * En lignes 18 et 19, les balises ''%%<p>%%'' se voient affecter le style de la ligne 8 
-  * En ligne 18, la balise ''%%<p>%%'' a la classe ''%%normal%%'', le bloc se verra affecter le style de la ligne 8 et 9 +  * En ligne 20, la balise ''%%<p>%%'' a la classe ''%%encouleur%%''. Le bloc se verra affecter les styles des lignes 8 et 14.
-  * En ligne 19, la balise ''%%<p>%%'' a simultanément les classes ''%%normal%%'' et ''%%enrouge%%'', le bloc se verra affecter les styles des lignes 8, 9 et 14.+
  
 ==== Méthode 3 : Fichier CSS à part ==== ==== Méthode 3 : Fichier CSS à part ====
Ligne 234: Ligne 235:
 /* Fichier styles.css */ /* Fichier styles.css */
 body { width:80%; } body { width:80%; }
-p { font-family:Arial, sans-serif; } +p { 
-p.normal {+  font-family:Arial, sans-serif;
   font-size:12pt;   font-size:12pt;
   text-align:justify;   text-align:justify;
   text-indent: 20px;   text-indent: 20px;
 } }
-.enrouge { color: #FF0000; }+p.encouleur { color: #FF0000; }
 </code> </code>
  
Ligne 254: Ligne 255:
   </head>   </head>
   <body>   <body>
-    <p class="normal">Petit bloc de texte comme exemple.</p> +    <p>Petit bloc de texte comme exemple.</p> 
-    <p class="normal enrouge">Autre bloc de texte comme exemple.</p>+    <p>Autre bloc de texte comme exemple.</p> 
 +    <p class="encouleur">Autre bloc de texte mais écrit en couleur.</p>
   </body>   </body>
 </html> </html>
Ligne 264: Ligne 266:
   * Celui qui écrit le contenu se contente de faire référence au fichier CSS et il a la garantie que le styles sera toujours homogène,   * Celui qui écrit le contenu se contente de faire référence au fichier CSS et il a la garantie que le styles sera toujours homogène,
   * On peut récupérer des styles tout fait.   * On peut récupérer des styles tout fait.
 +
 +<WRAP important>Une même balise peut recevoir plusieurs classes CSS en même temps.</WRAP>
nsi/langages/html/start.1634938671.txt.gz · Dernière modification : de goupillwiki