Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Propriétés CSS de formatage et de mise en forme du texte

Propriétés CSS de formatage et de mise en forme du texte

Enfin ! On est arrivé au bout des chapitres consacrés au formatage de texte. Ouf ça m'a coûté à peu près une semaine de rédaction. Trêve de bavardage, passons au vif du sujet. Dans le présent chapitre on va attaquer les propriétés CSS de formatage de texte : text-decoration, text-transform, font-variant, text-shadow et font-stretch.

css-1 text-decoration

La propriété CSS text-decoration permet d'apporter quelques enrichissements au texte (soulignements, clignotements etc.). Elle reconnait cinq notations :

Notez que La couleur des barres d'enrichissement est puisée de la valeur de la propriété CSS color (couleur de la police).

Bien que la propriété CSS text-decoration ne soit pas héritable. Les enrichissements décoratifs appliqués à un élément seront automatiquement transmis aux éléments enfants. A titre d'exemple, si un paragraphe est souligné, les éléments enfants imbriqués dans le paragraphe (em, strong, span) le seront également.

Une des applications judicieuses de la constante none, permet d'enlever les soulignements qui marquent par défaut les liens :

a {
text-decoration: none; /* les liens apparaîtront
sans le trait de soulignement par défaut. */
}

A moins que vous utilisez la constante none. Vous avez la possibilité de spécifier plusieurs styles décoratifs au même texte en les séparent par des espaces. Exemple :

h1 {
text-decoration: underline overline; /* texte souligné et doté
d'une ligne supérieure */
}

css-1 text-transform

La propriété CSS text-transform est d'un usage relativement faible. Elle permet de contrôler la casse du texte, ainsi il vous est possible de changer dynamiquement la casse d'origine du code source au chargement de la page. Notez que par défaut les navigateurs sont tenus de restituer fidèlement la casse d'origine. La propriété CSS text-transform reconnait quatre valeurs :

Code xhtml-CSS Aperçu
<span style="text-transform: none;">
PHRASE avec la valeur none.<span />
PHRASE avec la valeur none.
<span style="text-transform: lowercase;">
PHRASE avec la valeur lowercase.</span>
PHRASE avec la valeur lowercase.
<span style="text-transform: uppercase;">
PHRASE avec la valeur uppercase.</span>
PHRASE avec la valeur uppercase.
<span style="text-transform: capitalize;">
PHRASE avec la valeur capitalize.</span>
PHRASE avec la valeur capitalize.

Notez que cette propriété est destinée aux langues latines et romaines (espagnole, français, anglais, italien etc.). Ainsi cette propriété n'aura aucun effet sur les langues qui ne reconnaissent pas une double casse (minuscule/majuscule) comme l'arabe.

L'une des astuces que j'ai inventée tout seul comme un grand, et j'en suis d'ailleurs infiniment fier Consiste à appliquer le pseudo-element first-letter combiné à la propriété CSS text-transform avec la valeur capitalize aux en-têtes et paragraphes, pour mettre automatiquement la première lettre des éléments précités en majuscule.

Conventionnellement chaque paragraphe et titre doit débuter par une majuscule. L'astuce précitée va remplir un rôle de précaution. On sait jamais, car il y a de grandes chances à ce que vous oubliez d'entamer vos titres et paragraphes par des majuscules

css-1 font-variant

Hey ! Mais On a déjà traité cette propriété Oui je sais, mais je veux juste en reparler, car la situation l'exige. Bon, à titre de rappel, cette propriété permet aussi d'agir sur la casse. Elle accepte deux valeurs :

css-2 text-shadow

La propriété CSS text-shadow permet d'ajouter des effets d'ombre au texte. Shadow signifie en français ombre. La propriété de style text-shadow peut recevoir quatre valeurs :

Exemple complet avec les quatre valeurs :

h1 {
text-shadow: 1px 1px 1.5px red; /* ou bien : red 1px 1px 1.5px;
ombre de couleur rouge et un flou de rayon 1.5 pixels décalé 
d'un pixel à droite du texte et d'un pixel en-dessous du texte */ 
}
p {
text-shadow: blue -1px 2px; /* rappelez-vous que la mention du rayon
du flou est facultative, par conséquent elle peut être omise. 
cette fois l'ombre sera décalé d'un pixel à gauche du texte 
et de deux pixels en-dessous du texte */ 
}

Si vous n'avez pas signalé les coordonnées de l'ombre, le navigateur va le placer en bas à droite (réglage par défaut). Sachez aussi que vous pouvez utiliser les trois valeurs avec d'autres unités de mesure autre que px à savoir : cm (centimètres), mm (millimètres), in (inches : pouces), pc (picas), pt (points) et em (cadratins).

Avant de terminer je tiens à vous signaler une dernière chose : text-shadow peut être combinée au deux pseudo-elements : first-letter et first-line. Ne paniquez pas on va consacrer tout un chapitre aux pseudo-elements. Exemples :

p:first-line { /* seulement la 1ère ligne de chaque paragraphe recevra ces styles */ 
font-size: 1.2em;
color: red;
text-shadow: red 0px 0px 5px;
} 

h1:first-letter {/* seulement la 1ère lettre de chaque titre h1 recevra ces styles */
font-size: 36px;
color: green;
text-shadow: red 0px 0px 5px;
}

Malheureusement cette propriété qui fait partie de la version CSS 2.0 n'est pas encore implémentée par les navigateurs actuels : Firefox, Internet Explorer 6 et 7, Mozilla, Netscape, Opera et K-Meleon. Par contre cette propriété opère bel et bien sous Safari 3.1.1. Voici des sorties visuelles avec ce navigateur : la propriété text-shadow sous safari

J'aimerais bien mettre l'accent sur le dernier exemple. En fait si ça vous intéresse uniquement l'effet flou (blur). Vous pouvez mettre les deux valeurs de décalage à 0px, pour que l'ombre et le texte soient confondus. Enfin précisez un rayon de fondu, pour obtenir un effet très appréciable : un texte avec un contour flou.

css-2 font-stretch (l'étirement de police) font-stretch

Tout d'abord un peu d'anglais font-stretch "To stretch a muscle" veut dire en français étirer un muscle. Je parie que vous avez deviné à quoi sert cette propriété font-stretch Elle permet de mentionner l'étroitesse (l'étirement) de la police ou si vous voulez contracter ou étendre la largeur horizontale de la police. Voici les valeurs reconnues par la propriété CSS font-stretch :

Un petit exemple pour bien comprendre.

p {
font-stretch: wider;
}

La propriété CSS font-stretch n'est pas encore supportée par les navigateurs de la génération actuelle.

Voilà, c'est terminé avec le formatage du texte. Vous pouvez à présent créer de superbes effets avec tout le paquet de propriétés CSS que vous venez d'apprendre. Moi je vous ai filé la partie théorique, il ne vous reste plus qu'à faire exploser votre potentiel ainé en ce qui concerne le choix des couleurs et d'effet stylistes.

Dans le prochain chapitre on va apprendre à manipuler les sélecteurs de pseudo-classses pour les liens.

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

Cacher ce panneau