Les Fiches de MonWebFacile





Chapitre

Fiche

 

Fiche CSS : Les styles et la structuration de textes

Objet de la fiche

État de la fiche Terminée validée


Plan de la fiche

Avant propos

La forme, la taille, la couleur des caractères que l'on va utiliser pour constituer le contenu texte des pages HTML sont des points très importants pour l'esthétique finale de la page Web. Lorsque l'on veut afficher du texte sur un écran d'ordinateur on utilise des graphismes particuliers pour l'affichage des caractères. Ces graphismes lorsqu'ils présentent   les mêmes qualités typographiques et apparences constituent ce que l'on appelle couramment une police de caractères. Lors de la réalisation d'une page HTML, le concepteur va préciser quelle police sera utilisée pour l'affichage de la page Web. Mais ce que veux le concepteur n'est pas forcement ce que veut l'internaute qui consulte le site ou ce que peut faire son navigateur en terme d'affichage.

Domaines d'application

Avertissement

L'objet de cette fiche n'a rien à voir avec les balises en ligne de structuration de texte telles que <del>, <b> ou autres que nous avons vues dans une fiche précédente et dont un exemple est donné ci-dessous :.

Domaines d'application

Concerne les feuilles de style s'appliquant sur n'importe qu'elle balise pouvant contenir du texte comme par exemple la balise de paragraphe <p> ou les balises de type <div> ou <span> en se référençant directement aux balises (style="") ou par l'intermédiaire des classes ou identificateurs (script type="text/css">).

Rappel sur l'association Balises / Feuille de style css

Exemple appliqué à l'ensemble des balises <p>

Exemple appliqué à la classe d'une balise

Exemple appliqué à l'identificateur d'une balise

Exemple appliqué à une balise <span>


Style du texte

Généralités

Pour rédiger un document on a recours à une ou plusieurs polices de caractères et ce chapitre est certainement un des plus importants concernant la mise en forme du texte dans vos pages. Voici comment d'une part spécifier les polices telles que vous souhaitez les voir apparaître sur l'écran du visiteur, et d'autre part si le visiteur ne possède pas la police que vous avez choisie, voici comment lui substituer une autre police présélectionnée afin de conserver à votre page une présentation correcte.

Du point de vue syntaxe générale il s'agit des déclarations telles que nous les avons abordées dans la fiche feuilles de style appliquées à la propriété font.

<style type="text/css">
    classe ou sélecteur {font-family:famille}
    classe ou sélecteur {font-size:taille}
    classe ou sélecteur {font-stretch:chasse}
    classe ou sélecteur {font-style: style}
    classe ou sélecteur {font-variant:variante}
    classe ou sélecteur {font-weight:étirement}
</style>

Sous certaines conditions la spécification complète d'une police peut se faire avec le raccourci général "font"

<style type="text/css">
   
sélecteur ou classe{font:style variant weight size family}
</style>

Propriétés

Les propriétés <font-..>
Propriétés Descriptions Valeurs et tests
font-family Définit la police de caractère ou une police générique. Plusieurs polices peuvent être spécifiées, séparés par des espaces. Le navigateur utilisera la première dans la liste qui est disponible sur le poste de travail de l'utilisateur. nom de la famille
famille générique
On distingue communément les polices de caractères
  • avec empattements (en anglais serif) comme Times New Roman, Garamond, Georgia, New York, Times. Les caractères avec empattements sont souvent très bien adaptés à l'impression mais moins lisible à l'écran en petites tailles.
  • sans empattements (sans serif) comme Arial/Helvetica, Verdana, Trebuchet et leurs homologues sans serif (linéales)  qui conviennent mieux à l'affichage que les caractères avec empattements.
  • les polices de caractères de type cursif comme le Comic Sans.
  • les caractères monospace (Courrier New/Courrier) qui sont des polices à « chasse fixe » c'est à dire que l'espacement entre chaque caractère est constant.
  • les caractères fantaisie (Symbol, Webdings).
  • Pour un affichage optimal, et afin de tenir compte de l'hétérogénéité de l'équipement des internautes, il est recommandé de spécifier plusieurs polices de caractères et également une famille générique. Vous limiterez au maximum les problèmes d'affichage.
Note1: Si le nom d'une police contient un ou des espaces comme par exemple Time New Roman, il doit être coté.


Exemple  : font-family:arial,georgia,"times new roman",serif
Bonjour, comment allez vous?
   Style css => sélecteur ou classe{font-family:arial}
Propriétés Descriptions Valeurs et tests
font-size
Détermine la taille des caractères Valeurs pré-définies :
xx-small, x-small, small, medium
large, x-large, xx-large, smaller
larger
ou valeur en pixels, em, % ...
Bonjour, comment allez vous?
   Style css => sélecteur ou classe{font-size:normal}

Propriétés Descriptions Valeurs et tests
font-stretch Cette propriété de feuille de style css  permet de spécifier l'étirement de la fonte. Attention : la plupart des navigateurs ne supportent pas encore cette propriété. normal, wider, narrower, ultra-condensed, extra-condensed
condensed, semi-condensed
semi-expanded, expanded
extra-expanded, ultra-expanded
Bonjour, comment allez vous?
   Style css => sélecteur ou classe{font-stretch:normal}
font-style Détermine le style de la police. Il y a très peu de différence entre italic et oblique normal, italic (italique), oblique
Bonjour, comment allez vous?
   Style css => sélecteur ou classe{font-style:normal}
font-variant Affiche le texte en petites capitales normal, small-caps (petites capitales)
Bonjour, comment allez vous?
   Style css => sélecteur ou classe{font-style:normal}
font-weight
Détermine l'épaisseur du texte (graisse).

*Lighter et bolder ne sont pas réellement des graisses mais héritent les graisses relatives de leurs éléments parents.
normal, bold(gras), bolder(*), lighter(*)
100, 200, 300, 400, 500, 600, 700, 800, 900
Bonjour, comment allez vous?
   Style css => sélecteur ou classe{font-weight:normal}
font
La spécification complète d'une police peut se faire selon les caractéristiques ci contre qui permettent de la personnaliser avec le raccourci "font" . Il est fortement recommandé de respecter l'ordre des attributs pour obtenir un bon résultat.
sélecteur ou classe{font:style variant weight size family}
Ordre :
font-style
font-variant
font-weight
font-size
font-family

caption
icon
menu
message-box
small-caption
status-bar
Bonjour, comment allez vous?
   Style css => sélecteur ou classe{ font:italic normal bold 1.5em arial, georgia, "times new roman",serif}
Respectez les blancs entre attributs.

Structuration du texte


Généralités

Au delà du style, la structuration du texte est aussi un élément important de la présentation de la page Web, bien que, mis à part les attributs color, text-align et white-space, les attributs ci-dessous ne sont pas énormément utilisés. Il faut tout de même savoir qu'ils existent et qu'ils peuvent rendre des services.

Propriétés


Balises de Structuration de texte
Propriétés Descriptions Valeurs et tests
color Détermine la couleur du texte nom ou valeur de la couleur
Bonjour, comment allez vous?
   Style css => sélecteur ou classe{color:black}
direction Détermine la direction du texte. Associé à unicode-bidi. Pour un test pertinent la propriété direction est associée à la propriété unicode-bidi = bidi-override ltr (de gauche à droite)
rtl (de droite à gauche)
Bonjour, comment allez vous
   Style css => sélecteur ou classe{direction:ltr}
unicode-bidi Utilisé en conjonction avec la propriété direction, la propriété unicode-bidi définit l'orientation bidirectionnelle de l'écriture dans un élément au sein d'un document HTML. normal
embed (maintient l'ordre des caractères quelle que soit la valeur de la propriété direction.)
bidi-override (réécrit la chaîne de caractères en réordonnent la séquence de caractères en fonction de la propriété direction.)
line-height Détermine l'espacement entre les lignes normal, valeur utilisateur en pixels ou em,
% par rapport à la hauteur du conteneur.
Bonjour, comment allez vous ce soir et que faites vous demain ?
   Style css => sélecteur ou classe{LineHeight:normal}
letter-spacing Augmente ou diminue l'espacement des lettres normal ou valeur de taille
Bonjour, comment allez vous?
   Style css => sélecteur ou classe {letter-spacing:normal}
text-decoration Décorations du texte none (aucune),
underline (souligné),
overline (ligne au dessus),
line-through (texte barré),
blink(clignotant)
Bonjour, comment allez vous?
   Style css => sélecteur ou classe {text-decoration:none}
text-indent Indentation de la première ligne du texte Valeur du déplacement, % par rapport à la dimension du conteneur.
Bonjour, comment allez vous ce soir et que faites vous demain ?
   Style css => sélecteur ou classe {text-indent:0}
text-shadow Cette propriété de feuille de style css  permet de créer une ombre sous le texte. Attention : la plupart des navigateurs ne supportent pas encore cette propriété. Paramètres :
Couleur du texte de l'ombre
Coordonnées horizontales relatives du texte de l'ombre par rapport au texte principal.
Coordonnées verticales relatives du texte de l'ombre par rapport au texte principal.
Niveau ombrage.  0 signifie pas d'ombrage.
Bonjour, comment allez vous ?
   Style css => sélecteur ou classe {text-shadow: #6374AB 20px -12px 2px}
 
text-transform Contrôle des lettres none(non),
capitalize (Capitale en début de chaque mot),
uppercase (majuscule),
lowercase (minuscule)
Bonjour, comment allez vous?
   Style css => sélecteur ou classe {text-transform:none}
white-space Cette propriété de feuille de style css permet de spécifier le formatage de la source du texte contenu une balise HTML ou XHTML, c'est à dire comment votre navigateur va interpréter les espaces blancs..., passages à la ligne, pas de rupture de ligne , affiche le code (alinéas et tabulations, nombres espaces) comme il est écrit dans le fichier source html. Attention : ne fonctionne pas avec toutes les versions de navigateurs. normal
pre (affichage du texte tel qu'il a été écrit )
nowrap (ne fait pas de retour à la ligne)
Bonjour, comment allez vous? Que faites vous demain
   Style css => sélecteur ou classe {white-space:normal}
word-spacing Augmentation ou diminution des espaces entre les mots. normal, nombre d'espace
Bonjour, comment allez vous?
   Style css => sélecteur ou classe {word-spacing:normal}

Alignement horizontal du texte

La propriété de feuille de style css text-align permet de spécifier l'alignement horizontal du texte dans un conteneur. Cette propriété est applicable sur l'ensemble des balises HTML ou (X)HTML de type block ou inline (p, div, td, ...).

Syntaxe : text-align:valeur

Attributs de la propriété text-align
Attributs tests
left :alignement du texte gauche
center : alignement du texte au milieu

La libre communication ...

right : alignement du texte à droite
justify : alignement du texte à droite et à gauche

des pensées et des opinions est un des droits les plus précieux de l'homme .
Tout citoyen peut donc parler, écrire, imprimer librement, sauf à répondre de l'abus de cette liberté dans les cas déterminés par la loi.

inherit : hérite de la propriété du son parent(css2)  
Style css => sélecteur ou classe {text-align:left}

Alignement vertical du texte

La propriété de feuille de style css vertical-align permet de gérer l'alignement vertical du texte. La propriété de feuille de style css vertical-align est applicable sur l'ensemble des balises HTML ou XHTML de tableau (tr, td, ...), les champs de formulaires (input, textarea), les images (img), les balises génériques (div, span). Pour régler le positionnement vertical du texte le conteneur doit posséder une hauteur définie par la propriété width (si le conteneur contient une image la hauteur est automatiquement donnée par la hauteur de l'image).

Syntaxe : vertical-align:valeur

Attributs de la propriété vertical-align
Valeurs Commentaires
numérique positif ou négatif suivie de px ou % ou ex ou em. Le point de départ est baseline pour les valeurs fixes et dépend de line-height pour les pourcentages. line-height par défaut est la hauteur du texte lui même : comme la taille du texte =1em, une valeur de 100% sera elle aussi équivalente à 1em.
baseline lignes de bases alignées, valeur par défaut.
sub ligne de base de l'enfant aligné un peu plus bas que la ligne de base de son parent.
super ligne de base de l'enfant aligné un peu plus bas que la partie la plus haute des caractères de son parent.
text-top alignement sur les parties les plus hautes.
text-bottom alignement sur les parties les plus basses.
middle alignement par le milieu vertical.
top le haut de l'enfant est aligné sur la partie la plus haute de la ligne.
bottom le bas de l'enfant est aligné sur la partie la plus basse de la ligne (sauf ie).
inherit hérite de la propriété de son parent (css 2)
Testez
Exemple d'une image que l'on aligne sur une ligne de texte.

texte avant texte après

<p style="border:solid 0.1em black; margin:0em; padding:0em; font-size:2em; width:15em" >texte avant <img style="border:solid 0.1em red;verticalAlign:0em" src="Images/Style00.png" width="59" height="57" alt="" />texte aprés</p>

Exemple d'une partie de texte que l'on aligne sur une autre partie de texte.

Bonjour Monsieur

<p style="border:solid 0.1em black; height:5em; width:10em"> Bonjour <span style="vertical-align:0em"> Monsieur </span></p>

Style des listes

La propriété list-style et ses dérivés servent à spécifier le type de mise en forme des listes. Ces attributs s'appliquent sur les éléments dd, dt, li, ol et ul et tout autre élément doté de la propriété de style display:list-item.

La propriété list-... et ses attributs
Propriétés Descriptions Valeurs et tests
list-style-position La propriété de feuille de style list-style-position permet de spécifier l'alignement gauche du texte par rapport à l'article ou puce lors d'un retour à la ligne automatique.
Exp : list-style-position:outside
inside : Si le contenu est un texte, la puce fait partie intégrante du bloc de texte, l'élément de liste est aligné normalement et la puce n'apparaît pas en retrait négatif.

outside : Valeur par défaut. Détermine si la puce doit être affichée à l'intérieur ou à l'extérieur (en retrait négatif) de la liste.
inherit : hérite de la propriété de son parent (css 2).
  • Article 1
  • Article 2
  • Article 3

Style css => sélecteur ou classe {list-style-position:outside}
list-style-image Afin de rendre plus attrayante une liste à puces, l'utilisation des CSS permet de remplacer les traditionnelles puces par des images, de façon extrêmement simple.
url('............') = >url de l'image puce
  • Article1
  • Article2
  • Article3
  • Article4

Certains navigateurs ne supportant pas cette propriété, pour conserver malgré tout une présentation de liste, ajouter la déclaration suivante : list-style-type: circle ; si l'image ne peut être affichée les puces par défaut se présenteront sous forme de cercles.
<ul style= "list-style-type:circle; list-style-image: url('Images/puceGraphique00.jpg')">
<li>Article1</li>
<li>Article2</li>
<li>Article3</li>
<li>Article4</li>
</ul>

La propriété list-... et ses attributs
Propriétés Descriptions Valeurs et tests
list-style-type liste ordonnée décimale L'imbrication de listes ordonnées décimales  est  possible sans pourtant générer de numérotation continue. Des hiérarchies automatiques de numérotation comme 1, 1.1, 1.1.1, ne sont pas possibles en HTML.
sauf avec des feuilles de style spéciales utilisant les propriétés content: counter et counter-increment.
voir la fiche détaillée sur ce sujet
decimal : Chiffres arabes, 1, 2, 3.
decimal-leading-zero: 01, 02, 03.
liste ordonnée alphabétique
lower-roman : Chiffres romain en minuscules, i, ii, ii.
upper-roman : chiffres romain en capitales, I, II, III.
lower-alpha : lettres en minuscules, a, aa, aaa.
upper-alpha : lettres en capitales, A, AA, AAA.
lower-greek : alpha grec en minuscule έ, ή, ί.
liste à puce
disc : gros point plain.
circle : gros point creux.
square : petit carré.
valeurs génériques
none : aucune.
inherit : hérite de la propriété de son parent (css 2)
  • Article 1
  • Article 2
  • Article 3

Style css => sélecteur ou classe {list-style-type:decimal}
list-style La propriété de style css list-style permet de spécifier plusieurs propriétés d'une liste en une seule déclaration.
list-style css peut pendre les trois valeurs suivantes à la suite, et cela dans un ordre indifférent :
  • list-style-type.
  • list-style-image.
  • list-style-position.
  • Article1
  • Article2
  • Article3
  • Article4
sélecteur ou classe{list-style: upper-roman inside }
Respectez les blancs entre attributs.

Style titre de tableaux

Position du titre d'un tableau

Généralités

L'attribut de style caption-side associé à la balise <caption> permet de positionner le titre du tableau en haut, en bas, à droite ou à gauche du tableau. Cet attribut peut être positionné en ligne (style="...") ou sous forme de feuille de style (sélecteur ou classe {....})

Attention certains navigateurs ne reconnaissent pas cette syntaxe. Seul Firefox reconnaît l'ensemble de ces positions.

Syntaxes

Style en ligne : <caption style="">Démo</caption>

Feuille de style par classe : <caption class="TitreTableaux">Démo</caption>

Feuille de style par id : <caption id="TitreTableaux">Démo</caption>

Attributs


Propriétés titre des tableaux
Valeurs attributs Commentaires Démos
caption-side="top" Positionne le titre en haut.
caption-side="bottom" Positionne le titre en bas.
caption-side="left" Positionne le titre à gauche.
caption-side="right" Positionne le titre à droite

On peut utiliser l'ensemble des styles relatifs à la structuration des textes mis à notre disposition et en particulier lorsque le titre est positionné à droite ou à gauche, l'attribut vertical-align (vu ci-dessus) pour positionner le titre sur la hauteur.

<style type="text/css">
caption.TitreTableaux {
caption-side:left; color:red; vertical-align:middle}
</style>
<table>
<caption class="TitreTableaux">Démo</caption>
<tr>
<th>C1</th> <th>C2</th> <th>C3</th>
</tr>
<tr>
<td>vv</td> <td>vv</td> <td>vv</td>
</tr>
</table>

Groupement de colonnes pour appliquer un style

Généralités

Permet d'affecter des styles spécifiques par colonne d'une manière très simple.

Attention certains navigateurs ne reconnaissent pas cette syntaxe : IE: ok, firefox, safari, opéra :non ok

Syntaxe générale

<colgroup>
    <col span="1"  style en ligne ou classe de style /> /* description de la colonne 1 */
    <col span="1"  style en ligne ou classe de style /> /* description de la colonne 2 */
    ................................... /* autres descriptions de lignes */
</colgroup>

Il est ainsi possible de définir globalement (avec COLGROUP) ou individuellement (avec COL) certains attributs de colonne comme l'alignement du contenu des cellules, leur taille, leur couleur de fond... Par ailleurs, le fait de pouvoir associer un groupe de colonnes ou une seul colonne à une ID ou une CLASS permet également de leur appliquer des transformations CSS.

Balises et attributs


Balises et Attributs pour groupement de style par colonne
Balises Attributs et commentaires
<colgroup> Cette balise  sert  à grouper des colonnes afin d'y appliquer un certain style.
La balise doit être placées après la balise table et après la balise caption si elle est renseignée.
<col> On peut définir  les différents styles classiques de couleur, arrière plan, police de caractères etc. pour chacune des colonnes.
Attributs Commentaires
span ="x" Permet de spécifier sur combien de colonnes (par rapport aux colonnes précédentes) le style doit être appliqué.

Exemple


Image grouper les colonnes

Groupement de lignes pour appliquer un style

Par l'intermédiaire de la balise <tbody> ... </tbody> on peut grouper des lignes consécutives dans un tableau et leur appliquer différents styles comme dans l'exemple ci contre réalisé avec le code HTML ci-dessous.

Groupement de lignes

Style du curseur

Styles

L'attribut cursor permet de changer l'aspect du curseur sur tout élément d'une page web.
Les exemples suivants sont basés sur la feuille en ligne : <p style="cursor:propriété">Montexte</p>

Style du curseur
Propriétés Commentaires Tests survolez le texte
auto Aspect identique à celui du curseur par défaut sur la balise qui possède l'attribut, ne change rien.
{cursor:auto;}

Curseur auto

default Curseur par défaut du navigateur.
{cursor:default;}

Curseur par défaut

pointer Curseur en forme de main avec le doigt déplié.
{cursor:pointer;}

Curseur pointer

text Curseur d'édition de texte.
{cursor:text;}

Curseur text

help Curseur d'aide.
{cursor:help;}

Curseur help

wait Curseur d'attente.
{cursor:wait;}

Curseur wait

progress Curseur de progression.
{cursor:progress;}

Curseur progress

move Curseur de déplacement.
{cursor:move;}

Curseur move

crosshair Curseur en forme de croix.
{cursor:crosshair;}

Curseur crosshair

n-resize Curseur de dimensionnement bas vers haut.
{cursor:n-resize;}

Curseur n-resize

s-resize Curseur de dimensionnement haut vers bas.
{cursor:s-resize;}

Curseur s-resize

e-resize Curseur de dimensionnement gauche vers droite.
{cursor:e-resize;}

Curseur e-resize

w-resize Curseur de dimensionnement droite vers gauche.
{cursor:w-resize;} 

Curseur w-resize

ne-resize Curseur de dimensionnement bas -gauche vers haut -droite.
{cursor:ne-resize;}

Curseur ne-resize

nw-resize Curseur de dimensionnement bas -droite vers haut -gauche.
{cursor:nw-resize;}

Curseur nw-resize

se-resize Curseur de dimensionnement haut -gauche vers bas -droite.
{cursor:se-resize;} 

Curseur se-resize

sw-resize Curseur de dimensionnement haut-droite vers bas -gauche.
{cursor:sw-resize;}

Curseur sw-resize

url('....')(1) Image sur curseur
{cursor:url('adresseImage/NomImage'),default;}

Curseur image

url('....')(1) Image sur curseur
{cursor:url('adresseImage/NomImage'),default;}

Curseur image

En modifiant les propriétés de cursor on peut affecter des styles  de curseur différents pour les divers éléments HTML. En théorie c'est une excellente possibilité, mais utilisée sans discernement et définir des styles de curseur non appropriés, peut devenir très confus et déstabilisant pour l'internaute. Faites attention à cela, d'autant que les propriétés par défaut des navigateurs fonctionnent très bien et que tous les navigateurs ne gèrent pas cette propriété : Opera 9.5b, Konqueror 3.5.7

Note (1)

Pour afficher un curseur image le navigateur Internet Explorer utilise des fichiers image de type .cur ,Firefox peut utiliser indifféremment des fichiers .cur, .gif, .jpeg, .png mais exige une propriété supplémentaire : {cursor:url('.......'), default} . Cette propriété peut être default ou auto.
La taille maximum de l'image ne doit pas être supérieure à  32x32 pixels (ceci est une limitation du système d'exploitation de Windows et non pas une restriction des navigateurs).

Exemple


Les bonnes habitudes

Utiliser des polices  sans-serif pour les pages Web comme :

  • Arial
  • Geneva
  • Helvetica
  • Trebuchet
  • Verdana
  • Ne pas multiplier les polices ou les couleurs différentes.
  • Utiliser des caractères de tailles moyennes.

Ne pas multiplier les styles de curseur.

Application au projet de site web

Les modifications suivantes sont à effectuer dans la fichier de feuille de style externe CSSExterneScreen.css

  • Définition de style de base dans la balise body.
    • Définissez les polices de caractères de base du site :
      Utilisez dans cet ordre trebuchet, verdana, helvetica, tahoma,  arial, ms sans serif.
    • Définissez la couleur noire (black) pour les caractères de base.
  • Définition de style de la liste "Choisissez et commandez".
    Définissez la couleur verte (Définissez à vert (green) la couleur des caractères des éléments de la liste, et vert clair (#00CC00) la couleur des caractères pour les éléments de la liste survolés.
  • Centrage titre et image à coté du titre
    Centrez le texte du titre ( "Bienvenue .......du Fleuriste") et  positionnez l'image au milieu du texte, avec un décalage de 0.5em entre le texte et l'image.

Retrouvez la solution



Respectons la propriété intellectuelle