Chapitre suivantIndex des CoursChapitre prcedentChapitre 13

Les feuilles de styles.

 

    1. Introduction aux feuilles de styles
    2. La syntaxe
    3. Propriétés et valeurs
    4. Les éléments CLASS et ID
    5. Le paramètre MEDIA
    6. DIV et SPAN
    7. Le positionnement d'élément



Introduction aux feuilles de styles.

Note : Internet Explorer à partir de la version 3.0 (attention la version d'Internet Explorer 3.0 ne gère pas toutes les propriétés des feuilles de styles)et, Netscape à partir de la version 4 supportent les feuilles de styles.

Cette technologie a été introduite par Microsoft avec la version 3.0 (1996), le but : modifier le contenu d'une page par une grande variété d'effets surprenants (Dynamic HTML) et cela en un clin d'oeil. En fait avec les feuilles de styles (CSS ou Cascading Style Sheets), vous contrôlez parfaitement la mise en page des différents éléments qui composent votre document, par exemple vous pouvez définir la couleur d'une police, sa taille, le positionnement d'un objet (image, texte, ...), l'espacement entre les paragraphes, et même gérer des effets de transition.



La syntaxe.

Normalement, la syntaxe des déclarations CSS est toujours identique. La méthode est simple, il s'agit de redéfinir le rôle d'une balise HTML en lui imposant de nouvelles propriétés.

  1. Comme les feuilles de styles ne sont pas une composante directe du HTML, vous pouvez définir à l'aide de la balise META (dans l'en-tête de la page) la déclaration suivante :

    <META HTTP-EQUIV="Content-Style-Type" content="text/CSS">

  1. Comme pour les navigateurs ignorant le JavaScript, vous devez cacher le code des feuilles de styles à l'aide des commentaires :

    <!-- //-->

  1. Quatre méthodes différentes sont possibles pour intégrer les feuilles de styles en HTML
    • L'instruction STYLE en tant qu'élément :
      <STYLE TYPE="text/CSS">

    • L'élément LINK pour établir un lien vers une feuille de style externe (fichier texte avec l'extension .css) :
      <LINK TITLE="TEST" TYPE="text/CSS" rel="stylesheet" HREF="ma_feuille.css">

    • L'instruction STYLE en tant qu'attribut :
      <P STYLE="font-size: 12pt; color: green">

    • Importer une feuille de style (fichier texte avec l'extension .css) :
      <STYLE TYPE="text/CSS">
      @import url(http://www.multimania.com/html/feuille.css);
      </STYLE>

    • Note : Le fichier .css ne doit pas contenir de code HTML.

  1. Pour définir une propriété, on indique d'abord la balise concernée puis entre deux accolades les caractéristiques de cette propriété (s'il y a plusieurs propriétés, on les sépare par un point virgule).

    <HTML>
    <HEAD>
    <STYLE TYPE="text/css">
    <!--
    H1
    {
    font-size: 12pt;
    color: green
    }
    //-->
    </STYLE>
    </HEAD>


    Si on opte pour la balise <DIV> la syntaxe sera :

    <DIV STYLE="margin-left: 50px; color: blue">
    Ce paragraphe sera placé à 40 pixels de la marge de gauche et sera de couleur bleu.
    </DIV>




Propriétés et valeurs.

Voici un tableau résumant toutes les propriétés et valeurs possibles les plus courantes pour définir une feuille de style.

Propriété Valeur(s) Description Exemple
font-size xx-small, x-small, small,
medium, large, x-large,
xx-large, larger, smaller,
ou taille défini en pixels (px)
cm (cm), mm (mm), point (pt),
pourcentage (%)
Taille de la police {font-size: 12pt}
font-family serif, sans-serif, cursive,
fantasy, monospace,
ou nom de la police
(Arial, Verdana, etc...)
Type de police {font-family: Arial}
font-weight normal, bold, bolder, lighter,
ou valeur numérique de 100
à 900 (par tranche de 100)
Poids de la police {font-weight: bold}
font-style normal, italic, oblique
Style de la police {font-weight: italic}
font-variant normal, small-caps
Variante de la police {font-weight: small-caps}
line-height point (pt), pourcentage (%)
Hauteur de la ligne {line-height: 5pt}
color nom ou valeur hexadécimale
de la couleur
Couleur de la police {color: green}
background-image URL du fichier Image d'arrière-plan {background-image:
url(image/fichier.gif)}
background-repeat repeat , no-repeat, repeat-x,
repeat-y
Répétition de l'arrière-plan {background-repeat:
no-repeat}
background-attachment scroll, fixed Effet de filigrane {background-attachment:
fixed}
background-position top, center, bottom, left, right Position de l'arrière-plan
(verticale et horizontale)
{background-position:
center center}
vertical-align baseline, sub, super, top,
text-top, middle, bottom,
text-bottom, ou valeurs en
pourcentage
Alignement vertical {vertical-align: top}
text-align left, right, center, justify Alignement du texte {text-align: justify}
text-indent valeur en pixel ou
pourcentage
Retrait de la
première ligne
{text-indent: 10px}
text-decoration none, underline, overline,
line-through
Décoration du texte {text-decoration: overline}
text-transform capitalize, uppercase,
lowercase, none
Casse du texte {text-transform: none}
margin-left (ou -right,
-top, -bottom)
valeur en pixel ou
pourcentage
Valeurs des marges {margin-right: 10px}
padding-left (ou -right,
-top, -bottom)
valeur en pixel ou
pourcentage
Remplissage du bloc {padding-left: 15pt}
border-left (ou -right,
-top, -bottom)
medium, thick,
ou un style
Type de bordure {border-top: medium}
border-x-width (x à
remplacer par right, left,
top, bottom)
medium, thick ou
taille.
Taille de la bordure {border-top-width: 15}
border-style none, dotted, dashed, solid,
double, groove, ridge, inset,outset
Style de la bordure {border-stylet: ridge}
border-color nom ou valeur hexadécimale
de la couleur
Couleur de la bordure {border-color: red}
float none, left, right, both Alignement d'un bloc
par rapport à un autre
{float: right}
clear none, left, right,both Autorise l'alignement
d'un bloc par rapport
à un autre
{clear: right}
letter-spacing normal ou valeur en point Esapcement des lettres {letter-spacing: 2pt}





Les éléments CLASS et ID.

Comme nous l'avons vu plus haut, on peut redéfinir l'utilité d'une balise, mais si vous voulez que cette balise ne soit pas limitée aux seules feuilles de styles l'élément CLASS doit alors être utilisé. L'élément ID (identifiant) peut l'être aussi, sa différence avec CLASS se situe au niveau de l'utilisation, en effet on opte pour une ID de préférence lors d'un script JavaScript.

Exemple avec une CLASS.

<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
H2.test
{
font-size: 12pt;
color: red
}
//-->
</STYLE>
</HEAD>
</BODY>
<H2 class="test">Titre défini avec une CLASS</H2>
<H2>Titre normal de niveau 2</H2>
<BODY>
<HTML>


Exemple avec une ID (à noter le #).

<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
#test
{
font-size: 10pt;
color: black
}
//-->
</STYLE>
</HEAD>
</BODY>
<H2 id="test">Titre défini avec une ID</H2>
<H2>Titre normal de niveau 2</H2>
<BODY>
<HTML>




Le paramètre MEDIA.

On utilise le paramètre MEDIA (à l'intérieur de la balise STYLE) pour obtenir des présentations différentes selon le type de média utilisé (ordinateur, synthétiseurs vocaux, ...).

Tableau résumant les valeurs disponibles pour le paramètre MEDIA.

Valeur Information(s)
all Pour tous les types de périphériques
screen Type classique, pour tous les moniteurs courants
tty Type télévision (basse résolution)
projection Type projecteur
handheld Type PC de poche (Psion, Windows CE, Pilot ...)
print Type impression (pour les imprimantes)
braille Pour les dispositifs de représentation en braille
aural Pour les synthétiseurs vocaux


Exemple d'utilisation du paramètre MEDIA (ici pour les PC de poche et les PC standards ).

<HEAD>
<STYLE TYPE="text/css" MEDIA="screen">
<!--
H2
{
font-size: 12pt;
color: black
}
//-->
</STYLE>

<STYLE TYPE="text/css" MEDIA="handheld">
<!--
H2
{
font-size: 10pt;
color: black
}
//-->
</STYLE>
</HEAD>




DIV et SPAN.

Les balises DIV et SPAN permettent de désactiver certaines instructions de la feuille de style, vous pouvez de cette façon modifier le style appliqué à certaines balises tout en conservant les autres effets définis dans le fichier CSS.

A noter que :

  • DIV est normalement utilisé pour des blocs de texte entier.
  • SPAN est lui, utilisé que pour des petites portions de texte (mots ou lettres).

SPAN et DIV, prennent en charge les attributs ID et CLASS.

Exemple avec DIV.

<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
H1
{
font-size: 10pt;
color: green
}
//-->
</STYLE>
</HEAD>
</BODY>
<H1>Titre défini avec une CSS</H1>
<DIV STYLE="margin-left: 50px; color: blue">
Ce paragraphe sera placé à 40 pixels de la marge de gauche et sera de couleur bleu.
</DIV>
<BODY>
<HTML>




Le positionnement d'élément.

Un des avantages des feuilles de style, c'est le positionnement des éléments (bloc de textes, images ...) au pixels prés !! fini les multitudes de balises (surtout les tableaux) pour essayer de faire une mise en page correcte. Pour positionner un élément il existe deux types de positionnement :

  • Le positionnement absolu : C'est le plus rencontré, ce type de positionnement est identique aux logiciels de PAO tels que Publisher ou XPress , le placement d'un objet s'effectue à l'aide de boîte indépendante du reste du contenu de la page où l'on insère du texte ou des images.
  • Le positionnement relatif : (le moins précis) il est identique au HTML, le navigateur affichera l'élément par rapport à l'emplacement de la balise concernée (dans le code source de la page).


Exemple de positionnement relatif

<DIV STYLE="position: relative; left: 50; top:100">
Ce texte est placé à 50 pixels (de la bordure gauche)
de la commande DIV (code source HTML de la page)
et à 100 pixels du haut de la commande DIV
</DIV>


Exemple de positionnement absolue

<DIV STYLE="position: absolute; left: 50; top:100">
Ce texte est placé à 50 pixels de la bordure gauche de la fenêtre du navigateur et à 100 pixels du haut de cette même fenêtre
</DIV>


Note : La valeur z-index précise le chevauchement des éléments les uns par rapport aux autres (image en dessous du texte par exemple). Un élément sera affiché au-dessus d'un autre s'il possède un ordre d'affichage supérieur, par exemple si un élément à la valeur : {z-index: 2} il va alors recouvrir l'élément qui a comme valeur {z-index: 1}.

 

Chapitre prcedentIndex des CoursChapitre suivant

Révisé le :21-Jan-2009|©2009 www.technologuepro.com