Feuilles de style : polices et caractères

Noter ce cours :

Liens sponsorisés :

Les polices de caractères occupent une place prépondérante dans un site Web. Les CSS vous permettent de vous affranchir des obsolétes balises <font> et d'apporter des effets supplémentaires sur vos textes.

Choix de la police :

On utilise pour choisir une liste de polices à afficher la propriété font-family.

Exemple :

span{
font-family:Verdana,Arial,"Times New Roman",Helvetica;
}

<span>un texte en verdana, arial, times new roman ou helvetica</span>

Dans notre cas, si la police Verdana se trouve sur le PC de l'internaute le navigateur l'utilisera, sinon il ira jusqu'à la dernière police (en l'occurrence Helvetica) en passant par Arial et Times New Roman (qui est entre guillemets car elle comporte un espace).

Style de la police :

Pour souligner ou cadrer la police on utilise la propriété text-decoration.

Exemple (la police ne sera ni soulignée ni cadrée):

span{
text-decoration:none;
}

Exemple (la police sera soulignée) :

span{
text-decoration:underline;
}

Exemple (la police sera soulignée et possèdera une ligne au dessus):

span{
text-decoration:underline overline;
}

Exemple (la police sera barrée):

span{
text-decoration:line-through;
}

Exemple (la police clignote):

span{
text-decoration:blink;
}

<span>un texte</span>

On utilise ensuite la propriété font-style pour définir le style oblique, italique ou normal d'affichage.

Exemple (la police est en italique):

span{
font-style:italic;
}

Exemple (la police est inclinée vers la gauche):

span{
font-style:oblique;
}

Exemple (la police n'est pas inclinée):

span{
font-style:normal;
}

On utilise ensuite la propriété font-weight pour la mise en gras.

Exemple (la police est mise en gras léger):

span{
font-weight:lighter;
}

Exemple (la police s'affiche en gras):

span{
font-weight:bold;
}

Exemple (la police s'affiche en très gras):

span{
font-weight:bolder;
}

Exemple (la police s'affiche avec une épaisseur de 500):

span{
font-weight:500;
}

<span>un texte</span>

Taille de la police

La propriété font-size permet de définir la taille de la police.

Exemple (la police prend une taille de 7.5 pixels):

span{
font-size:7.5px;
}

Vous avez aimé cet article intitulé Feuilles de style : polices et caractères ? Partagez-le !
Vulgarisation-informatique.com
Cours en informatique & tutoriels