aide gratuite page perso Accueil  | Internet | Informatique | Créer sa page persoGlossaireMenu | CSS
www.aidenet.com

 

CSS
Feuilles de style
"letter-spacing"
espacement des caractères

Page - 07b  www.aidenet.com

 

Letter-spacing fixe espacement des lettres en css

Propriété "Letter-Spacing"

Cette propriété précise le comportement de l'espacement entre les caractères du texte. Les valeurs applicables sont : normal, longueur. Cette propriété "letter-spacing" bénéficie des règles d'héritage.

Valeurs applicables :

Normal : cette valeur par défaut correspond à l'espacement normal de la police utilisée.

Longueur : cette valeur indique la quantité d'espacement qui s'ajoute à l'interlettrage par défaut c'est-à-dire normal. Valeur numérique ou Valeur en pourcentage. Celle-ci peut être négative.

 

Code dans HEAD

<STYLE type="text/css">

body{ font-family: arial, verdana, sans-serif ; font-size: 10pt ; color: black ; background-color: #FFFFFF ; }

.espacement { letter-spacing : -1px ; }

.espacement1 { letter-spacing : 1px ; }

.espacement2 { letter-spacing : 3px ; }

h2 {
letter-spacing: 3mm ;
}
h6 {
font-family: georgia, arial, sans-serif ;
font-size: 3em ;
letter-spacing: 1cm ;
}

</STYLE>

 

Exemples

Voici une phrase utilisant l'espacement "letter-spacing : -1px".

Voici une phrase utilisant l'espacement de la police.

Voici une phrase utilisant l'espacement "letter-spacing : 1px".

Voici une phrase utilisant l'espacement "letter-spacing : 3px".

 


 

Code dans BODY

<h2 align="center"> &nbsp;Exemple </h2>

Avec espacement de 3mm entre les caractères suivant classe de HEAD..

 

Résultat exemple

Exemple



 

Code dans BODY

<h6 align="center"> &nbsp;Mod&egrave;le</h6>

 

Résultat exemple

Modèle

Le tag H6 pour "Modèle", avec un espacement de 1cm entre les caractères, plus le corps qui est spécifié à "font-size: 3em" ce qui remplace le corps de base de H6 qui est très petit. Intéressant de pouvoir utiliser ainsi H6 qui est rarement sollicité. A noter le changement de police "arial" en "georgia".

Sommaire CSS ... @ ... Word-spacing

 

 aide gratuite

Tous droits réservés © 1997- 2005. www. aidenet.com

 

validateur HTML  validateur CSS