« Le langage HTML/Zones de mise en forme » : différence entre les versions

Contenu supprimé Contenu ajouté
→‎Caractérisation : mise en forme tableau
Ligne 64 :
Il est conseiller d'opter pour une solution avec feuille de style externe. Mais comment fait-on alors pour personnaliser chaque <code><nowiki><div></nowiki></code> ?
Il suffit d'ajouter dans la balise <code><nowiki><div></nowiki></code> une information qui permettra de la caractériser, un <code>class</code> ou un <code>id</code>. On précise qu'un id est à usage unique, pas le class (id : identité unique, class : classe de style ou multiplicité).
L'utilisation de ces balises se fait ainsi :
 
{|align="center" rules="all" cellspacing="0" cellpadding="4" style="border: 1px solid #999; border-right: 2px solid #999; border-bottom: 2px solid #999; background: #ccccff"
|+ Utilisation de <code>class</code> et de <code>id</code>
|-style="background: #9999ff"
!|colspan="2" align="center" | Avec <code>class</codesmall>Code !!align="center"CSS |dans l'en-tête Avecou <code>idle fichier lié</codesmall>
|-
|<pre>
.ma_classe
propriété 1 : valeur 1;
propriété 2 : valeur 2;
...
</pre> ||
<pre>
#mon_id
propriété 1 : valeur 1;
propriété 2 : valeur 2;
...
</pre>
|-style="background: #9999ff"
|colspan="2" align="center" | <small>inclusionCode dans le CSSHTML</small>
|-style="background: #9999ff"
! align="center" | Avec <code>class</code> !! align="center" | Avec <code>id</code>
|-
|<pre>
Ligne 88 ⟶ 110 :
</html>
</pre>
|-style="background: #9999ff"
|colspan="2" align="center" | <small>inclusion dans le <code>div</code></small>
|-
|<pre>
.ma_classe
propriété 1 : valeur 1;
propriété 2 : valeur 2;
...
</pre> ||
<pre>
#mon_id
propriété 1 : valeur 1;
propriété 2 : valeur 2;
...
</pre>
|-style="background: #9999ff"
|colspan="2" align="center" | <small>inclusion dans le CSS</small>
|}