Fiche CSS : Les styles et la structuration de textes

Objet de la fiche

État de la fiche

Plan de la fiche

• | Avant propos |
• | Domaine d'application |
• | Style du texte |
• | Structuration |
• | Alignement horizontal |
• | Alignement vertical |
• | Style des listes |
• | Style titre des tableaux |
• | Style du curseur |
• | Les bonnes habitudes |
• | Application au projet de site web |

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

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}	normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded
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}	normal italic oblique
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}	normal small-caps
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}	normal bold bolder lighter 100 200 300 400 500 600 700 800 900
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

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

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

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}	outside inside
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)	decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek disc circle square
	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

Exemple

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.

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 ⁽¹⁾

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