Cours - CSS

Ecole ORIGINES
Feuilles de Style : CSS
2009-2010
Leon 1 : Qu'est-ce que CSS ?
Peut-tre avez-vous dj entendu parler de CSS sans vraiment savoir de quoi il s'agissait ? Dans cette leon, vous en saurez plus sur CSS et sur ce que 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.
Prof. : J.E. RAFIQ
Ecole ORIGINES
2009-2010
Leon 2 : Comment CSS fonctionne-t-il ?

Dans cette leon, vous apprendrez fabriquer votre premire feuille de style. Vous saurez ce qu'est le modle CSS de base et quels sont les codes 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 : Local - Dans la ligne (l'attribut style)

Une faon d'appliquer du style CSS HTML est celle avec l'attribut HTML 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>
style. En
Prof. : J.E. RAFIQ
Ecole ORIGINES
2009-2010
Mthode 2 : Global - Interne (l'lment style)

Une autre mthode consiste inclure le code CSS avec la balise HTML 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>
<style>. Par
Mthode 3 : Externe (un lien vers une feuille de style: un ficher)

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 fut, 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.
Prof. : J.E. RAFIQ
Ecole ORIGINES
2009-2010
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 !
Prof. : J.E. RAFIQ
Ecole ORIGINES
2009-2010
Leon 3 : Les couleurs et les arrires-plans

Dans cette leon, vous apprendrez comment appliquer des couleurs et des couleurs d'arrire-plan vos sites Web. Nous tudierons galement des 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; } 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; } Remarquez que nous avons appliqu deux proprits virgule.
<h1> en les sparant par un point-
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
Prof. : J.E. RAFIQ
Ecole ORIGINES
2009-2010
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; } 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.monsite.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 Description Background-repeat: repeat-x L'image se rpte horizontalement background-repeat: repeat-y L'image se rpte verticalement background-repeat: repeat L'image se rpte horizontalement et verticalement
background-repeat: no-repeat L'image ne se rpte pas 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; }
Prof. : J.E. RAFIQ
Ecole ORIGINES
2009-2010
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 Description Background-attachment: scroll L'image dfile avec la page (non bloque) Background-attachment: fixed L'image est bloque 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; }
Positionner une image d'arrire-plan [background-position]

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 :
Prof. : J.E. RAFIQ
Ecole ORIGINES
2009-2010
Le tableau suivant fournit quelques exemples. Valeur background-position: 2cm 2cm background-position: 50% 25% background-position: top right Description L'image est positionne 2 cm de la gauche et 2 cm du haut de la page 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
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; }
Concision [background]
La proprit 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 est un raccourci pour toutes les proprits listes dans cette
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".
Prof. : J.E. RAFIQ
Ecole ORIGINES
2009-2010
Leon 4 : Les polices

Dans cette leon, vous apprendrez ce que sont les polices et comment les appliquer avec CSS. Nous tudierons galement comment contourner le 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;}
Prof. : J.E. RAFIQ
Ecole ORIGINES
2009-2010
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;}
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;}
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;}
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;}
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 . Prof. : J.E. RAFIQ 10
Ecole ORIGINES
2009-2010
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
Prof. : J.E. RAFIQ
11
Ecole ORIGINES
2009-2010
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; }
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; }
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; }
L'espacement des lettres [letter-spacing]

L'espacement entre les caractres du texte peut tre dfini avec la proprit letterspacing. 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 : Prof. : J.E. RAFIQ 12
Ecole ORIGINES
2009-2010
h1 { letter-spacing: 6px; } p{ letter-spacing: 3px; }
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; }
Prof. : J.E. RAFIQ
13
Ecole ORIGINES
2009-2010
Leon 6 : Les liens

Vous pouvez appliquer aux liens ce que vous avez dj vu dans les leons prcdentes (c'est--dire changer les couleurs et les polices, les souligns, 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.
La 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; }
La 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; }
Prof. : J.E. RAFIQ
14
Ecole ORIGINES
2009-2010
La 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; }
La pseudo-classe :hover La 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; }
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 pseudoclasse :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; }
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; }
Prof. : J.E. RAFIQ
15
Ecole ORIGINES
2009-2010
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; }
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.
Prof. : J.E. RAFIQ
16
Ecole ORIGINES
2009-2010
Leon 7 : L'identification et le regroupement d'lments (class et id)

Parfois, on veut appliquer un style spcial un lment ou un groupe d'lments particuliers. Dans cette leon, nous tudierons comment utiliser les 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> 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>
Prof. : J.E. RAFIQ
17
Ecole ORIGINES
2009-2010
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; } 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 1</h1> .... <h2>Chapitre 1.1</h2> .... <h2>Chapitre 1.2</h2> .... <h1>Chapitre 2</h1> .... <h2>Chapitre 2.1</h2> .... <h3>Chapitre 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> ....
Prof. : J.E. RAFIQ
18
Ecole ORIGINES
2009-2010
Disons que le titre du chapitre 1.2 doive apparatre en rouge. Avec CSS, cela donne : #c1-2 { color: red; } 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.
Prof. : J.E. RAFIQ
19
Ecole ORIGINES
2009-2010
Leon 8 : Le regroupement d'lments (span et div)

Les lments <span> et <div> servent regrouper et structurer un document et seront souvent utiliss avec les attributs class et id. 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; } 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>
Prof. : J.E. RAFIQ
20
Ecole ORIGINES
<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>
2009-2010
Dans notre feuille de style, nous pouvons utiliser le regroupement exactement de la mme faon que prcdemment : #democrats { background:blue; } #republicans { background:red; } 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.
Prof. : J.E. RAFIQ
21
Ecole ORIGINES
2009-2010
Leon 9 : Le modle des botes

Le modle des botes de CSS dcrit les botes gnres pour les lments HTML. Il contient galement des options dtailles pour l'ajustement des 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 :
Prof. : J.E. RAFIQ
22
Ecole ORIGINES
2009-2010
L'exemple contient deux lments : deux lments de la faon suivante :
<h1> et <p>. On peut illustrer le modle de botes des
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.
Prof. : J.E. RAFIQ
23
Ecole ORIGINES
2009-2010
Leon 10 : Margin et padding

Dans la leon prcdente, nous introduisions le modle des botes. Dans cette leon, nous verrons comment changer la prsentation des lments avec les proprits margin et padding.
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; }
Prof. : J.E. RAFIQ
24
Ecole ORIGINES
2009-2010
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; }
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; } 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; }
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.
Prof. : J.E. RAFIQ
25
Ecole ORIGINES
2009-2010
Leon 11 : Les bordures

On peut utiliser des bordures pour beaucoup de choses, par exemple comme lment dcoratif ou pour souligner la sparation de deux choses. CSS offre 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.
Prof. : J.E. RAFIQ
26
Ecole ORIGINES
2009-2010
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 peuttre 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; } Il est galement possible de dclarer des proprits spciales pour les bordures suprieures, infrieures, gauches ou droites. L'exemle suivant montre comment le faire :
Prof. : J.E. RAFIQ
27
Ecole ORIGINES
2009-2010
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; }
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.
Prof. : J.E. RAFIQ
28
Ecole ORIGINES
2009-2010
Leon 12 : La hauteur et la largeur

Nous ne nous sommes pas beaucoup proccups, jusqu' maintenant, des dimensions des lments avec lesquels nous avons travaill. Dans cette leon, nous verrons comment dfinir facilement la hauteur et la largeur d'un lment.
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; }
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; }
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.
Prof. : J.E. RAFIQ
29
Ecole ORIGINES
2009-2010
Leon 13 : Les lments flottants (les flottants)

Un lment peut avoir une position flottante droite ou gauche avec la proprit float. C'est-dire que la bote 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>
Prof. : J.E. RAFIQ
30
Ecole ORIGINES
2009-2010
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; }
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%; } La proprit
float admet les valeurs "left", "right" ou "none".
Prof. : J.E. RAFIQ
31
Ecole ORIGINES
2009-2010
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; }
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.
Rfrence http://fr.html.net/tutorials/css/
Prof. : J.E. RAFIQ
32

Cours - CSS

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Cours - CSS

Hochgeladen von

Copyright:

Verfügbare Formate

Ecole ORIGINES

Feuilles de Style : CSS

Leon 1 : Qu'est-ce que CSS ?

CSS est l'abrviation de Cascading Style Sheets .

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

Quelle est la diffrence entre CSS et HTML ?

Quels sont les avantages de CSS ?

Prof. : J.E. RAFIQ

Feuilles de Style : CSS

Leon 2 : Comment CSS fonctionne-t-il ?

La syntaxe CSS de base

Appliquer CSS un document HTML

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

Prof. : J.E. RAFIQ

Feuilles de Style : CSS

Mthode 2 : Global - Interne (l'lment style)

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

Prof. : J.E. RAFIQ

Feuilles de Style : CSS

Prof. : J.E. RAFIQ

Feuilles de Style : CSS

Leon 3 : Les couleurs et les arrires-plans

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

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

<h1> en les sparant par un point-

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

Prof. : J.E. RAFIQ

Feuilles de Style : CSS

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

Prof. : J.E. RAFIQ

Feuilles de Style : CSS

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

Positionner une image d'arrire-plan [background-position]

Prof. : J.E. RAFIQ

Feuilles de Style : CSS

background: #FFCC66 url("butterfly.gif") no-repeat;

Prof. : J.E. RAFIQ

Feuilles de Style : CSS

Leon 4 : Les polices

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

La famille de polices [font-family]

Prof. : J.E. RAFIQ

Feuilles de Style : CSS

Le style des polices [font-style]

Les variantes de polices [font-variant]

La graisse des polices [font-weight]

Le corps des polices [font-size]

Feuilles de Style : CSS

Avec la proprit raccourcie, on peut simplifier le code :

Prof. : J.E. RAFIQ

Feuilles de Style : CSS

L'indentation du texte [text-indent]

L'alignement du texte [text-align]

La dcoration du texte [text-decoration]

L'espacement des lettres [letter-spacing]

Feuilles de Style : CSS

h1 { letter-spacing: 6px; } p{ letter-spacing: 3px; }

La transformation du texte [text-transform]

Prof. : J.E. RAFIQ

Feuilles de Style : CSS

Leon 6 : Les liens

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

Prof. : J.E. RAFIQ