Chapitre 13 Chapitre 13
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.
- 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="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.
- 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 ...) |
| 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}.
Révisé le :21-Jan-2009|©2009 www.technologuepro.com