Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Formatage de texte

Formatage de texte

On va reprendre le cycle des propriétés CSS de formatage de texte. Dans ce chapitre on va se contenter d'apprendre les propriétés CSS : font-size, font-style, font-weight, font-variant, line-height et font.

css-1 font-size (taille de police)

Cette propriété permet de préciser la taille de la police, il y a différentes unités de mesure :

Vous trouverez dans cette image une fonte de 8 pixels, vous pouvez même l'identifier par vos yeux nus :

font-size

Voici des exemples :

En font-size les mentions négatives ne sont pas autorisées que ce soit pour les valeurs absolues (px, mm, cm, pt etc.) ou les valeurs relatives (em et %). D'autres propriétés tolèrent les valeurs négatives comme la propriété CSS margin (marge) qu'on va traiter dans un stade plus avancé dans les CSS.

Pensez à passer des valeurs relatives (en pourcentages ou en "em") au lieu de valeurs absolues (pixels, cm, mm etc.) pour donner aux lecteurs la possibilité d'agrandir la taille de la police par les deux navigateurs Internet Explorer 6 et 7 : menu Affichage (en anglais : View) > Taille du texte (Text size).

agrandir la police sous Internet Explorer grâce aux unités relatives em ou pourcentage de la propriété CSS font-size

L'agrandissement de la police n'est pas possible si la taille est précisée en valeur absolue (px, pt, mm, cm etc.), et ce pour les deux navigateurs de Microsoft (6 et 7). Mais les autres browsers tels que Firefox, Opera et Netscape. L'agrandissement de la police demeure possible même si une taille absolue a été spécifiée.

Vous devez faire attention lorsque vous utilisez des valeurs relatives em ou %, car elles sont calculées par rapport à l'élément parent. Du coup, il faut faire gaffe, car ce n'est pas vraiment la taille initiale que vous agrandissez ou diminuez mais plutôt celle de l'élément parent. Ce qui peut conduire à des effets non escomptés.

Par exemple la balise <body> reçoit 14px, puis <div> 1.6em, enfin <p> 1.4 (p est imbriqué en div, lui même placé, bien entendu dans le corps ). La propriété CSS font-size qui sera appliquée au paragraphe est : 14 x 1.6 x 1.4 = 31.36 pixels en total Donc à utiliser avec méfiance. Surtout en cas d'imbrication de balises où la vilaine notion d'héritage CSS surgit

Pour une utilisation judicieuse des unités. Il faut les sélectionner en fonction du média de sortie. A titre d’exemple les pixels sont plus souhaités pour les écrans. Les points et les cadratins (em) sont adaptés pour la sortie imprimée.

css-1 font-style (style de police)

Le style de police désigne l'orientation ou si vous voulez le degré de déclinaison de la police. Les valeurs possibles sont : normal (police verticale, appelée aussi romaine), italic (ou oblique c'est la même chose du point de vue sortie visuelle) veut dire police penchée un petit peu en avant, mais la mention oblique n'est pas reconnue par toutes les familles de police, donc à éviter pour l'état actuel des choses. Exemple :

.italique {
font-style: italic;
}
.important {
font-style: oblique;
color: red;
}
em {
font-style: normal; /* je veux utiliser les balises em
pour mettre en évidence du texte, sans pour autant qu'il
soit mis en italique */
}

Pour corriger certains amalgames : la balise <em> ne sert pas à mettre en italique mais plutôt à mettre en évidence. Malheureusement la plupart des gens croient, à tort qu'elle est faite pour mettre en italique. Ceci peut être attribué au fait que la majorité des navigateurs mettent en italique le contenu de la balise em pour le distinguer du lot. la mention em veut dire emphase (emphasis).

La balise <strong> n'a pas aussi été épargnée par ce malentendu Les pauvres croient qu'elle est faite pour des raisons de mise en forme (mettre en gras). Or ce n'est pas le cas. En fait elle est aussi destinée pour des raisons de sémantique (mettre en évidence et marquer comme important). Le mot strong veut dire fort, ce qui correspond à une emphase plus soutenue que celle sollicitée par l'élément em.

Voir le chapitre : éléments de phrase : em et strong.

css-1 font-weight (graisse de la police)

La graisse de police correspond à l'épaisseur de la police. Voici les mentions permises :
Mentions alphabétiques : normal, bold, lighter et bolder.
Mentions numériques : 100, 200, 300, 400 (l'équivalent de normal), 500, 600, 700 (l'équivalent de gras : bold), 800, 900.

Les deux attributs bolder et lighter, qui signifient respectivement plus gras et plus fin, permettent de spécifier une graisse dont la valeur est relative à l'élément parent au même titre que les mentions relatives pour la propriété css font-size. Les enfants héritent de la graisse résultante et non de la valeur du mot-clé. Exemple :

p .gras {
font-weight: bolder;
}
P {
font-weight: normal /* ou 400 */
}    
h1 {
font-weight: 700 /* ou bold */
}

Bien que la plupart des navigateurs n'arrivent pas à reproduire les graisses d'une manière assez subtile. Celles-ci sont restituées le plus fidèlement possible lors de l'impression.

css-1 font-variant (la variante de police)

humm bref, Il y a deux mentions :

css-1 line-height (interligne)

Grâce à cette propriété vous pouvez spécifier l'interligne c'est-à-dire la hauteur ou l'écart séparant deux lignes successives. Si on veut appliquer à nos paragraphes une interligne de 20 pixels on a qu'à taper le code CSS suivant :

p {
line-height: 20px;
}

Vous pouvez regrouper les propriétés CSS font-size et line-height par la propriété générique font (voir la propriété suivante). Exemple :

p { 
font: 120%/12pt;

}

Dans cet exemple la police aura une taille supérieure à la normale de 20% et la hauteur de ligne sera de 12 points. Ceci dit que la valeur placée avant la barre oblique spécifie la taille de la police et la deuxième valeur désigne la hauteur de la ligne.

Les valeurs possibles sont : la mention "normal", un nombre, cm, em, in, mm, pc, px, pt, pourcentage "%". Les tailles relatives em et % sont calculées par rapport à la taille de police de l'élément lui-même. La valeur normale peut être intéressante pour annuler une interligne héritée d'un élément parent. Exemple :

<div style="line-height: 30px;">
<p>Le premier paragraphe a hérité une interligne
de 30 pixels<br />
de son parent div.</p>
<p style="line-height: normal;">Le second paragraphe
a retrouvé son interligne normale.<br />
Car la valeur "normal" a écrasé celle héritée.</p>
</div>

Le premier paragraphe a hérité une interligne de 30 pixels
de son parent div.

Le second paragraphe a retrouvé son interligne normale.
Car la valeur "normal" a écrasé celle héritée.

css-1 font (propriété générique)

Introduction à la propriété générique font

Il s'agit d'une méga-propriété qui regroupe toutes les propriétés qu'on vient de voir : font-family, font-size, font-style, font-weight, font-variant et line-height. On peut assimiler cette propriété à une sorte de raccourci. Exemple :

.Text {
font: bold small-caps 16px italic Arial, sans-serif;
}

Rien qu'avec cette propriété générique, on a précisé tous les aspects de nos fontes. Fastoche avouez-le

Pour éviter des conflits potentiels (problèmes d'interprétation) entre les propriétés CSS font-size et line-height, du fait qu'elles peuvent recevoir les mêmes unités (%, em, cs, mm, px etc.). On a prévu la syntaxe suivante : font-family/line-height. Exemple :

P {
font: large/1.2em serif;
}

Cette syntaxe correspond parfaitement à :

P {
font-family: serif;
font-size: large;
line-height: 1.2em;
}

Dans cet exemple la hauteur de ligne sera calculée par rapport à la taille de police de l'élément lui-même, puisque la propriété CSS line-height a été exprimée en valeur relative em.

Syntaxe des propriétés génériques

Voilà, ce chapitre touche à sa fin, mais pas pour le formatage de texte qui va vous poursuivre jusqu'à la fin de vos jours Tuto suivant : formatage de texte : propriété CSS color (couleur).

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau