ALL HTML - Introduction aux feuilles de styles (CSS)

retour

Introduction aux feuilles de styles (CSS)

Article publié le lundi 07 mars 2005 par ALL HTML.
Cet article est classé dans les catégories « CSS »

Avec les CSS (Cascading Style Sheets), plus connus sous le nom de "feuille de styles", vous contrôlez parfaitement la mise en page des différents éléments qui composent votre document. Il existe deux spécifications : CSS1 (level 1) et la dernière en date, CSS2 (level 2). Ces spécifications ont été validées par le W3C.

Introduction

Cette technologie a été introduite par Microsoft avec la version 3.0 (1996) avec pour but de modifier le contenu d'une page par une grande variété d'effets surprenants (Dynamic html) et cela en un clin d'œil. 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.

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.

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 :
- 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">

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


- 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="mafeuille.css">

+ L'instruction style en tant qu'attribut :


+ Importer une feuille de style (fichier texte avec l'extension .css) :

<style type="text/css">
@import url([url=http://www.allhtml.com/feuille.css]http://www.allhtml.com/feuille.css[/url]);
</style>

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

- 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é à 50 pixels de la marge de gauche et sera de couleur bleu.
</div>

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, alors l'élément class doit ê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.

<table border="1" bordercolor="#330033" cellpadding="3" cellspacing="1" width="489"><tbody><tr><td align="center" bgcolor="#6699cc">Valeur</td><td align="center" bgcolor="#6699cc">Information(s)</td></tr><tr><td>all</td><td>Pour tous les types de périphériques</td></tr><tr><td>screen</td><td>type classique, pour tous les moniteurs courants</td></tr><tr><td>tty</td><td>type télévision (basse résolution)</td></tr><tr><td>projection</td><td>type projecteur</td></tr><tr><td>handheld</td><td>type PC de poche (Psion, Windows CE, Pilot ...)</td></tr><tr><td>print</td><td>type impression (pour les imprimantes)</td> </tr><tr><td>braille</td><td>Pour les dispositifs de représentation en braille</td></tr><tr><td>aural</td> <td>Pour les synthétiseurs vocaux</td></tr></tbody></table>

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 styles. 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)

Note : 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 styles, c'est le positionnement des éléments (bloc de textes, images ...) au pixels prés !! Finies les multitudes de balises (surtout les tableaux) pour essayer de faire une mise en page correcte. Pour placer un élément, il existe deux types de positionnement

a ) 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 d'une boîte indépendante du reste du contenu de la page où l'on insère du texte ou des images.

b ) 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 absolu :

<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}.

VOS COMMENTAIRES ...

Commenter cette publication

Commentaire publié le vendredi 12 mai 2006 à 12 h 45 par tspawn: Un tutoriel clair et bien fait. merci :))
Commentaire publié le jeudi 27 juillet 2006 à 16 h 14 par Glum: C est ce que j appelle rendre l'informatique accessible.
Bravo.
Commentaire publié le mardi 26 septembre 2006 à 23 h 13 par Imh0tep: Genial la Doc merci encore c'est bref et bien expliqué merci
Commentaire publié le jeudi 09 novembre 2006 à 17 h 36 par idelaou: j'ai tout compris sauf la derniere note, avec la reference z-index, est ce que quelqu'un pourrait me l'expliquer , merci !