CyberZoïde

Webzine de vulgarisation des sciences et techniques.


membre de

Developpez.com
 

VIII. Les feuilles de style

Par Hugo ETIEVANT

  1. Introduction
  2. Déclaration ponctuelle
  3. Déclaration générale
  4. Déclaration externe
  5. Personnaliser l'outil de visualisation
  6. Diverses propriétés et valeurs

Introduction

Les feuilles de styles (ou CSS, Cascading Style Sheets) permettent de créer des présentations surprenantes, des mises en pages très précises en modifiant les balises existantes, ou en créant de nouvelles dont les propriétés sont à votre choix.


Déclaration ponctuelle

On peut se contenter d'introduire une feuille de style en tant qu'attribut à une balise existante. Cette déclaration ponctuelle ne s'applique qu'à la seule balise concernée. Si vous introduisez une feuille de style à une balise <P> et qu'il y a d'autres balise <P> dans votre document, seule la balise contenant la syntaxe de déclaration sera affectée par le nouveau style à appliquer. Cette manière ponctuelle d'introduire une feuille de style est utile pour un effet limité et sporadique dans une page.

Syntaxes :

<BALISE style="propriété: valeur">

<BALISE style="propriété1: valeur1; propriété2: valeur2">

Exemples :

<H1 style="color: #FF0000">
Le texte inclu dans ce conteneur <H1> sera de couleur rouge.

<P ALIGN="justify" style="color: blue">
Le texte inclu dans ce conteneur <P> sera de couleur bleu en plus d'être en alignement justifié.

<A HREF="menu.php3" style="text-decoration: none; font-size: 3">
Le texte inclu dans ce conteneur <A> pointant vers la page menu.php3 ne sera pas souligné et sera de taille 3.


Déclaration générale

a°) La déclaration générale d'une feuille de style s'effectue dans le conteneur <HEAD> de votre page et s'applique à tous les exemplaires de la (ou les) balise(s) concernée(s). Avec la déclaration générale suivante, les attributs d'une balise sont définis pour toute la page courante. Après la définition de la feuille de style dans le <HEAD>, il ne vous reste plus qu'a utiliser la syntaxe minimale de la balise concernée (c'est-à-dire sans aucun attributs). Mais il vous reste possible de rajouter des attributs à une balise dans le corps du document si vous le souhaitez.

Syntaxes :

<HEAD>
<STYLE type="text/css">
    <!--
    BALISE { propriété: valeur }
    -->
</STYLE>
</HEAD>

<HEAD>
<STYLE type="text/css">
    <!--
    BALISE1 { propriété: valeur }
    BALISE2 { propriété1: valeur1; propriété2: valeur2 }
    -->
</STYLE>
</HEAD>

<HEAD>
<STYLE type="text/css">
    <!--
    BALISE1, BALISE2, BALISE3 { propriété: valeur }
    -->
</STYLE>
</HEAD>

Exemples :

<HEAD>
<STYLE type="text/css">
    <!--
    A { text-decoration: none }
    -->
</STYLE>
</HEAD>
<BODY>
<A HREF="home.php3">Home Page</A>
</BODY>
Home Page

<HEAD>
<STYLE type="text/css">
    <!--
    I { font-family: Times New Roman }
    P { color: #0000FF; text-align: center }
    -->
</STYLE>
</HEAD>
<BODY>
<FONT FACE="Arial">
<P>Le <I>CyberZoïde<I> Qui Frétille </P>
</BODY>

Le CyberZoïde Qui Frétille

b°) On peut définir un élément CLASS pour que la balise ne soit affectée des nouveaux attributs définis dans le <HEAD> qu'à la demande explicite dans la balise concernée.

Syntaxe :

<HEAD>
<STYLE type="text/css">
    <!--
    BALISE.identifiant { propriété: valeur }
    -->
</STYLE>
</HEAD>
<BODY>
<BALISE class="identifiant">
</BODY>

Exemple :

<HEAD>
<STYLE type="text/css">
    <!--
    A.toto { text-decoration: none }
    -->
</STYLE>
</HEAD>
<BODY>
<A class="toto" HREF="mailto:cyberzoide@chezmoi.com">Ecrivez-moi vite !</A>
<A HREF="link.php3">Visitez mes amis !</A>
</BODY>
Ecrivez-moi vite !
Visitez mes amis !

Si vous spécifiez la syntaxe class="identifiant" dans votre balise dans le <BODY>, alors la feuille de style déclarée dans le <HEAD> sera prise en compte lors de cette occurence de la balise. Au contraire, si vous n'insérez pas cette syntaxe, le navigateur ne tiendra pas compte de la feuille de style pour l'occurence qui ne contient pas class="identifiant".

c°) Une troisième façon de déclarer de manière générale une feuille de style est de procéder avec l'élément ID. Cet élément ID regroupe un ensemble de propriétés et de valeurs définis dans le <HEAD> dont la déclaration est indépendante de quelconque balise spécifique. Mais cet élément, associé dans le <BODY> à une balise sous la forme d'une propriété force les propriétés de la balise. Alors que les deux méthodes précédentes de déclaration générale de feuille de style ne s'appliquait qu'aux balises dûment spécifiées durant la déclaration, ici, l'élément ID permet d'affecter une feuille de style très librement à toutes les balises que l'on souhaite et ce, sans hérédité.

Syntaxe :

<HEAD>
<STYLE type="text/css">
    <!--
    #identifiant { propriété: valeur }
    -->
</STYLE>
</HEAD>
<BODY>
<BALISE id="identifiant">
</BODY>

Exemple :

<HEAD>
<STYLE type="text/css">
    <!--
    #zizitop { color: #FF0000; font-weight: 900 }
    -->
</STYLE>
</HEAD>
<BODY>
<P id="zizitop">L'eau mouille. </P>
<A id="zizitop">Le feu brûle. </P>
<FONT id="zizitop" FACE="Arial" SIZE=5>Ouioui au pays des rêves. </P>
</BODY>
L'eau mouille.
Le feu brûle.
Ouioui au pays des rêves.


Déclaration externe

Utiliser une feuille de style non déclarée sur la page web en cours suppose qu'un fichier au format texte d'extention .CSS contienne la déclaration de type générale.

Syntaxe :

<HEAD>
<STYLE type="text/css">
@import url(adresse)
</STYLE>
</HEAD>

Exemples :

<HEAD>
<STYLE type="text/css">
@import url(../styles/style3.css)
</STYLE>
</HEAD>

<HEAD>
<STYLE type="text/css">
@import url(http://cyberzoide.developpez.com/styles/style3.css)
</STYLE>
</HEAD>

Il est possible de procéder autrement :

Syntaxe :

<HEAD>
<LINK href="adresse" rel="stylesheet" type="text/css">
</HEAD>

Exemples :

<HEAD>
<LINK href="../styles/toto.css" rel="stylesheet" type="text/css">
</HEAD>

<HEAD>
<LINK href="http://cyberzoide.developpez.com/styles/toto.css" rel="stylesheet" type="text/css">
</HEAD>


Personnaliser l'outil de visualisation

La balise <STYLE> possède un autre attribut : MEDIA qui permet d'affecter une feuille de style différente à chaque outil de visualisation différent.

ValeurDescription
allIndifféremment pour tous les matériels de visualisation
des pages web. Par défaut.
auralPour les synthétiseurs vocaux.
braillePour le matériel pour aveugles.
handheldPour les gadgets miniatures de type PC de poche.
printPour le matériel d'impression.
projectionPour les projecteurs.
screenPour tous les écrans standards.
ttyPour la télévision ou assimilés (en basse résolution).

Syntaxe :

<HEAD>
<STYLE type="text/css" media="valeur">
    <!--
    BALISE { propriété: valeur }
    -->
</STYLE>
</HEAD>

Exemple :

<HEAD>
<STYLE type="text/css" media="handheld">
    <!--
    P { text-align: left; color: black; font-size: 3 }
    -->
</STYLE>
<STYLE type="text/css" media="screen">
    <!--
    P { text-align: justify; color: blue; font-size: 2 }
    -->
</STYLE>
</HEAD>


Diverses propriétés et valeurs

Voici un tableau qui regroupe un certain nombre de propriétés ainsi que les valeurs associées.

PropriétéValeurDescrption
background-imageadresse d'un fichier imageImage de fond.
border-colornom ou valeur hexadécimaleCouleur de la bordure.
colornom ou valeur hexadécimaleCouleur du texte
font-familyNom de la police souhaitéePolice de caractère.
font-sizesmaller, xx-small, x-small, small, medium, large, x-large, xx-large, larger; ou taille spécifiée avec l'unité en pixel (px), cm (cm), mm (mm), point (pt), pourcentage (%)Taille de la police.
font-stylenormal, italic, obliqueStyle de la police.
font-weightlighter, light, normal (par défaut), bord, bolder; ou épaisseur en centaine de 100 à 900Epaisseur des caractères.
letter-spacingnormal; ou valeur en point (pt)Espacement des lettres.
line-heightvaleur en pixels (px) ou pourcentage (%)Hauteur de ligne.
margin-? (?= left, right, top ou bottom)valeur en pixels (px) ou en pourcentage (%)Epaisseur des marges.
text-alignleft, center, right, justifyAlignement du texte.
text-decorationline-through, none, overline, underlineLignement du texte.
text-indentvaleur en pixels (px) ou en pourcentage (%)Retrait de la première ligne.
text-transformcapitalize, lowercase, none, uppercaseCasse du texte.