Documente Academic
Documente Profesional
Documente Cultură
2009-2010
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.
Ecole ORIGINES
2009-2010
Mais o place-t-on le code CSS ? C'est prcisment ce que nous allons voir maintenant.
style. En
Ecole ORIGINES
2009-2010
<style>. Par
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.
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 !
Ecole ORIGINES
2009-2010
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.
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").
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; }
Ecole ORIGINES
2009-2010
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 :
Ecole ORIGINES
2009-2010
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;}
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.
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;}
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; }
L'ordre des valeurs de la proprit font est le suivant : font-style | font-variant | font-weight | font-size | font-family
11
Ecole ORIGINES
2009-2010
Ecole ORIGINES
2009-2010
13
Ecole ORIGINES
2009-2010
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; }
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; }
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.
16
Ecole ORIGINES
2009-2010
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.
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.
19
Ecole ORIGINES
2009-2010
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
21
Ecole ORIGINES
2009-2010
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 :
22
Ecole ORIGINES
2009-2010
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.
23
Ecole ORIGINES
2009-2010
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; }
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; }
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.
25
Ecole ORIGINES
2009-2010
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" .
26
Ecole ORIGINES
2009-2010
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.
28
Ecole ORIGINES
2009-2010
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.
29
Ecole ORIGINES
2009-2010
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>
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; }
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
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 :
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/
32