title | chapitre | permalink |
---|---|---|
Style de texte |
CSS |
/cours/style-text.html |
Pour changer la taille d'un texte, on utiliser la propriété font-size
. Les
valeurs acceptés par cette propriété peuvent être :
- En pixels : détermine la hauteur en pixels de votre texte. Par exemple :
14px
,16px
...
p {
font-size: 14px;
}
h1 {
font-size: 24px;
}
- En pourcentage : spécifier la taille du texte relativement au taille normal. C'est à dire : 100% est le taille normale.
h2 {
font-size: 160%
}
h3 {
font-size: 140%;
}
- En mot clés : Les mots sont : xx-small, x-small, small, medium, large, x-large, xx-large.
h1 {
font-size: xx-large;
}
- En em : spécifie la largeur de la lettre "M" avec la police utilisée.
dt {
font-size: 1.2em;
}
- En rem : rem est beaucoup plus facile à utiliser comme unité qu'em car la taille du texte dépend de la taille initiale du texte, au lieu de dépendre de l'héritage d'un quelconque élément parent.
font-family
définit en effet une liste de polices dans lesquelles votre texte
peut apparaître. La valeur de cette propriété est une liste de polices séparées
par des virgules. Si le navigateur ne peut pas trouver la première police de la
liste, il passe alors à la suivante et l'applique au texte concerné. Si aucune
police de la liste ne fonctionne, alors le navigateur utilise sa propre police
par défaut. Ce peut-être serif, sans-serif ou monospace.
p {
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-family: "Times New Roman", Times, serif;
}
La propriété font-weight
définit l'épaisseur des caractères, généralement à
l'aide des valeurs normal ou bold. Voici un exemple :
strong {
font-weight: bold;
}
Les valeurs peuvent être des nombres de 100, 200 jusqu'à 900 dont 400 est un font d'épaisseur normal, 200 est la plus fine et 900 est la plus épaisse. Ou des mots clés absolues ("normal" pour 400, "bold" pour 700). Ou des mots clés relatifs à l'élément parent ("lighter" pour plus fine, "bolder" pour plus épaisse). Quelques fontes ne supportent que les épaisseurs "normal" et "bold".
La propriété font-style
détermine si le texte doit être affiché normalement,
en italique ou en oblique (penché) respectivement grâce à "normal", "italic",
et "oblique" :
i {
font-style: italic;
}
La propriété text-align contrôle l'alignement du texte, en définissant l'alignement à gauche, à droite, ou centré ou justifié ("left", "right", "center", ou "justify") :
h1 {
text-align: center;
}
.signature {
text-align: right;
}
La propriété text-transform
modifie la casse du texte (autrement dit, elle
permet d'afficher du texte en MAJUSCULES, minuscules ou en Capitales), comme le
montre cet exemple :
h1 {
text-transform: uppercase;
}
Les valeurs possibles sont "capitalize", "uppercase", "lowercase" ou "none".
La propriété text-decoration
permet de faire apparaitre une ligne en dessous
("underline"), au dessus ("overline"), ou à travers ("line-through") de votre
texte. La valeur par défaut "none" supprime tout formatage. Voici, par exemple,
comment barrer un texte en CSS :
del {
text-decoration: line-through;
}
a {
text-decoration: underline solid blue;
}
Cette propriété accepte optionnellement le style et la couleur de la ligne. Les valeurs du style de la ligne sont le même que les valeurs du style de bordure.
La propriété text-indent
permet de gérer l'indentation du texte. Elle accepte
des valeurs absolues (en px) et des valeurs relative (en % ou em). Une valeur
négative permet de décaler le texte vers le gauche.
p {
text-indent: 6em;
}
La propriété line-height
permet de gérer la distance entre les lignes. Elle
accepte des valeurs absolues (en px) ou relatives (sans unité).
La propriété letter-spacing
permet de gérer l'espace entre les lettres
tantdis que la propriété word-spacing
permet de gérer l'espace entre les mots
dans un texte.