Conception & Réalisation de sites Web

Mettre en forme un texte

Nous allons découvrir ici les principales propriétés de styles qui nous permettent de mettre en forme de manière complète nos textes.

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>

Mon texte ici
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>

Un exemple ici !
Times New Roman, Times, serif

Texte en Times new Roman

<div style="font-family:Times New Roman, Times, serif;">Un exemple ici !</div>

Un exemple ici !
Courier New, Courier, monospace

Texte en Courrier New

<div style="font-family:Courier New, Courier, monospace;">Un exemple ici !</div>

Un exemple ici !
Georgia, Times New Roman, Times, serif

Texte en Georgia

<div style="font-family:Georgia, Times New Roman, Times, serif;">Un exemple ici !</div>

Un exemple ici !
Verdana, Arial, Helvetica, sans-serif

Texte en Verdana

<div style="font-family:Verdana, Arial, Helvetica, sans-serif;">Un exemple ici !</div>

Un exemple ici !
Geneva, Arial, Helvetica, sans-serif

Texte en Georgia

<div style="font-family:Geneva, Arial, Helvetica, sans-serif;">Un exemple ici !</div>

Un exemple ici !
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>

Mon texte ici
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>

Un exemple ici !
italic

Texte en italique

<div style="font-style:italic;">Un exemple ici !</div>

Un exemple ici !
normal

Texte normal (droit)

<div style="font-style:normal;">Un exemple ici !</div>

Un exemple ici !
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>

Un exemple ici !
normal

Texte normal (non-gras)

<div style="font-weight:normal;">Un exemple ici !</div>

Un exemple ici !
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>

Mon texte ici
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>

Un exemple ici !
line-through

Texte barré

<div style="text-decoration:line-through;">Un exemple ici !</div>

Un exemple ici !
blink

Texte clignotant

<div style="text-decoration:blink;">Un exemple ici !</div>

Un exemple ici !
none

Texte normal (non souligné, non barré, non clignotant)

<div style="text-decoration:none;">Un exemple ici !</div>

Un exemple ici !
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>

Un exemple ici !
lowercase

Texte en lettres minuscules

<div style="text-transform:lowercase;">Un exemple ici !</div>

Un exemple ici !
capitalize

Texte avec la première lettre de chaque en majuscule.

<div style="text-transform:capitalize;">Un exemple ici !</div>

Un exemple ici !
none

Texte normal (non changé)

<div style="text-transform:none;">Un exemple ici !</div>

Un exemple ici !
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>

Un exemple ici !
center

Texte centré

<div style="text-align:center;">Un exemple ici !</div>

Un exemple ici !
right

Texte aligné à droite

<div style="text-align:right;">Un exemple ici !</div>

Un exemple ici !
justify

Texte justifié

<div style="text-align:justify;">Un exemple ici !</div>

Un exemple ici !
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>

A A C
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
Copyright © 2017 Erwan DUPEUX MAIRE - Tous droits réservés.
Valid XHTML 1.0 Transitional Valid CSS!