COMPRENDRE LES CSS

Introduction Une brve prsentation du tutoriel et ce que vous allez y apprendre. Leon 1 : Qu'est-ce que CSS ? Une petite histoire de la cration de CSS, et les raisons pour lesquelles il est judicieux de prfrer CSS HTML pour la disposition et la prsentation. Leon 2 : Comment CSS fonctionne-t-il ? Apprendre la syntaxe de base de CSS et crer sa premire feuille de style. Leon 3 : Les couleurs et les arrires-plans Apprendre appliquer des couleurs et couleurs de fonds dans son site Web et comment utiliser des images d'arrire-plan. Leon 4 : Les polices Dans cette leon, vous apprendrez ce que sont les polices et comment les appliquer avec CSS. Leon 5 : Le texte Cette leon introduit les possibilits tonnantes de CSS pour ajouter une prsentation au texte. Leon 6 : Les liens Comment ajouter des effets plaisants et utiles aux liens et se servir des pseudo-classes. Leon 7 : L'identification et le regroupement d'lments (class et id) Une approche sur la faon d'utiliser les attributs class et id pour dfinir les proprits des lments slectionns. Leon 8 : Le regroupement d'lments (span et div) Une approche de l'utilisation des lments span et div, et le rle central de ces deux lments HTML pour CSS. Leon 9 : Le modle des botes Le modle des botes dans CSS dcrit les botes gnres pour les lments HTML. Leon 10 : Le modle des botes : margin & padding Changer la prsentation des lments avec les proprits margin et padding. Leon 11 : Le modle des botes : les bordures Apprendre les options illimites de l'utilisation de bordures dans ses pages avec CSS. Leon 12 : Le modle des botes : la hauteur et la largeur Dans cette leon, nous apprendrons comment dfinir aisment la hauteur et la largeur d'un lment. Leon 13 : Les lments flottants (les flottants) Un lment peut flotter droite ou gauche avec la proprit float. Leon 14 : Le positionnement des lments Le positionnement CSS permet de placer un lment dans la page exactement o l'on veut. Leon 15 : Une couche sur une couche avec z-index (les couches) Cette leon nous apprendra comment faire se recouvrir des lments diffrents avec la proprit z-index. Leon 16 : Les standards du Web et la validation La dernire leon traite des standards du W3C et de la faon de vrifier l'exactitude de son code CSS.

beaucoup de temps, et elles permettent de crer des sites Web de faon entirement nouvelle. CSS est un must pour quiconque s'occupe de cration Web. Ce tutoriel vous lancera avec CSS en juste quelques heures. Il est facile comprendre et il vous enseignera toutes les techniques sophistiques. Apprendre CSS est amusant. Au fur et mesure du tutoriel, songez prendre le temps d'exprimenter correctement ce que vous aurez appris dans chaque leon. L'utilisation de CSS ncessite une connaissance de base de HTML. Si HTML ne vous est pas familier, veuillez commencer par notre tutoriel HTML avant de passer CSS.

De quels logiciels ai-je besoin ?

Veuillez viter les logiciels tels que FrontPage, DreamWeaver ou Word pour ce tutoriel. Les logiciels volus ne vous aideront pas apprendre CSS. Au contraire, cela vous limitera et augmentera significativement votre courbe d'apprentissage. Tout ce dont vous avez besoin est un diteur de texte simple et gratuit. Par exemple, Windows de Microsoft est livr avec un programme appel Bloc-notes. On le trouve habituellement dans les Accessoires de la rubrique Tous les programmes dans le menu dmarrer . Autrement, vous pouvez utiliser un diteur de texte similaire, par exemple, Pico sur Linux, ou TextEdit sur Macintosh. Un diteur de texte simple est idal pour apprendre HTML et CSS, car il n'affecte pas ni change le code que vous tapez. Ainsi, vous ne pouvez attribuer vos succs et vos erreurs qu' vous-mme, et non au logiciel. Vous pouvez utiliser n'importe quel navigateur avec le tutoriel. Nous vous encourageons de toujours mettre jour votre navigateur et d'utiliser la dernire version. Un navigateur et un diteur de texte simple sont tout ce dont vous avez besoin. Commenons ! vous pouvez en tirer. CSS est l'abrviation de Cascading Style Sheets .

Qu'est-ce qu'on peut faire avec CSS ?

CSS est un langage de style qui dfinit la prsentation des documents HTML. Par exemple, CSS couvre les polices, les couleurs, les marges, les lignes, la hauteur, la largeur, les images d'arrire-plan, les positionnements volus et bien d'autres choses. Attendez de voir ! HTML peut tre (mal)utilis pour la prsentation des sites Web. Mais CSS offre plus d'options et se montre plus prcis et sophistiqu. CSS est pris en charge par tous les navigateurs actuels.

Aprs seulement quelques leons dans ce tutoriel, vous pourrez fabriquer vos propres feuilles de style avec CSS pour donner un aspect tout nouveau votre site Web.

Quelle est la diffrence entre CSS et HTML ?

HTML sert structurer le contenu, CSS sert formater un contenu structur. Bon, a sonne un peu technique et confus. Mais continuez lire, a prendra tout son sens bientt. Retour au bon vieux temps o Madonna tait une vierge et un type nomm Tim Berners Lee inventait le World Wide Web, le langage HTML tait seulement utilis pour structurer du texte. Un auteur pouvait marquer son texte en dclarant "voici un titre" ou "voici un paragraphe", avec les balises HTML <h1>, ou <p>. La popularit du Web croissant, les concepteurs se mirent rechercher des moyens pour ajouter de la prsentation aux documents en ligne. Pour satisfaire cette demande, les diteurs de navigateurs (en ce temps-l, Netscape et Microsoft) inventrent de nouvelles balises HTML, comme par exemple <font>, qui diffraient des lments originaux en cela qu'ils dfinissaient une prsentation et non une structure. Cela conduisit aussi une situation o les balises de structure originales, telle que <table>, taient de plus en plus utilises tort pour prsenter les pages et non pour ajouter une structure au texte. Beaucoup de nouvelles balises de prsentation, telle que <blink>, n'taient reconnues que par un type de navigateur. "Vous devez utiliser le navigateur X pour voir cette page" devint un avertissement courant sur les sites Web. CSS fut invent pour remdier cette situation en offrant aux concepteurs Web des possibilits de prsentations sophistiques, gres par tous les navigateurs. En mme temps, sparer le style de prsentation des documents de leur contenu rend leur entretien beaucoup plus facile.

Quels sont les avantages de CSS ?

CSS fut une rvolution dans l'univers de la conception Web. Les avantages concrets de CSS sont les suivants :

Le contrle de la prsentation de plusieurs documents par une seule feuille de style ; Un contrle plus prcis de la prsentation ; Des prsentations diffrentes appliques des types de mdias diffrents ( l'cran, l'impression, etc.) ; De nombreuses techniques volues et sophistiques.

Dans la leon suivante, nous verrons comment CSS fonctionne rellement et comment commencer.

Voir aussi

Leon suivante : Comment CSS fonctionne-t-il ? Leon prcdente : Introduction ncessaires pour utiliser CSS dans un document HTML. Beaucoup de proprits des feuilles de style en cascade (CSS) sont similaires celles de HTML. Si vous avez l'habitude d'utiliser HTML pour la prsentation, vous reconnatrez donc beaucoup de ces codes. Voyons un exemple concret.

La syntaxe CSS de base

Supposons que nous voulions que le fond d'une page Web soit d'un beau rouge : Avec HTML, nous l'aurions fait comme ceci :
<body bgcolor="#FF0000">

Avec CSS, on peut obtenir le mme rsultat comme cela :

body {background-color: #FF0000;}

Comme vous l'aurez remarqu, les codes sont plus ou moins identiques pour HTML et CSS. Cet exemple illustre galement le modle fondamental de CSS :

Mais o place-t-on le code CSS ? C'est prcisment ce que nous allons voir maintenant.

Appliquer CSS un document HTML

Il y a trois faons d'appliquer le style CSS un document HTML. Elles sont toutes expliques ci-dessous. Nous vous recommandons d'examiner la troisime mthode, c'est--dire celle externe.

Mthode 1 : Dans la ligne (l'attribut style)

Une faon d'appliquer du style CSS HTML est celle avec l'attribut HTML style. En reprenant l'exemple prcdent avec l'arrire-plan rouge, on peut l'appliquer ainsi :
<html> <head> <title>Exemple</title> </head> <body style="background-color: #FF0000;"> <p>Cette page est rouge</p> </body> </html>

Mthode 2 : Interne (l'lment style)

Une autre mthode consiste inclure le code CSS avec la balise HTML <style>. Par exemple, comme ceci :
<html> <head> <title>Exemple</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>Cette page est rouge</p> </body> </html>

Mthode 3 : Externe (un lien vers une feuille de style)

La mthode recommande est celle avec un lien vers ladite feuille de style externe. Pour le reste de ce tutoriel, nous utiliserons cette mthode pour tous les exemples. Une feuille de style externe est simplement un fichier texte ayant l'extension .css . Comme n'importe quel fichier, la feuille de style peut tre range sur un serveur Web ou sur un disque dur. Par exemple, disons que votre feuille de style se nomme style.css et se trouve dans un dossier appel style . On peut illustrer cette situation comme ceci :

L'astuce consiste crer un lien depuis le document HTML (default.htm) vers la feuille de style (style.css). Ce lien peut tre cr en une ligne de code HTML :
<link rel="stylesheet" type="text/css" href="style/style.css" /> Remarquez comment on indique le chemin de la feuille de style avec l'attribut href.

La ligne de code doit s'inscrire dans la section d'en-tte du code HTML, c'est--dire entre les balises <head> et </head>. Comme ceci :
<html> <head> <title>Mon document</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> ...

Ce lien instruit le navigateur d'utiliser la prsentation du fichier CSS pour afficher le fichier HTML. Ce qui est vraiment ft, c'est que plusieurs documents HTML peuvent tre relis la mme feuille de style. En d'autres termes, on peut utiliser un seul fichier CSS pour contrler la prsentation de plusieurs documents HTML.

Cette technique est susceptible d'conomiser beaucoup d'efforts. Par exemple, si vous voulez changer la couleur d'arrire-plan d'un site Web contenant 100 pages, une feuille de style peut vous pargner la modification manuelle des 100 documents HTML. Avec CSS, le modification peut intervenir en quelques secondes en changeant juste une seule ligne de code de la feuille de style centrale. Mettons donc en pratique ce que nous venons d'apprendre.

Essayez vous-mme
Lancez Bloc-notes (ou votre diteur de texte habituel) et crez deux fichiers, un fichier HTML et un fichier CSS, avec les contenus suivants :

default.htm
<html> <head> <title>Mon document</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Ma premire feuille de style</h1> </body> </html>

style.css
body { background-color: #FF0000; }

Placez maintenant les deux fichiers dans le mme dossier. Songez sauvegarder les fichiers avec les bonnes extensions (respectivement .htm et .css ) Ouvrez default.htm dans votre navigateur et constatez le fond rouge de la page. Flicitations ! Vous avez fabriqu votre premire feuille de style ! Vite la leon suivante o nous tudierons quelques proprits CSS.

mthodes volues pour positionner et contrler les images d'arrire-plan. Les proprits CSS suivantes seront expliques :

color background-color background-image background-repeat background-attachment background-position background

La couleur d'avant-plan : la proprit 'color'

La proprit color dcrit la couleur d'avant-plan d'un lment. Par exemple, supposons que nous voulions tous les titres du document en rouge fonc. Les titres sont tous baliss avec l'lment HTML <h1>. Le code suivant donne aux lments <h1> une couleur rouge.
h1 { color: #ff0000; }

Afficher un exemple

On peut dfinir les couleurs avec des valeurs hexadcimales comme dans l'exemple prcdent (#ff0000), ou avec les noms des couleurs ("red"), ou avec des valeurs RGB (rgb(255,0,0)).

La proprit 'background-color'
La proprit background-color dcrit la couleur d'arrire-plan des lments. L'lment <body> est le rceptacle de tout le contenu du document HTML. Pour changer la couleur d'arrire-plan d'une page entire, il faudrait donc appliquer la proprit 'backgroundcolor' l'lment <body>. On peut aussi appliquer une couleur d'arrire-plan d'autres lments y compris les titres et le texte. Dans l'exemple ci-dessous, Des couleurs d'arrire-plan diffrentes sont appliques aux lments <body> et <h1>.
body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; }

Afficher un exemple

Remarquez que nous avons appliqu deux proprits <h1> en les sparant par un pointvirgule.

Les images d'arrire-plan [background-image]

La proprit CSS background-image sert insrer une image d'arrire-plan. Comme exemple d'image d'arrire-plan, nous utilisons le papillon ci-dessous. Vous pouvez tlcharger l'image pour l'utiliser sur votre propre ordinateur (en cliquant sur le bouton de droite de la souris et en slectionnant Enregistrer l'image sous , ou vous pouvez utiliser une autre image si vous voulez.

Pour insrer l'image du papillon en arrire-plan d'une page Web, appliquez simplement la proprit background-image l'lment <body> et indiquez le chemin de l'image.
body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; }

Afficher un exemple

Remarquez la faon dont nous avons indiqu le chemin de l'image avec url("butterfly.gif"). Cela signifie que l'image se trouve dnas le mme dossier que la feuille de style. On peut aussi appeler des images dans d'autres dossiers avec url("../images/butterfly.gif"), ou mme sur Internet en donnant l'adresse complte du fichier : url("http://www.html.net/butterfly.gif").

Rpter l'image d'arrire-plan [background-repeat]

Avez-vous remarqu, dans l'exemple prcdent, que le papillon tait rpt par dfaut horizontalement et verticalement pour couvrir la totalit de l'cran ? Ce comportement est contrl par la proprit background-repeat. Le tableau suivant dcrit les quatre valeurs diffrentes de background-repeat. Valeur
Background-repeat: repeat-x background-repeat: repeat-y background-repeat: repeat background-repeat: norepeat

Description L'image se rpte horizontalement L'image se rpte verticalement L'image se rpte horizontalement et verticalement L'image ne se rpte pas

Exemple Afficher un exemple Afficher un exemple Afficher un exemple Afficher un exemple

Par exemple, pour viter la rptition d'une image d'arrire-plan, le code devrait ressembler ceci :
body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; }

Afficher un exemple

Bloquer l'image d'arrire-plan [background-attachment]

La proprit background-attachment dfinit si l'image d'arrire-plan est fixe ou bien dfile avec l'lment conteneur. Une image d'arrire-plan bloque ne bougera pas avec le texte lorsque le lecteur fait dfiler la page, au contraire d'une image d'arrire-plan non bloque qui dfilera avec le texte de la page Web. Le tableau suivant dcrit les deux valeurs diffrentes de background-attachment. Cliquez sur les exemples pour voir la diffrence entre dfiler et fix. Valeur
Background-attachment: scroll

Description L'image dfile avec la page (non bloque)

Exemple Afficher un exemple

Background-attachment: fixed

L'image est bloque

Afficher un exemple

Par exemple, le code suivant bloquera l'image d'arrire-plan.

body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; }

Afficher un exemple

Positionner une image d'arrire-plan [backgroundposition]

Par dfaut, l'image d'arrire-plan se positionnera dans le coin suprieur gauche de l'cran. La proprit background-position permet de changer cette position prdfinie et de placer l'image d'arrire-plan n'importe o l'cran. Il y a plusieurs mthodes pour fixer la valeur de background-position. Par contre, elles se prsentent toutes sous la forme d'un jeu de coordonnes. Par exemple, la valeur'100px 200px' positionne l'image d'arrire-plan 100px depuis la gauche et 200px depuis le haut de la fentre du navigateur. Les coordonnes peuvent s'exprimer en pourcentages de la largeur de l'cran, ou en units fixes (pixels, centimtres, etc.), ou on peut utiliser les mots-cls "top", "bottom", "center", "left" ou "right". Le modle suivant illustre ce systme :

Le tableau suivant fournit quelques exemples. Valeur

background-position: 2cm 2cm background-position: 50% 25% background-position: top right

Exemple L'image est positionne 2 cm de la gauche et Afficher un 2 cm du haut de la page exemple L'image est positionne au centre et un quart de la page vers le bas L'image est positionne au coin suprieur droit de la page Afficher un exemple Afficher un exemple

Description

L'exemple de code suivre positionne l'image d'arrire-plan dans le coin infrieur droit de la page :
body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; }

Afficher un exemple

Concision [background]
La proprit background est un raccourci pour toutes les proprits listes dans cette leon. Avec background, on peut comprimer plusieurs proprits et donc crire une feuille de style plus courte, ce qui en facilite la lecture. Par exemple, les cinq lignes suivantes :
background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;

On peut obtenir le mme rsultat avec background en une seule ligne de code :
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

La liste de commande est la suivante :

[background-color] | [background-image] | [background-repeat] | [backgroundattachment] | [background-position]

Si une proprit manque, elle prend automatiquement sa valeur par dfaut. Par exemple, si on supprime background-attachment et background-position de l'exemple :
background: #FFCC66 url("butterfly.gif") no-repeat;

Ces deux proprit non dfinies prendront tout simplement leurs valeurs par dfaut, qui sont comme chacun sait "scroll" et "top left".

Rsum
Dans cette leon, vous avez dj appris des techniques nouvelles qui seraient impossibles avec HTML. L'aventure continue dans la leon suivante qui examine la large gamme de possibilits de CSS pour dcrire les polices. problme des polices spcifiques choisies pour un site Web qui ne sont visibles que si elles sont installes sur l'ordinateur utilis pour accder au site Web. Les proprits CSS suivantes seront dcrites :

font-family font-style font-variant

font-weight font-size font

La famille de polices [font-family]

La proprit font-family sert indiquer la liste prioritaire des polices utiliser pour l'affichage d'un lment donn ou d'une page Web. Si la premire police de la liste n'est pas disponible sur l'ordinateur utilis pour accder au site, la police suivante est essaye et ainsi de suite jusqu' ce qu'il y en ait une qui convienne. Il y a deux types de noms pour catgoriser les polices : les noms de familles et les familles gnriques. Les deux termes sont expliqus ci-dessous. Le nom de famille Comme exemples de noms de familles (souvent appeles polices ), on trouve "Arial", "Times New Roman" ou "Tahoma". La famille gnrique On peut dcrire les familles gnriques comme des groupes de noms de familles ayant des aspects uniformes. Un exemple est celui de la famille sans srif, qui est un ensemble de polices sans empattement . On peut illustrer cette diffrence comme ceci :

Lorsqu'on liste des polices pour un site Web, on commence naturellement par la police prfre suivie par des polices de remplacement. Il est recommand de terminer la liste par une famille gnrique. Ainsi, la page s'affichera au moins avec une police de la mme famille si aucune des polices indiques n'tait disponible.

Un exemple de liste prioritaire de polices ressemblerait ceci :

h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

Afficher un exemple

Les titres marqus par des lments <h1> s'afficheront dans la police "Arial". Si elle n'est pas installe dans l'ordinateur de l'utilisateur, la police "Verdana" sera utilise la place. Si ces deux polices sont indisponibles, les titres s'afficheront dans une police de la famille sansserif. Remarquez que le nom de la police "Times New Roman" contient des espaces, et elle est donc liste entre des guillemets.

Le style des polices [font-style]

La proprit font-style dfinit si le style de la police concerne doit tre normal, italic ou oblique. Dans l'exemple suivre, tous les titres baliss par des lments <h2> s'afficheront en italiques.
h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif; font-style: italic;}

Afficher un exemple

Les variantes de polices [font-variant]

La proprit font-variant sert choisir entre les variantes normal ou small-caps (N.d.T. petites capitales) d'une police. Une police small-caps utilise des lettres en capitales de taille rduite la place des lettres en minuscules. Embrouill ? tudiez ces exemples :

Si la proprit font-variant vaut small-caps et qu'aucune police en petites capitales n'est disponible, le navigateur affichera trs probablement le texte en capitales la place.
h1 {font-variant: small-caps;} h2 {font-variant: normal;}

Afficher un exemple

La graisse des polices [font-weight]

La proprit font-weight dcrit avec quel degr de graisse (ou de noir ) prsenter la police. Elle peut avoir une graisse normal ou bold (N.d.T. caractres gras). Certains navigateurs permettent mme d'utiliser des nombres entre 100 et 900 (les centaines) pour dcrire la graisse de la police.
p {font-family: arial, verdana, sans-serif;} td {font-family: arial, verdana, sans-serif; font-weight: bold;}

Afficher un exemple

Le corps des polices [font-size]

Le corps d'une police se rgle par la proprit font-size. On peut choisir parmi beaucoup d'units diffrentes (par exemple, pixels et pourcentages) pour dcrire les corps des polices. Dans ce tutoriel, nous nous concentrerons sur les units les plus courantes et appropries. Les exemples comprennent :
h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;}

Afficher un exemple

Il existe une diffrence essentielle entre les quatre units prcdentes. Les units px et pt font que le corps de la police est absolu, tandis que % et em permettent l'utilisateur de l'ajuster si ncessaire. Beaucoup d'utilisateurs ont des handicaps, sont gs ou simplement ptissent d'une mauvaise vue ou de la pitre qualit de leur moniteur. Pour rendre votre site Web accessible tous, vous devriez utiliser des units ajustables telles que % ou em . Voici une illustration de la faon d'ajuster la taille du texte dans Mozilla Firefox et dans Internet Explorer. Essayez vous-mme (super, n'est-ce pas ?)

Concision [font]
Avec la proprit raccourcie font, il est possible de couvrir toutes les diffrentes proprits de police en un coup. Par exemple, prenons ces quatre lignes de code servant dcrire les proprits de police de :

<p>

p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; }

Avec la proprit raccourcie, on peut simplifier le code :

p { font: italic bold 30px arial, sans-serif; }

L'ordre des valeurs de la proprit font est le suivant :

font-style | font-variant | font-weight | font-size | font-family

Rsum
Vous venez d'apprendre quelques-unes des possibilits lies aux polices. Rappelez-vous que l'un des avantages majeurs de CSS pour dfinir les polices est que vous pouvez, tout moment, changer les polices d'un site Web entier. CSS fait gagner du temps et facilite la vie. Dans la leon suivante, nous verrons le texte. pour la prsentation du texte. Les proprits suivantes seront dcrites :

text-indent text-align text-decoration letter-spacing text-transform

L'indentation du texte [text-indent]

La proprit text-indent permet d'ajouter une touche d'lgance aux paragraphes de texte en appliquant une indentation la premire ligne du paragraphe. Dans l'exemple suivant, un alina de 30px est appliqu tous les paragraphes baliss par un lment <p> :
p { text-indent: 30px; }

Afficher un exemple

L'alignement du texte [text-align]

La proprit CSS text-align correspond l'attribut align utilis dans les versions anciennes de HTML. Le texte peut tre align gauche (left), droite (right) ou centr (center). Outre cela, la valeur justify tirera chaque ligne de sorte que les marges gauche et droite soient droites toutes les deux. Cette mise en page est courante, par exemple, dans les journaux et les magazines.

Dans l'exemple suivant, le texte des titres du tableau <th> est align droite, tandis que les donnes du tableau <td> sont centres. Enfin, les paragraphes de texte normaux sont justifis :
th { text-align: right; } td { text-align: center; } p { text-align: justify; }

Afficher un exemple

La dcoration du texte [text-decoration]

La proprit text-decoration permet d'ajouter des dcorations ou effets diffrents au texte. Par exemple, on peut souligner le texte, le barrer, ou tracer un trait au-dessus, etc. Dans l'exemple suivant, les lments <h1> sont des titres souligns, les lments <h2> sont des titres avec un trait au-dessus et les lments <h3> des titres barrs.
h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }

Afficher un exemple

L'espacement des lettres [letter-spacing]

L'espacement entre les caractres du texte peut tre dfini avec la proprit letter-spacing. La valeur de la proprit est simplement celle de l'espacement dsir. Par exemple, si vous voulez un espacement de 3px entre les lettres d'un paragraphe de texte <p>, et de 6px entre les lettres des titres <h1>, voici le code utiliser :
h1 { letter-spacing: 6px; }

p { letter-spacing: 3px; }

Afficher un exemple

La transformation du texte [text-transform]

La proprit text-transform contrle la capitalisation du texte. On peut choisir une capitalisation initiale, une mise en majuscules ou une mise en minuscules, indpendamment de l'aspect du texte original dans le code HTML. Voici un exemple avec le mot titre que l'on peut prsenter l'utilisateur comme TITRE ou Titre . La proprit text-transform admet quatre valeurs possibles : capitalize Elle capitalise la premire lettre de chaque mot. Par exemple, marcel dupond deviendra Marcel Dupond . uppercase Elle convertit toutes les lettres en majuscules. Par exemple, marcel dupond deviendra MARCEL DUPOND . lowercase Elle convertit toutes les lettres en minuscules. Par exemple, MARCEL DUPOND deviendra marcel dupond . none Aucune transformation, et le texte se prsente tel qu'il apparat dans le code HTML. Pour exemple, nous utiliserons une liste de noms, baliss avec des lments <li> (list-item). Disons que nous voulons que les noms soient capitaliss et les titres soient en lettres majuscules. Examinez le code HTML de cet exemple et vous constaterez que le texte est en fait en minuscules.
h1 { text-transform: uppercase; } li { text-transform: capitalize; }

Afficher un exemple

Rsum
Avec les trois dernires leons, nous avons dj appris beaucoup de proprits CSS, mais il y a plus encore. Dans la leon suivante, nous aborderons les liens.

etc.). La nouveaut, c'est que CSS permet de dfinir ces proprits diffremment, selon que le lien est visit, non visit, activ, ou si le curseur le survole. Cela permet d'ajouter des effets plaisants et utiles vos sites Web. Pour contrler ces effets, on utilise ce qu'on appelle des pseudo-classes.

Qu'est-ce qu'une pseudo-classe ?

Une pseudo-classe permet de tenir compte de conditions et vnements diffrents pour la dfinition d'une proprit sur une balise HTML. Voyons un exemple. Comme vous le savez, les liens sont dfinis en HTML avec des balises <a>. On peut donc utiliser a comme slecteur dans CSS :
a { color: blue; }

Un lien est susceptible d'avoir plusieurs tats. Par exemple, il peut tre visit ou non. Vous pouvez utiliser des pseudo-classes pour assigner des styles diffrents aux liens visits et non visits.
a:link { color: blue; } a:visited { color: red; }

Utilisez respectivement a:link et a:visited pour les liens non visits et pour ceux visits. Les liens actifs ont pour pseudo-classe a:active, et la pseudo-classe a:hover intervient lorsque le curseur survole le lien. Nous allons maintenant examiner chacune des quatre pseudo-classes avec des exemples et des explications supplmentaires.

pseudoLa pseudo-classe :link

La pseudo-classe :link est utilise pour les liens menant aux pages que l'utilisateur n'a pas visites. Dans le code suivant, les liens non visits seront en bleu clair.
a:link { color: #6699CC; }

Afficher un exemple

pseudoLa pseudo-classe :visited

La pseudo-classe :visited est utilise pour les liens menant aux pages que l'utilisateur a visites. Par exemple, le code suivant donnera la couleur mauve fonc tous les liens visits :
a:visited { color: #660099; }

Afficher un exemple

pseudoLa pseudo-classe :active

La pseudo-classe :active est utilise pour les liens qui sont activs. Cet exemple montre des liens activs dont la couleur d'arrire-plan est jaune :
a:active { background-color: #FFFF00; }

Afficher un exemple

La pseudo-classe :hover pseudoLa pseudo-classe :hover est utilise lorsque le pointeur de la souris survole un lien. On peut s'en servir pour crer des effets intressants. Par exemple, si nous voulons que nos liens soient orange et en italiques au survol du pointeur, le code CSS devrait tre le suivant :
a:hover { color: orange; font-style: italic; }

Afficher un exemple

Exemple 1 : Effet au survol du lien par le curseur

Crer des effets diffrents pour le survol du pointeur sur les liens est trs populaire. Nous examinerons donc quelques exemples de plus pour la pseudo-classe :hover.

Example 1a : Espacement des lettres

Comme indiqu dans la leon 5, on peut ajuster l'espacement entre les lettres avec la proprit letter-spacing. Cela s'applique aux liens pour un effet spcial :
a:hover { letter-spacing: 10px; font-weight:bold; color:red; }

Afficher un exemple

Exemple 1b : MAJUSCULES et minuscules

Dans la leon 5, nous avons vu la proprit text-transform qui permet de basculer entre des lettres majuscules et minuscules. Elle peut aussi servir pour crer un effet sur les liens :
a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }

Afficher un exemple

Les deux exemples donnent un aperu des possibilits de combinaison des diffrentes proprits presque illimites. Vous pouvez crer vos propres effets, essayez-donc !

Exemple 2 : Supprimer le trait sous les liens

On pose souvent la question : Comment supprimer le trait sous les liens ? Vous devriez valuer soigneusement s'il est ncessaire de supprimer le soulign car cela pourrait rduire considrablement la convivialit de votre site Web. Le public est habitu aux liens bleus souligns des pages Web et sait qu'on peut cliquer dessus. Mme ma maman le sait ! Si vous changez le soulign et la couleur des liens, il y a de fortes chances que l'utilisateur s'embrouille et donc n'exploite pas tout le contenu de votre site Web. Ceci dit, il est trs facile de supprimer le soulign des liens. Comme vous vous en rappelez de la leon 5, on peut utiliser la proprit text-decoration pour indiquer de souligner le texte ou non. Pour supprimer le soulign, il suffit de lui donner la valeur none.
a { text-decoration:none; }

Autrement, vous pouvez fixer la valeur de text-decoration en mme temps que celles d'autres proprits pour les quatre pseudo-classes.
a:link { color: blue; text-decoration:none; } a:visited { color: purple; text-decoration:none; } a:active { background-color: yellow; text-decoration:none; } a:hover { color:red; text-decoration:none; }

Afficher un exemple

Rsum
Dans cette leon, vous avez appris les pseudo-classes, en utilisant quelques proprits vues dans les leons prcdentes. Cela devrait vous donner une ide des possibilits offertes par CSS. Dans la leon suivante, nous vous apprendrons comment dfinir les proprits d'lments et de groupes d'lments spcifiques. attributs class et id pour dfinir les proprits d'lments slectionns. Comment donner un titre particulier une autre couleur que celle des autres titres du site Web ? Comment regrouper les liens en diffrentes catgories et donner chacune un style spcial ? Ce sont les types de questions auxquelles nous rpondrons ici.

Le regroupement d'lments dans une classe

Supposons que nous ayons deux listes de liens vers les diffrents cpages utiliss pour des vins blancs et des vins rouges. Voici quoi ressemble le code HTML :
<p>Cpages de vins blancs :</p> <ul> <li><a href="ri.htm">Riesling</a></li> <li><a href="ch.htm">Chardonnay</a></li> <li><a href="pb.htm">Pinot Blanc</a></li> </ul>

<p>Cpages de vins rouges :</p> <ul> <li><a href="cs.htm">Cabernet Sauvignon</a></li> <li><a href="me.htm">Merlot</a></li> <li><a href="pn.htm">Pinot Noir</a></li> </ul>

Afficher un exemple

Nous voulons ensuite que les liens des vins blancs soient jaunes, que ceux des vins rouges soient rouges, et que les autres liens de la page Web restent bleus. Pour y parvenir, nous rpartissons les liens en deux catgories. On assigne une classe chaque lien avec l'attribut class. Essayons de dfinir quelques classes pour l'exemple prcdent :
<p>Cpages de vins blancs :</p> <ul> <li><a href="ri.htm" class="whitewine">Riesling</a></li> <li><a href="ch.htm" class="whitewine">Chardonnay</a></li> <li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li> </ul> <p>Cpages de vins rouges :</p> <ul> <li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li> <li><a href="me.htm" class="redwine">Merlot</a></li> <li><a href="pn.htm" class="redwine">Pinot Noir</a></li> </ul>

Par la suite, on peut dfinir des proprits spciales pour les liens appartenant respectivement aux catgories whitewine et redwine .
a { color: blue; } a.whitewine { color: #FFBB00; } a.redwine { color: #800000; }

Afficher un exemple

Comme affich dans l'exemple, on peut dfinir les proprits des lments appartenant une certaine classe en utilisant .le_nom_de_ladite_classe dans la feuille de style du document.

L'identification d'un lment avec id

Outre le regroupement d'lments, on peut avoir besoin d'identifier un lment unique. Pour cela, on utilise l'attribut id. L'attribut id a ceci de spcial qu'il ne peut pas y avoir deux lments avec le mme id dans le document. Chaque id doit tre unique. Dans le cas contraire, il faudrait utiliser l'attribut class la place. Voyons maintenant un exemple d'utilisation possible de id :
<h1>Chapitre .... <h2>Chapitre .... <h2>Chapitre .... <h1>Chapitre .... <h2>Chapitre .... <h3>Chapitre .... 1</h1> 1.1</h2> 1.2</h2> 2</h1> 2.1</h2> 2.1.2</h3>

Il pourrait s'agir des titres d'un document partag en chapitres ou en paragraphes. Il semble naturel d'assigner un id chaque chapitre comme ceci :
<h1 id="c1">Chapitre 1</h1> .... <h2 id="c1-1">Chapitre 1.1</h2> .... <h2 id="c1-2">Chapitre 1.2</h2> .... <h1 id="c2">Chapitre 2</h1> .... <h2 id="c2-1">Chapitre 2.1</h2> .... <h3 id="c2-1-2">Chapitre 2.1.2</h3> ....

Disons que le titre du chapitre 1.2 doive apparatre en rouge. Avec CSS, cela donne :
#c1-2 { color: red; }

Afficher un exemple

Comme affich dans l'exemple prcdent, on peut dfinir les proprits d'un lment spcifique en utilisant #le_nom_dudit_id dans la feuille de style du document.

Rsum
Dans cette leon, nous avons vu que l'on pouvait dfinir les proprits d'lments spcifiques l'aide des slecteurs class et id. Dans la leon suivante, nous tudierons de plus prs deux lments HTML largement employs avec CSS : <span> et <div>. Dans cette leon, nous verrons de plus prs l'utilisation des deux lments <span> et <div>, et leur importance centrale pour CSS.

Le regroupement avec <span> Le regroupement avec <div>

Le regroupement avec <span>

L'lment <span> est ce qu'on pourrait appeler un lment neutre, qui n'ajoute rien au document en lui-mme. Mais CSS peut utiliser l'lment <span> pour ajouter des caractristiques visuelles des parties spcifiques du texte des documents. Cette citation de Benjamin Franklin en constitue un exemple :
<p>Tt couch et tt lev fortifie, enrichit et rend avis.</p>

Supposons que les avantages aux yeux de M. Franklin de ne pas gaspiller son sommeil soient accentus en rouge. Dans ce but, nous pouvons baliser les avantages avec des lments <span>. Chaque span reoit alors un attribut class dfini ainsi dans la feuille de style :
<p>Tt couch et tt lev <span class="benefit">fortifie</span>, <span class="benefit">enrichit</span> et <span class="benefit">rend avis</span>.</p>

Le code CSS associ :

span.benefit { color:red; }

Afficher un exemple

Bien sr, vous pouvez aussi utiliser l'attribut id pour ajouter du style aux lments <span>, tant que vous appliquez un id unique chacun des trois lments <span>, comme appris dans la leon prcdente.

Le regroupement avec <div>

Alors que <span> s'utilise dans un lment de type bloc comme vu prcdemment, <div> sert regrouper un ou plusieurs lments de type bloc. Hormis cette diffrence, le regroupement avec <div> fonctionne plus ou moins de la mme faon. Voyons un exemple avec deux listes de prsidents des tats-Unis rpartis selon leur affiliation politique :
<div id="democrats"> <ul> <li>Franklin D. Roosevelt</li> <li>Harry S. Truman</li> <li>John F. Kennedy</li> <li>Lyndon B. Johnson</li> <li>Jimmy Carter</li> <li>Bill Clinton</li> </ul> </div> <div id="republicans"> <ul> <li>Dwight D. Eisenhower</li> <li>Richard Nixon</li> <li>Gerald Ford</li> <li>Ronald Reagan</li> <li>George Bush</li> <li>George W. Bush</li> </ul> </div>

Dans notre feuille de style, nous pouvons utiliser le regroupement exactement de la mme faon que prcdemment :
#democrats { background:blue; } #republicans { background:red; }

Afficher un exemple

Dans les exemples prcdents, nous avons utilis les lments <div> et <span> pour des choses trs simples telles que les couleurs du texte et de l'arrire-plan. Ces deux lments ont le potentiel pour des choses beaucoup plus volues, mais nous ne les abordons pas ici. Cela interviendra plus loin dans le tutoriel.

Rsum

Dans les leons 7 et 8, vous avez vu les slecteurs id et class, et les lments span et div. Vous tes maintenant capable de regrouper et d'identifier, plus ou moins, toutes les parties d'un document, ce qui constitue un grand pas vers la matrise de CSS. Dans la leon 9, nous introduirons le modle des botes.

marges, des bordures, des espacements et du contenu de chaque lment. Le diagramme suivant montre la structure du modle des botes :

Le modle des botes dans CSS

L'illustration ci-dessus peut sembler trs thorique, essayons-donc d'utiliser le modle dans un cas rel avec un titre et du texte. Le code HTML de notre exemple est le suivant (d'aprs la Dclaration universelle des droits de l'homme) :
<h1>Article 1:</h1> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood</p>

En ajoutant de la couleur et des informations de police, l'exemple pourrait se prsenter comme suit :

L'exemple contient deux lments : <h1> et <p>. On peut illustrer le modle de botes des deux lments de la faon suivante :

Quoique cela puisse sembler un peu compliqu, le schma montre chaque lment HTML entour par des botes. Des botes que nous pouvons ajuster avec CSS.

Rsum
Cette leon introduisait le modle des botes. Dans les trois leons suivantes, nous tudierons la cration et le contrle des lments dans le modle des botes.

Voir aussi

Leon suivante : Margin & padding Leon prcdente : Le regroupement d'lments (span et div)

es proprits margin et padding.

Fixer la marge d'un lment Fixer l'espacement dans un lment

Fixer la marge d'un lment

Un lment a quatre cts : droit ("right"), gauche ("left"), suprieur ("top") et infrieur ("bottom"). La marge est la distance entre chaque ct et l'lment avoisinant (ou les bordures du document). Cf. galement l'illustration dans la leon 9. Comme premier exemple, nous allons voir comment dfinir les marges du document mme, c'est--dire de l'lment <body>. L'illustration suivante montre les marges voulues pour les pages.

Le code CSS serait le suivant :

body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; }

Ou bien plus lgant et concis :

body { margin: 100px 40px 10px 70px; }

Afficher un exemple

Vous pouvez fixer pareillement les marges sur presque tous les lments. Par exemple, on peut choisir de dfinir les marges de tous les paragraphes de texte baliss avec <p> :

body { margin: 100px 40px 10px 70px; } p { margin: 5px 50px 5px 50px; }

Afficher un exemple

Fixer l'espacement dans un lment

L'espacement peut aussi tre assimil un remplissage . Cela peut se comprendre dans la mesure o l'espacement n'affecte pas la distance de l'lment aux autres lments mais dfinit seulement la distance interne entre la bordure et le contenu de l'lment. L'utilisation de l'espacement peut tre illustre par ce simple exemple o tous les titres ont des couleurs d'arrire-plan :
h1 { background: yellow; } h2 { background: orange; }

Afficher un exemple

En dfinissant l'espacement des titres, on change le remplissage autour du texte dans chaque titre :
h1 { background: yellow; padding: 20px 20px 20px 80px; } h2 { background: orange; padding-left:120px; }

Afficher un exemple

Rsum

Vous commencez matriser le modle des botes dans CSS. Dans la leon suivante, nous tudierons de plus prs comment colorier les diffrentes bordures et comment dessiner le contour des lments. des options n'en plus finir pour l'utilisation des bordures dans vos pages.

border-width border-color border-style Exemples de dfinitions de bordures border

L'paisseur des bordures [border-width]

L'paisseur des bordures est dfinie par la proprit border-width, dont les valeurs peuvent tre "thin", "medium" et "thick", ou une valeur numrique en pixels. La figure ci-dessous illustre le systme :

La couleur des bordures [border-color]

La proprit border-color dfinit la couleur d'une bordure. Des valeurs de couleur normales sont, par exemple, "#123456", "rgb(123,123,123)" ou "yellow" .

Les types de bordures [border-style]

On peut choisir parmi plusieurs types de bordures. Voici huit types de bordures diffrentes tels qu'Internet Explorer 5.5 les interprte. Toutes les bordures ont la couleur "gold" et une paisseur valant "thick" mais elles peuvent naturellement s'afficher dans d'autres couleurs et paisseurs. On peut utiliser les valeurs "none" ou "hidden" si on ne veut aucune bordure.

Exemples de dfinitions de bordures

Les trois proprits dcrites prcdemment peuvent tre runies pour chaque lment et donc produire des bordures diffrentes. Pour illustrer cela, voyons un document o nous dfinissons des bordures diffrentes pour <h1>, <h2>, <ul> et <p>. Le rsultant n'est peut-tre pas trs beau mais il montre quelques-unes des nombreuses possibilits :
h1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } p { border-width: 1px; border-style: dashed; border-color: blue; } ul { border-width: thin; border-style: solid;

border-color: orange; }

Afficher un exemple

Il est galement possible de dclarer des proprits spciales pour les bordures suprieures, infrieures, gauches ou droites. L'exemle suivant montre comment le faire :
h1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; }

Afficher un exemple

Concision [border]
Comme pour beaucoup d'autres proprits, on peut concentrer plusieurs proprits en une seule avec border. Voici un exemple :
p { border-width: 1px; border-style: solid; border-color: blue; }

Il peut se concentrer en :
p { border: 1px solid blue; }

Rsum

Dans cette leon, vous avez eu un aperu des options illimites offertes par CSS pour les bordures de vos pages. Dans la leon suivante, nous verrons comment dfinir la hauteur et la largeur dans le modle des botes.

Voir aussi

Leon suivante : La hauteur et la largeur Leon prcdente : Margin & padding

nous verrons comment dfinir facilement la hauteur et la largeur d'un lment.

Fixer la largeur [width] Fixer la hauteur [height]

Fixer la largeur [width]

La proprit width permet de dfinir la largeur d'un lment. L'exemple simplifi ci-dessous nous montre une bote o on peut taper du texte :
div.box { width: 200px; border: 1px solid black; background: orange; }

Afficher un exemple

Fixer la hauteur [height]

Dans l'exemple prcdent, remarquez la hauteur de la bote fixe par son contenu. On peut affecter la hauteur d'un lment avec la proprit height. Essayons de rendre la bote de l'exemple haute de 500px :
div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; }

Afficher un exemple

Rsum
Les leons 9, 10, 11 et 12 ont introduit le modle des botes dans CSS. Comme vous pouvez le constater, le modle des botes offre beaucoup d'options nouvelles. Vous auriez pu utiliser des tables HTML pour vos dispositions, mais avec CSS et le modle des botes vous devez maintenant tre capable d'obtenir des prsentations lgantes, plus prcises et conformes aux recommandations du W3C.

Voir aussi

Leon suivante : Les lments flottants (les flottants) Leon prcdente : Les bordures

Dire que la boite et son contenu peut flotter soit droite, soit gauche dans un document (ou dans la bote conteneur), cf. la description du modle des botes dans la leon 9. La figure suivante illustre le principe :

Si par exemple nous voulions qu'un texte s'enroule autour d'une image, le rsultant serait le suivant :

Comment a fonctionne ?
Voici le code HTML de l'exemple prcdent :
<div id="picture"> <img src="bill.jpg" alt="Bill Gates"> </div> <p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>

Pour que l'image flotte gauche et que le texte l'entoure, il suffit de dfinir la largeur de la bote entourant l'image puis de donner la proprit float la valeur "left" :
#picture { float:left; width: 100px; }

Afficher un exemple

Un autre exemple avec des colonnes

Les flottants peuvent aussi servir pour le colonnage d'un document. Pour crer les colonnes, il suffit de les structurer dans le code HTML avec des lments <div> de la faons suivante :
<div id="column1"> <p>Haec disserens qua de re agatur et in quo causa consistat non videt...</p> </div> <div id="column2"> <p>causas naturales et antecedentes,

idciro etiam nostrarum voluntatum...</p> </div> <div id="column3"> <p>nam nihil esset in nostra potestate si res ita se haberet...</p> </div>

Une fois fixe la largeur des colonnes (par exemple 33%), on fait simplement flotter chaque colonne gauche en dfinissant la proprit float :
#column1 { float:left; width: 33%; } #column2 { float:left; width: 33%; } #column3 { float:left; width: 33%; }

Afficher un exemple

La proprit float admet les valeurs "left", "right" ou "none".

La proprit clear
la proprit clear sert contrler le comportement des lments qui viennent aprs les lments flottants dans le document. Par dfaut, les lments suivre remontent pour combler l'espace dispobible libr lorsqu'une bote flotte d'un ct. Examinez l'exemple prcdent dans lequel le texte se place automatiquement sous la photo de Bill Gates. La proprit clear admet les valeurs "left", "right", "both" ou "none". Le principe est tel que, par exemple, si la valeur de clear d'une bote est fixe "both", la bordure suprieure de la marge de cette bote se trouvera toujours sous la bordure de la marge infrieure des botes flottantes ventuelles venant du dessus.
<div id="picture"> <img src="bill.jpg" alt="Bill Gates"> </div> <h1>Bill Gates</h1> <p class="floatstop">causas naturales et antecedentes,

idciro etiam nostrarum voluntatum...</p>

Pour empcher que le texte ne flotte ct de l'image, nous pouvons ajouter le code CSS suivant :
#picture { float:left; width: 100px; } .floatstop { clear:both; }

Afficher un exemple

Rsum
Les flottants sont trs utiles dans beaucoup de situations, et on les utilisera souvent en mme temps qu'un positionnement. Dans la leon suivante, nous tudierons comment placer une bote en position relative ou bien absolue.

Voir aussi

Leon suivante : Le positionnement des lments Leon prcdente : La hauteur et la largeur

nombreuses possibilits pour concevoir une prsentation complexe et prcise. Cette leon abordera les sujets suivants :

Le principe du positionnement CSS Le positionnement absolu Le positionnement relatif

Le principe du positionnement CSS

Imaginons la fentre du navigateur comme un systme de coordonnes :

Le principe du positionnement CSS fait que l'on peut positionner une bote n'importe o dans le systme de coordonnes. Supposons que nous voulions positionner un titre. D'aprs le modle des botes (cf. la leon 9), le titre apparatra de cette faon:

Si nous voulons positionner ce titre 100px du haut et 200px de la gauche du document, notre code CSS pourrait tre le suivant :
h1 { position:absolute; top: 100px; left: 200px; }

Le rsultat sera le suivant :

Comme vous pouvez le constater, le positionnement CSS est une technique de placement trs prcise des lments. Elle est beaucoup plus facile que l'utilisation de tables, d'images transparentes ou autres choses.

Le positionnement absolu
Un lment en position absolue ne reoit aucune place dans le document. Cela signifie qu'il ne laisse aucun espace vide aprs qu'il est positionn. On place un lment en position absolue en fixant la valeur de la proprit position "absolute". On peut alors utiliser les proprits left, right, top et bottom pour placer la bote. Comme exemple de positionnement absolu, nous avons choisi de placer quatre botes chaque coin du document :
#box1 { position:absolute; top: 50px; left: 50px; } #box2 { position:absolute; top: 50px; right: 50px; } #box3 { position:absolute; bottom: 50px; right: 50px; }

#box4 { position:absolute; bottom: 50px; left: 50px; }

Afficher un exemple

Le positionnement relatif
On place un lment en position relative en fixant la valeur de la proprit position "relative". La diffrence entre position absolue et position relative tient la faon dont la position est calcule. Pour un lment en position relative, elle est calcule d'aprs sa position originale dans le document. Cela signifie que l'on dplace l'lment vers la droite, la gauche, le haut ou le bas. Ainsi, l'lment obtient toujours un espace dans le document aprs qu'il est positionn. Comme exemple de positionnement relatif, nous pouvons positionner trois photos relativement leur position originale dans la page. Remarquez les espaces vides laisss par elles leurs positions originales dans le document :
#dog1 { position:relative; left: 350px; bottom: 150px; } #dog2 { position:relative; left: 150px; bottom: 500px; } #dog3 { position:relative; left: 50px; bottom: 700px; }

Afficher un exemple

Rsum
Dans les deux leons prcdentes, vous avez appris faire flotter et positionner les lments. Ces deux mthodes offrent beaucoup de possibilits de construction des pages sans utiliser les mthodes dmodes avec des tables et des images transparentes de HTML. Utilisez CSS la place : c'est plus prcis, plus avantageux et aussi plus facile d'entretien.

Voir aussi

Leon suivante : Une couche sur une couche avec z-index (les couches)
Leon prcdente : Les lments flottants (les flottants)

CSS agit dans trois dimensions : la hauteur, la largeur et la profondeur. Nous avons vu les deux premires dimensions dans les leons prcdentes. Dans celle-ci, nous allons apprendre ranger les lments en couches. Pour faire court, l'ordre dans lequel les lments recouvrent les autres. Pour cela, on peut assigner un numro (z-index) chaque lment. Le systme est tel qu'un lment de numro suprieur recouvre ceux de numro infrieur. Soit une suite royale dans une main de poker. On peut la prsenter de telle sorte que chaque carte ait un numro z-index :

Ici les numros se suivent (de 1 5), mais on peut obtenir le mme rsultat avec cinq numros diffrents. C'est la squence chronologique des numros (l'ordre) qui importe. Le code dans l'exemple avec les cartes pourrait tre celui-ci :
#ten_of_diamonds { position: absolute; left: 100px; top: 100px; z-index: 1; } #jack_of_diamonds { position: absolute; left: 115px; top: 115px; z-index: 2; } #queen_of_diamonds { position: absolute; left: 130px; top: 130px; z-index: 3; }

#king_of_diamonds { position: absolute; left: 145px; top: 145px; z-index: 4; } #ace_of_diamonds { position: absolute; left: 160px; top: 160px; z-index: 5; }

Afficher un exemple

La mthode est relativement simple mais les possibilits nombreuses. On peut placer des images sur du texte, ou du texte sur du texte, etc.

Rsum
Les couches peuvent servir dans beaucoup de situations. Par exemple, essayez d'utiliser zindex pour crer des effets dans les titres au lieu de les faire en image. Primo, le chargement du texte est plus rapide, et secundo, cela donne un meilleur rfrencement dans les moteurs de recherche.

Voir aussi

Leon suivante : Les standards du Web et la validation Leon prcdente : Le positionnement des lments

Microsoft, The Mozilla Foundation et beaucoup d'autres font partie du W3C et s'accordent sur les dveloppements futurs des standards. Si vous vous tes frott ne serait-ce qu'un peu la cration Web, vous savez probablement qu'il peut exister de grandes diffrences dans la prsentation des pages Web entre des navigateurs diffrents. La cration d'une page Web peut induire beaucoup de frustration et consommer beaucoup de temps, afin qu'elle puisse tre vue dans Mozilla, Internet Explorer, Opera et les autres navigateurs existants. Le concept des standards est de trouver un dnominateur commun pour l'utilisation des technologies Web. Cela signifie qu'un dveloppeur Web, en respectant les standards, a la certitude que son code fonctionnera mieux entre des plateformes diffrentes. Nous recommandons donc de vous appuyer sur les travaux du W3C et de valider votre code CSS pour respecter le standard.

Le validateur CSS

Pour faciliter le respect du standard CSS, le W3C a dvelopp un validateur, lequel lit les feuilles de style et renvoie un tat listant les erreurs et les avertissements au cas o votre code CSS ne serait pas valide. Pour valider vos feuilles de style, vous pouvez le faire directement depuis cette page. Remplacez simplement l'adresse URL qui apparat ici par celle de votre feuille de style et cliquez pour la valider. Le site Web du W3C vous informera alors des erreurs qui s'y trouveraient.
http://w w w .ht

Vrifier la feuille de style

Si le validateur ne trouve aucune erreur, l'image suivante s'affichera, et vous pourrez la placer sur votre site Web pour montrer que votre code est valid :

Le lien direct du validateur : http://jigsaw.w3.org/css-validator/

Voir aussi

Leon prcdente : Une couche sur une couche avec z-index (les couches)

Quels du web (par exemple, HTML, CSS, XML et autres). Microsoft, The Mozilla Foundation et beaucoup d'autres font partie du W3C et s'accordent sur les dveloppements futurs des standards. Si vous vous tes frott ne serait-ce qu'un peu la cration Web, vous savez probablement qu'il peut exister de grandes diffrences dans la prsentation des pages Web entre des navigateurs diffrents. La cration d'une page Web peut induire beaucoup de frustration et consommer beaucoup de temps, afin qu'elle puisse tre vue dans Mozilla, Internet Explorer, Opera et les autres navigateurs existants. Le concept des standards est de trouver un dnominateur commun pour l'utilisation des technologies Web. Cela signifie qu'un dveloppeur Web, en respectant les standards, a la certitude que son code fonctionnera mieux entre des plateformes diffrentes. Nous recommandons donc de vous appuyer sur les travaux du W3C et de valider votre code CSS pour respecter le standard.

Le validateur CSS
Pour faciliter le respect du standard CSS, le W3C a dvelopp un validateur, lequel lit les feuilles de style et renvoie un tat listant les erreurs et les avertissements au cas o votre code CSS ne serait pas valide.

Pour valider vos feuilles de style, vous pouvez le faire directement depuis cette page. Remplacez simplement l'adresse URL qui apparat ici par celle de votre feuille de style et cliquez pour la valider. Le site Web du W3C vous informera alors des erreurs qui s'y trouveraient.
http://w w w .ht

Vrifier la feuille de style

Si le validateur ne trouve aucune erreur, l'image suivante s'affichera, et vous pourrez la placer sur votre site Web pour montrer que votre code est valid :

Le lien direct du validateur : http://jigsaw.w3.org/css-validator/