| color / exemple : color:#33FF66; |
|---|
Modifie la couleur du texte| Valeurs : | Résultat dans le navigateur : |
|---|
| nom_de_couleur | Texte de la couleur "nom_de_couleur" (ex : red, yellow, green...) | | #code_couleur | Texte de la couleur correspondant au code héxadécimal "code_couleur" (ex : #ff0000) | | | <div style="color:#ff0000;">Mon texte ici</div> |
|
| font-family / exemple : font-family:"Times New Roman", Times, serif; |
|---|
Modifie la police de caractère du texte. On peut mettre plusieurs polices séparées par des virgules, dans ce cas le navigateur affiche la première qui est disponible sur la machine du visiteur.| Valeurs : | Résultat dans le navigateur : |
|---|
| Arial, Helvetica, sans-serif | Texte en Arial <div style="font-family:Arial, Helvetica, sans-serif;">Un exemple ici !</div> | | Times New Roman, Times, serif | Texte en Times new Roman <div style="font-family:Times New Roman, Times, serif;">Un exemple ici !</div> | | Courier New, Courier, monospace | Texte en Courrier New <div style="font-family:Courier New, Courier, monospace;">Un exemple ici !</div> | | Georgia, Times New Roman, Times, serif | Texte en Georgia <div style="font-family:Georgia, Times New Roman, Times, serif;">Un exemple ici !</div> | | Verdana, Arial, Helvetica, sans-serif | Texte en Verdana <div style="font-family:Verdana, Arial, Helvetica, sans-serif;">Un exemple ici !</div> | | Geneva, Arial, Helvetica, sans-serif | Texte en Georgia <div style="font-family:Geneva, Arial, Helvetica, sans-serif;">Un exemple ici !</div> |
|
| font-size / exemple : font-size:16px; |
|---|
Modifie la taille du texte| Valeurs : | Résultat dans le navigateur : |
|---|
| Xpx | Texte en X pixels, X étant un entier (ex : 20px). | | | <div style="font-size:20px;">Mon texte ici</div> |
|
| font-style / exemple : font-style:oblique; |
|---|
Modifie l'inclinaison du texte| Valeurs : | Résultat dans le navigateur : |
|---|
| oblique | Texte en oblique <div style="font-style:oblique;">Un exemple ici !</div> | | italic | Texte en italique <div style="font-style:italic;">Un exemple ici !</div> | | normal | Texte normal (droit) <div style="font-style:normal;">Un exemple ici !</div> |
|
| font-weight / exemple : font-weight:bold; |
|---|
Modifie l'épaisseur du texte| Valeurs : | Résultat dans le navigateur : |
|---|
| bold | Texte en gras <div style="font-weight:bold;">Un exemple ici !</div> | | normal | Texte normal (non-gras) <div style="font-weight:normal;">Un exemple ici !</div> |
|
| letter-spacing / exemple : letter-spacing:3px; |
|---|
Modifie l'espace entre les lettres| Valeurs : | Résultat dans le navigateur : |
|---|
| Xpx | Texte avec des lettres espacées de X pixels, X étant un entier | | normal | Texte normal (sans espace supplémentaire entre les lettres) | | | <div style="letter-spacing:5px;">Mon texte ici</div> |
|
| line-height / exemple : line-height:15px; |
|---|
Modifie l'espace entre les lignes| Valeurs : | Résultat dans le navigateur : |
|---|
| Xpx | Texte avec des lignes espacées de X pixel souhaité, X étant un entier | | normal | Texte normal (sans espace supplémentaire entre les lignes) | | | <div style="line-height:26px;">Mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici</div> Mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici |
|
| text-align / exemple : text-align:center; |
|---|
Modifie l'alignement horizontal du texte| Valeurs : | Résultat dans le navigateur : |
|---|
| left | Texte aligné à gauche | | center | Texte centré | | right | Texte aligné à droite | | justify | Texte justifié |
|
| text-decoration / exemple : text-decoration:underline; |
|---|
Modifie la «decoration» du texte| Valeurs : | Résultat dans le navigateur : |
|---|
| underline | Texte souligné <div style="text-decoration:underline;">Un exemple ici !</div> | | line-through | Texte barré <div style="text-decoration:line-through;">Un exemple ici !</div> | | blink | Texte clignotant <div style="text-decoration:blink;">Un exemple ici !</div> | | none | Texte normal (non souligné, non barré, non clignotant) <div style="text-decoration:none;">Un exemple ici !</div> |
|
| text-transform / exemple : text-transform:uppercase; |
|---|
Modifie la casse du texte| Valeurs : | Résultat dans le navigateur : |
|---|
| uppercase | Texte en lettres capitales <div style="text-transform:uppercase;">Un exemple ici !</div> | | lowercase | Texte en lettres minuscules <div style="text-transform:lowercase;">Un exemple ici !</div> | | capitalize | Texte avec la première lettre de chaque en majuscule. <div style="text-transform:capitalize;">Un exemple ici !</div> | | none | Texte normal (non changé) <div style="text-transform:none;">Un exemple ici !</div> |
|
| text-align / exemple : text-align:center; |
|---|
Modifie l'alignement horizontal du texte| Valeurs : | Résultat dans le navigateur : |
|---|
| left | Texte aligné à gauche <div style="text-align:left;">Un exemple ici !</div> | | center | Texte centré <div style="text-align:center;">Un exemple ici !</div> | | right | Texte aligné à droite <div style="text-align:right;">Un exemple ici !</div> | | justify | Texte justifié <div style="text-align:justify;">Un exemple ici !</div> |
|
| vertical-align / exemple : vertical-align:top; |
|---|
Modifie l'alignement vertical du texte| Valeurs : | Résultat dans le navigateur : |
|---|
| top | Texte aligné en haut | | middle | Texte centré verticalement | | bottom | Texte aligné en bas | | | <table border="1"><tr>
<td height="40" style="vertical-align:top;">A</td>
<td height="50" style="vertical-align:middle;">A</td>
<td height="50" style="vertical-align:bottom;">C</td>
</tr></table> |
|
| list-style / exemple : list-style:square; |
|---|
Modifie l'aspect d'une puce. Utilisé pour les balises ul, ol et li.| Valeurs : | Résultat dans le navigateur : |
|---|
| circle | Puce ronde filaire | | disc | Puce ronde et pleine | | square | Puce carrée | | decimal | Puce numérique | | decimal-leading-zero | Puce numérique avec un 0 avant les chiffres inférieur à zéro. | | upper-alpha | Puce alphabétique en majuscules | | upper-roman | Puce en caractère romain en majuscules | | none | Masque la puce | | ... | | | | <ul>
<li style="list-style:circle;">Item</li>
<li style="list-style:disc;">Item</li>
<li style="list-style:square;">Item</li>
<li style="list-style:decimal;">Item</li>
<li style="list-style:decimal-leading-zero;">Item</li>
<li style="list-style:upper-roman;">Item</li>
<li style="list-style:upper-alpha;">Item</li>
<li style="list-style:none;">Item</li>
</ul>
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
|
|
