CityDesk et Standards du Web - le wiki

Introduction Aux Feuilles De Style /
Typographie Css


BlocRésumé
Cette section fait partie du document IntroductionAuxFeuillesDeStyle. La typographie concerne tout ce qui a trait au design du texte. Parce qu'une bonne typographie est essentielle à rendre l'expérience utilisateur aussi facile et utile que possible, nous aborderons dans ce document une première introduction à la typographie web : contrôle des polices, contrôles de textes, fomatage des blocs de texte, spécification des propriétés, couleurs et type, boîtes en ligne, unités relatives, ...

Table des Matières
Polices de caractères   
Contrôle des Polices   
Couleur et typographie   
Contrôle des Blocs de Texte   
Le crénage : l'espace entre les lettres   
L'espace entre les mots   
Casse du texte   
Alignement Texte   
Indentation de paragraphes   
Influencer les sauts de ligne   
Espacer les Blocs de Texte   
Titres / En-Têtes   
Listes   
Boîtes en Ligne   
Formatage des Liens   
Indice et Exposant   
Unités Relatives   
Conclusion   

Polices de caractères    

Un style de caractère est une collection de caractères ayant des caractéristiques similaires. Pour le web il existe cinq styles :

Serif
Empattement placé à la fin de la lettre (Police comme le Palatino ou le TimesNewsRoman). Ces polices sont à privilégier pour leur lisibilité sur des textes de grande taille ou à l'impression de texte de petite taille en faisant ressortir les lettres par rapport à leurs voisines.
Sans-Serif
A l'inverse, ces polices n'ont pas d'empattement. Bien que les caractères soient moins distinctifs, les polices Sans-Serif sont plus adaptées à du texte de petite taille à l'écran. Exemples : Helvetica et Arial.
Polices à espacement fixe
A empattement ou non, toutes les lettres occupent le même espace. Elles sont appropriées pour du texte qui doit être lu avec précision comme du code. Exemple : Courrier-New
Cursive
Ces polices tentent d'imiter l'écriture manuelle généralement de façon très stylisée. Réservée à la décoration et non adaptées pour de longs textes (exemples : Zapf Chancery, Caflisch Script...)
Fantaisie
Toutes celles qui n'entrent dans aucune des catégories précédentes. La police sur IE5/Lac par défaut est le Comic Sans. Souvent ornementales ou dans le cas de la police Dingbats, elle peut servir à illustrer ou au dépôt d'icônes. Comme les polices cursives elles seront à réserver pour la décoration.

Contrôle des Polices    

CSS fournit de nombreux moyens pour définir le contrôle de vos polices de caractères. Les principales propriétés CSS font-family, font-size, font-weight et line-height seront responsables de l'aspect de votre texte. Par exemple, la règle CSS suivante établit que tous les paragraphes devraient être réglés en Arial 12pt avec un espace interligne de 15pt (voir les définitions des unités de mesures sur IntroductionAuxFeuillesDeStyle)

p
{
font-family: Arial;
font-size: 12pt;
font-weight: bold;
line-height: 15pt
}

Facile à comprendre non ? Nous nous épancherons plus bas sur une définition sommaire de ces propriétés. D'autres propriétés de contrôle comme font-style déterminent si votre texte est en italique ou non et les contrôles obtenus par text-decoration stipulent si le texte doit être ou non souligné.

p
{
font-family: Arial;
font-size: 12pt;
font-weight: bold;
line-height: 15pt;
font-style: italic;
text-decoration: underline;
}

Regardons en détail et rapidement quelques-unes de ces propriétés :

font-family
Spécifie quelle police ou famille de police à utiliser par le navigateur. Il est recommandé de déclarer une famille générique après les polices pour obliger le navigateur si la police n'est pas trouvée à lui substituer une police similaire. (ex : p {font-family:Arial, Helvetica, sans-serif; }
font-size
Définit la taille de la police. Peut être définie en points, pourcentage, taille absolue ou relative. Les débats sont vifs sur les unités à utiliser. Certains sont pour l'utilisation du pixel (px), d'autres pour l'em et tous les designers s'accordent pour bannir l'utilisation du point.
font-style
Définit le style de police à utiliser à savoir italique, oblique ou normal. Les valeurs possibles sont donc 'normal, italic ou oblique.
text-decoration
Permet de décorer le texte par exemple avec des soulignements. Il accepte les valeurs suivantes : none, underline, overline, blink et line-through (rien, souligné, surligné, clignotant et barré).
font
Sa déclaration est très simple elle peut prendre les valeurs de font-style, font-variant, et font-weight.
line-height
Définit l'espace interligne ou la hauteur intrinsèque de tout élément non remplacé. L'une des plus grandes contributions CSS à la typographie. Une bonne règle pour le texte dans la body est de régler l'espace interligne à 1.5 fois la taille de la police. En général cela fonctionne plutôt très bien.
font-variant
Peut prendre deux valeurs : normal (passe outre à toutes les autres valeurs héritées) ou smallcaps (petites majuscules). Il est préférable de réserver les petites majuscules aux titres ou aux textes spéciaux. Les petites capitales sont difficiles à lire dans les textes de petite taille.
font-weight
normal, bold, bolder, lighter ou valeurs numériques. Normal, gras, plus gras, Utilisez-là pour accentuer un texte.

Pour finir et économiser des lignes de code, vous pouvez définir plusieurs attributs de police dans une même règle en utilisant la propriété font. Un format très simple pour envoyer vos spécifications sur une seule déclaration. Vous pouvez définir sur la même ligne :
  • font-style
  • font-variant
  • font-weight
Et c'est souvent le meilleur moyen de régler les valeurs à normal. L'ordre des valeurs n'importe pas. Si vous voulez déclarer une hauteur de ligne (line-height) explicite,, vous pouvez faire suivre la valeur de font-size d'un slash ("/") de la valeur de line-height.

h1 {
font: bold italic small-caps 2.5e.m Georgia,"Times New Roman",Times,serif;
}
body
{
font:10/20px, Arial, Helvetica,sans-serif;
}

Couleur et typographie    

La couleur doit être approchée avec précaution. Il est très facile de produire du texte impossible à lire en minimisant le contraste de la police avec la couleur de fond. Pour définir la couleur, la propriété est color comme l'on pourrait s'y attendre.

Quelques précisions sur les valeurs ont été données sur IntroductionAuxFeuillesDeStyle#Couleurs. L'arrière-plan de n'importe quel bloc (pour un élément de bloc) ou la partie d'une ligne est réglée avec la propriété background-color. (Vous pouvez aussi spécifier la couleur dans une simple propriété background qui pourra aussi inclure une image d'arrière-plan).

Le rôle de la couleur dans la typographie est de différencier les éléments (les titres des textes, etc.). Différencier les éléments de texte est principalement un exercice de créations de contrastes entre la chose qui doit être différenciée de son environnement. Ceci signifie l'arrière-plan tout aussi bien que le texte environnant. Le noir et le rouge ont fonctionné traditionnellement de pair dans l'édition imprimée, parce que ces deux couleurs sont fortes et contrastent avec le blanc.

Dans un texte continu, le contraste reste le facteur critique.

Contrôle des Blocs de Texte    

Le crénage : l'espace entre les lettres    

crénage
Définit l'espacement entre les lettres d'un mot. Augmenter le crénage améliore la lisibilité d'un texte.
Mais un excès de crénage entrave la lecture en atténuant la distinction des mots sur la page. Sa définition se fait par la propriété letter-spacing suivie de deux points. Vous pouvez lui attribuer une valeur de longueur définissant l'espace absolu entre les lettres ou la valeur normal. La valeur peut être positive ou négative (pour rapprocher les lettres). Une valeur de 0 n'ajoute ni ne supprime d'espace mais empêche la justification.

p {letter-spacing: 2em;}

L'espace entre les mots    

Ajouter un peu d'espace entre les mots améliore la lisibilité. Utilisez la propriété word-spacing suivi de 2 points et d'une unité de longueur. Une valeur de 0 n'ajoute ni ne supprime d'espace mais empêche la justification.

Valeurs : normal ou unité de longueur

.title {word-spacing: 8px;}

Casse du texte    

La propriété text-transform contrôle la casse finale du texte. Les valeurs possibles sont :

  • capitalize : met la première lettre de chaque mot en capitale
  • uppercase : met toutes les lettres en capitales
  • lowercase : met toutes les lettres en bas de casse
  • none : passe outre les valeurs de casse et laisse le texte en l'état.
h1 {text-transform: capitalize;}
.nom {text-transform: uppercase; font:bold;}

Rendu HTML :

<p class="name">le lapin</p> 

affichera

Le Lapin

Alignement Texte    

La propriété text-align contrôle l'alignement et la justification du texte. Les valeurs sont :

  • left : aligne le texte sur la marge de gauche
  • right : aligne le texte sur la marge de droite
  • center : centre le texte dans la zone
  • justify : aligne le texte sur les marges gauche et droite
La propriété vertical-align contrôle l'alignement vertical de la ligne de base d'un élément en fonction de la valeur de line-height. Cette propriété permet de spécifier la position des éléments en ligne par rapport au texte situé au-dessus ou en-dessous. Les valeurs sont :
  • super : le texte est en exposant au-dessus de la ligne de base
  • sub : le texte est en indice en-dessous de la ligne de base
  • baseline : état normal, le texte est sur la ligne de base
  • top : aligne l'élément sur le haut de l'élément le plus élevé de la ligne
  • text-top : aligne sur le haut du texte de l'élément parent
  • middle : aligne au centre de l'élément parent
  • bottom : aligne sur le bas de l'élément le plus bas de la ligne
  • text-bottom : aligne sur le bas du texte de l'élément parent
  • % : augmente ou réduit la ligne de base de l'élément proportionnellement à la taille de la police de son élément parent

Indentation de paragraphes    

L'indentation d'un paragraphe consiste à décaler de plusieurs espaces (habituellement cinq) le premier mot d'un paragraphe. La propriété text-indent permet d'ajouter des espaces supplémentaires au début de la première ligne de texte. Elle se définit par une valeur en longueur ou un % qui indentera le texte proportionnellement à la valeur du paragraphe.

#article p {text-indent:10%;}

Influencer les sauts de ligne    

Pour forcer un saut de ligne, vous disposez de la balise HTML
dont ne nous parlerons pas ici... La propriété CSS white-space (valeurs : normal, pre et nowrap ) contrôle comment le navigateur grère les espaces blancs (espaces, tabulations, retours) dans le code. Par défaut réglée à normal fait que le navigateur ignore les espaces et les autres caractères blancs dns le texte : si vous avez plusieurs retours dans le code de ce qui devrait une ligne simple, le navigateur ne les reconnaîtra pas et affichera une ligne unique.

Les valeurs pre et nowrap feront que le navigateur respectera les espaces blancs dans votre code et ne cassera jamais le texte d'un élément particulier en lignes :

Voyons cela sur un exemple ...

body {font:1em/1.5em, Georgia, serif;}
h1 {font:bold 12px/1.5em Georgia, serif;}
p{white-space:normal;margin:0;}
div.pre p{white-space:normal; margin:0;}
div.nowrap p {white-space:nowrap;}

Cliquez ici pour voir un exemple. Attention l'effet pre pourrait ne pas fonctionner avec un navigateur non standard comme Internet Explorer. Profitez-en pour télécharger l'excellent MozillaFirefox ! En somme souvenez-vous qu'un réglage comme white-space: no-wrap vous donnera une seule ligne même dans un navigateur non standard.

Espacer les Blocs de Texte    

Dans du texte continu, là où il y a beaucoup de texte dans un flux (un article par exemple), vous devez vous assurer que lecteur puisse aisément repérer les paragraphes tout en veillant à ne pas les séparer de façon à ce qu'ils puissent être perçus comme indépendants les uns des autres. Il existe deux approches pour travailler avec les paragraphes :

  • l'indentation
  • l'ajout d'espace vertical
Il est courant notamment en imprimerie d'indenter (décaler de plusieurs caractères - traditionnellement cinq) la première ligne d'un paragraphe sans ajouter d'espace entre les paragraphes. Le premier paragraphe dans une séquence est néanmoins et normalement non indenté. L'intendation est une norme dans la typographie pour les livres ; une bonne indentation est habituellement autour d'un espace ligne - la valeur line-height. Cependant, vous pourriez avoir besoin de varie cela si votre espace interligne est différent. Si vous choisissez d'ajouter un espace vertical, alors il est courant de ne pas indenter les premières lignes des paragraphes.

CSS :

body {
font-size: 12px;
}
h1 {
font: bold 1em/1.5em Georgia, serif;
margin: 0;
padding: 0;
}
div {
margin: 2em 0 0 5em;
width: 33em;
font: 1em/1.5em Georgia, serif;
}
div.espace p {
margin: 0.5em 0 0 0;
padding: 0;
}
div.space p.premier {
margin: 0;
}
div.indent p {
margin: 0;
padding: 0;
text-indent: 1.5em;
}

div.indent p.premier {
text-ident: 0;
}

XHTML

<div class="espace">
 <h1>Paragraphes séparés par des espaces</h1>
 <p class="premier">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit
 lobortis nisl ut aliquip ex ea  commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse 
 molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
 qui blandit praesent luptatum zzril delenit augue duis dolore te 
 feugait nulla facilisi. </p>
 <p>La Langue Française conquiert la Wikisphère. consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
 ut laoreet dolore  magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper 
 suscipit lobortis nisl ut aliquip ex ea  commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate 
 velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
 odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>

<div class="indent">
 <h1>Paragraphes séparés par indentation</h1>
 <p class="premier">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit
 lobortis nisl ut aliquip ex ea  commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse 
 molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
 qui blandit praesent luptatum zzril delenit augue duis dolore te 
 feugait nulla facilisi. </p>
 <p>La Langue Française conquiert la Wikisphère. consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
 ut laoreet dolore  magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper 
 suscipit lobortis nisl ut aliquip ex ea  commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate 
 velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
 odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>

Voir le résultat dans une nouvelle fenêtre de votre navigateur

L'autre variable essentielle à considérer est la justification (ou l'alignement) du texte : s'il est ferré à gauche, à droite, centré ou justifié. Dans un réglage à gauche, le bord gauche de la colonne de gauche est droit et le bord droit est chahuté. Le processus est le même à droite. Le centrage de toutes les lignes d'une colonne laissent les bords non alignés. La justification sert à aligner à la fois les côtés droit et gauche. Mais attention à la justification qui peut réserver des surprises. Beaucoup de personnes considèrent la justification très pertinente pour l'impression. Cependant pour le web la justification est moins pertinente : elle oblige le navigateur à indroduire des espaces blancs entre les mots et souvent trop d'espace ce qui rend la lisibilité difficile.

Les propriétés CSS pour l'indentation de texte et la justification sont text-indent et text-align. La propriété text-indent a besoin simplement d'une valeur de longueur et la propriété text-align l'une des 4 valeurs left, right,center ou justify. Si vous désirez utiliser l'indentation, n'oubliez pas d'outrepasser les marges par défaut sur <p>. Regardez attentivement le code détaillé ci-dessus.

A propos de l'espacement entre les paragraphes : Il doit être supérieur à l'espace entre deux lignes. Tout dépend de la taille de votre texte. A vous d'essayer avec une valeur d'environ le quart ou la moitié de la hauteur de ligne line-height et modifiez-le selon vos goûts. Avec un espace interligne d'1.5em, le fait de travailler par des incrémentations de 0.25em est un bon moyen de trouver ce qui fonctionne. Expérimentez sur plusieurs paragraphes comportant plusieurs lignes. Essayez par exemple avec une croissance d'une sixième de ligne à chaque fois sur un même document.

Rappelons-nous que séparer des blocs avec des espaces est que les paragraphes et en-têtes (titres) sont simplement des éléments de blocs dans la CSS et suivent le modèle de boîte (Voir ModèlesDeBoîtes).

Dans l'exemple précédent, nous avons vu que l'espace entre le premier paragraphe et l'en-tête a été supprimé parce qu'il était visuellement intéressant de raccrocher le titre au paragraphe qui le suivait.

div.espace p {
margin: 0.5em 0 0 0;
padding: 0;
}
div.space p.premier {
margin: 0;
}

Mais vous pouvez rencontrer d'autres situations où vous désirez ajuster l'espace entre deux éléments de texte. Une des principales occasions est quand un en-tête est suivi immédiatement d'un autre en-tête comme un sous-titre. Regardons sur un exemple avec ce code. Vous pouvez visualiser le rendu dans une nouvelle fenêtre

CSS :

body {
font: 12px/1.5em Georgia, serif;
}

h1 {
font: bold 1.25em/1.5em Georgia, serif;
margin: 0.8em 0 0 0;
}

h2 {
font: bold 1em/1.5em Georgia, serif;
margin: 0.75em 0 0 0;
}

p {
margin: 0 0 0.75em 0;
width: 33em;
}

h2.post-h1 {
margin: 0.25em 0 0 0;
}

le XHTML

<body>
 <h1>Titre Très Important</h1>
 <p>Lorem ipsum ...t </p>
 <h1>Titre moins important</h1>
 <h2>Immédiatement suivi d'un autre titre</h2>
 <p>Lorem ipsum ...t </p>
 <h1>Un Autre Titre Très Important</h1>
 <h2 class="post-h1">Immédiatement suivi d'un autre titre</h2>
 <p>Lorem ipsum ...t </p>
</body>

Vous pourriez en voyant le rendu être tenté d'ajouter un peu d'espace au-dessus d'un paragraphe et un peu d'espace en-dessous jusqu'à ce que les choses rendent bien. Les webdesigners recommandent plutôt de choisir de mettre de l'espace supplémentaire au-dessus d'un bloc plutôt qu'en-dessous.

Titres / En-Têtes    

Essentiels dans la production de votre contenu XHTML, ils facilitent la lecture et la compréhension de la navigation. Faciles à structurer dans le code XHTML, CSS offre la production d'une plus grande clarté dans la navigation s'intégrant harmonieusement avec les autres éléments de votre conception. Vous pouvez les travailler avec maintes variables type, taille, poids, espace et couleur. Ils ont un rôle vital en faisant que le contenu soit facile à naviguer et comprendre.

OwenBriggs recommande de ne pas mettre les titres en gras, ni de leur affecter à tous différentes tailles. Voyons quelques exemples fondés sur le code XHTML suivant :

XHTML:

<body>
<h1>Le titre le plus important</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat.</p>
<h2>Un titre moins important</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat.</p>
</body>

CSS:

body {
  font: 12px/1.5em Georgia, serif;
  }

h1 {
  font: bold 1em/1.5em Georgia, serif;
  margin: 1.25em 0 0 0;
  }
h2 {
  font: italic 1em/1.5em Georgia, serif;
  margin: 1.25em 0 0 0;
  }
  
p{
  margin: 0;
  width: 33em;
}

Voir le résultat dans une nouvelle fenêtre

Observons désormais le même document XHTML en augmentant la valeur de la taille de la police des titres à 1.5em et diminuant l'interlignage à 1em. La police des titres est modifiée en sans-serif

La feuille CSS :

body {
  font: 12px/1.5em Georgia, serif;
  }

h1 {
  font: bold 1.5em/1em Verdana, sans-serif;
  margin: 1.25em 0 0 0;
  }
h2 {
  font: 1.5em/1em Verdana, sans-serif;
  margin: 1.25em 0 0 0;
  }
  
p{
  margin: 0;
  width: 33em;
}

Voir le résultat dans une nouvelle fenêtre

Même exercice que précédemment mais en réduisant à 1.2em la valeur des titres au lieu de 1.5em. L'interlignage est ramené à 1.25em.

La feuille CSS :

body {
  font: 12px/1.5em Georgia, serif;
  }

h1 {
  font: bold 1.2em/1.25em Verdana, sans-serif;
  margin: 1.25em 0 0 0;
  }
h2 {
  font: 1.2em/1.25em Verdana, sans-serif;
  margin: 1.25em 0 0 0;
  }
  
p{
  margin: 0;
  width: 33em;
}

Voir le résultat dans une nouvelle fenêtre. Presque identique à l'exemple précédent, exception faite que cette police des titres réglée à 1.2em. Le second titre se confond avec le paragraphe...

Poursuivons donc avec un exemple en accuentant de nouveau la différente de taille entre h1 réglé à 1.5em, la police de h1 en sérif et la police du paragraphe à 12px. La marge du bas de h1 est augmentée à 0.25em. Vous pourriez constater que h1 n'a plus besoin d'être graissé (bold) :

body {
  font: 12px/1.5em Georgia, serif;
  }

h1 {
  font: 1.5em/1em Georgia, serif;
  margin: 1.25em 0 0.25em 0;
  }
  
p{
  margin: 0;
  width: 33em;
}

Voir le résultat dans une nouvelle fenêtre.

Pour finir, diminuons la taille de la fonte h1 à 1em, augmentons l'interlignage, la police est déclarée en italic et la marge du bas remise à zéro. Affectons au paragraphe une marge à partir de la gauche de 1em pour faire ressortir le titre. Cet exemple de décalage a l'avantage d'être très facile à paramétrer dans la feuille de style tout en valorisant bien les titres placés en italique. Voir le résultat dans une nouvelle fenêtre.

body {
  font: 12px/1.5em Georgia, serif;
  }

h1 {
  font: italic 1em/1.5em Georgia, serif;
  margin: 0.75em 0 0 0;
  }
  
p{
  margin: 0 0 0 1em
  width: 33em;
}

Listes    

Une liste est conçue initialement pour présenter une collection d'items. Le formatage des listes peut se montrer complexe en décision de conception CSS. Comment séparer les items, aspect visuel de la liste et comment différencier la liste de son environnement. Il existe deux types de listes en XHTML :

  • les listes à puces <ul>
  • les listes ordonnées (numéros ou autres types de classification) <ol>
Les propriétés CSS qui s'appliquent aux listes sont nombreuses (voir lien référence du W3C :
  • list-style-type : définit l'apparence d'une liste numérotée ou non à savoir cercle plein, cercle vide, carré, nombres décimaux...
  • list-style-position : définit l'alignement du texte par rapport à la puce d'une liste numérotée ou non. (valeurs : outside ou inside)
Différents exemples sont présentés par OwenBriggs. Testez-les dans votre éditeur et ouvrez-les sur différents navigateurs : N'hésitez pas à utiliser un sélecteur contextuel comme ul li dans votre CSS pour avoir un contrôle plus spécifique sur vos listes. Et lisez la page Domptage de Listes en cours de traduction.

Lire aussi

Boîtes en Ligne    

Une fois spécifiée la structure par les <div>s (voir ModèlesDeBoîtes), les boîtes en ligne sont une autre grande spécificité des CSS. Un même paragraphe pourra contenir probablement plusieurs boîtes en ligne. Si votre paragraphe n'a pas d'éléments en ligne à l'intérieur, mais s'il dispose par exemple de plusieurs balises comme <strong>, <em>, des marques d'hyperliens a, des images img, des citations q, des span, etc... alors il dispose de plusieurs boîtes en ligne.

Lire aussi : Article OpenWeb

Formatage des Liens    

Les liens sont la spécificité de l'écriture web. Initialement Tim Berners Lee, l'inventeur du Web, pensait que les liens devaient être soulignés en bleu. Parce que par défaut la couleur d'un lien change selon l'état du lien mais pas le soulignement, il est recommandé de conservé le soulignement pour le lien.

Il existe 4 états du liens :

  • le lien actif active
  • le lien visité visited
  • le lien survolé hover
L'élément utilisé poru mentionner un lien est la balise <a>. La première chose à garder en tête est que cette balise peut fournir plus qu'un lien : elle peut aussi agir comme une ancre pour les liens. CSS fait la distinction et sait fournir plusieurs pseudo-classes pour y accéder. Traditionnellement les <a>s utilisés en tant qu'ancres n'avait pas d'effet graphique sur le contenu. Si vous choisissez d'orner la balise <a> par un style vous pourriez découvrir quelques effets inattendus. Les 4 états d'un lien sont accédés en CSS par l'utilisation des pseudo-classes : link, visited, active et hover

Chaque état peu avoir un traitement typographique différent. Vous avez besoin de vous souvenir que la cascade détermine quels sélecteurs jouent sur les éléments. Et que plus un item est bas dans la feuille de style, plus il est prioritaire. Aussi, il est d'usage de placer a:hover après a:visited comme dans l'exemple suivant :

a:link {
 color: rgb(210,0,0);
 text-decoration: none;
 }

a:visited {
 color: rgb(175,0,0);
 }

a:hover {
 text-decoration: underline;
 }

Pour en savoir plus : lire Pseudo-classe des ancres CSS1 Référence W3C

Indice et Exposant    

La propriété vertical-align définit l'alignement vertical des éléments les uns par rapport aux autres. Les valeurs possibles sont :

  • baseline - valeur par défaut. Aligne la base line de l'élément en ligne avec la principale baseline
  • middle - alignement vertical au centre
  • sub - alignement en indice tel que pensé par le navigateur
  • super - déplace l'élément de la baseline vers la position pensée par le navigateur pour être un exposant
Observez cet exemple dans une nouvelle fenêtre de votre navigateur.

Unités Relatives    

Description des relations entre les éléments. Spécifier les tailles et positions des éléments pour le rendu de la page devient souvent un exercice d'établissement de relations virtuelles entre des éléments. Nous verrons dans cette partie comment l'utilisation des unités relatives et l'utilisation de l'héritage permet de préserver les relations et à fortiori une cohérence dans la structure du document.

Prenons un exemple simple...

'CSS :

body {font-size: 12px; }
p {font-size: 1em; }
h1 {font-size: 1.5em }

XHTML :

<h1>Un Titre</h1>
<p>Ici le corps du texte</p>

Voir le résultat...Parce que l'en-tête et le paragraphe partagent le même parent, ils partagent automatiquement la même [[mark]font-size} de base héritée de body. Parce que leurs propres propriétés de [[mark]font-size} sont réglés en unités ems, ils seront toujours directement proportionnels. Les unités em (unité relative à la hauteur d'une police donnée) sont calculées ave le respect de l'élément font-size. Les choses peuvent devenir plus compliquées sur ce point : seul le font-size d'un élément est calculé avec le respect de son parent. Toutes les autres propriétés des éléments (telles que les marges, le padding, la hauteur de ligne, etc.) sont calculées avec le respect du font-size de cet élément. Ce qui signifie et nous le verrons dans l'exemple suivant que les marges de chaque élément ne seront pas les mêmes :

'CSS :

p {font-size: 1em; 
   margin: 0 0 0 2em;
   }
h1 {font-size: 1.5em;
    margin: 0 0 0 2em;
    }

XHTML :

<div>
<h1>Un Titre</h1>
<p>Ici le corps du texte</p>
</div>

Voir le résultat qui n'est sans doute pas celui que vous attendiez ? La solution dans ce cas sera de penser prudemment à ce que vous voulez faire visuellement. Puis vous assurer que votre balisage soit de qualité. Nettoyer le balisage est souvent vital pour utiliser les unités relatives à leur plein régime. Dans l'exemple vue ci-dessus, le moyen le plus simple sera d'éviter d'utiliser les marges sur les éléments paragraphe et titre pour à la place utiliser les marges ou une zone de remplissage (padding) sur leur parent commun. Faire bon usage des unités relatives requiert plus de discipline que de simplement spécifier des unités absolues.

'CSS :


div {
  padding: 0 0 0 2em;
  }
p {font-size: 1em; 
    }
h1 {font-size: 1.5em;
    }

XHTML :

<div>
<h1>Un Titre</h1>
<p>Ici le corps du texte</p>
</div>

Voir le résultat.

Cette section se termine avec un rappel de quelques simples points-clés pour bien utiliser les ems :

  • Prenez un élément comme base pour vos relations visuelles inter-éléments. Assignez-lui une règle de telle façon que cet élément ait une font-size de 1em. Normalement, ce devrait être le corps ou le contenu de votre texte.
  • Utilisez des unités arrondies. 0.658em pourrait poser des problèmes d'exactitude sur les plates-formes.
  • Faites un bon usage des éléments parent et de l'héritage pour le formatage visuel de vos éléments de texte.
  • Faites un plan, affinez et surtout expérimentez !

Conclusion    

Le texte est l'étayage du web : les personnes lisent le web. Une bonne typographie est essentielle pour rendre l'expérience utilisateur aussi facile et utile que possible. La typographie n'a pas forcément besoin d'être flashy, mais elle doit plutôt rendre les choses claires : information, structure et sens. Grâce aux CSS, les outils à la disposition du typographe web sont les mêmes que ceux utilisés par le typographe en imprimerie.

L'IntroductionAuxFeuillesDeStyle est désormais terminée. Entraînez-vous dans votre éditeur avant d'aborder les ModèlesDeBoîtes.

Merci de votre attention et n'hésitez pas à corriger ou compléter cette page.

 
© GPL 11 Août, 2004