Feuilles de style en cascade. Utilisation des CSS. Yan Bodain

Transcription

1 Feuilles de style en cascade Utilisation des CSS Cascading Style Sheets Yan Bodain Chercheur-développeur Maison des technologies de l'information et des communications pour la formation et l'apprentissage CRIM Formation Dernière modification: 18 dec. 2006

2 Objectifs Identifier les principales instructions de mise en page CSS. Comprendre le rôle et la fonction particulière de ces instructions. Savoir appliquer ces instructions pour réussir une mise en page professionnelle.

3 Sujets Principes généraux Unités de mesure Appels de fichier Importation d instructions CSS Principales instructions de mise en page Couleur Arrière-fond Police Liste Marge Bordure Espacement Position Affichage Flottement Validateur CSS / Référence Mise en application

4 Unité absolue : Unités de mesure ABSOLUE Les mesures absolues prennent l'une des formes suivantes : px (pixel) mm (millimètre) cm (centimètre) in (pouce) pt (point, un point est égal à 1/72 de pouce) pc (pica, un pica est égal à 12 points) Attention! Aucun espace ne devrait jamais figurer entre la et l'unité de mesure. h1 { font-size: 18 pt; /* ne fonctionne pas */ p { font-size: 18pt; /* fonctionne bien */ Les mesures absolues peuvent aussi prendre la forme de dimensions préétablies (xx-small, x-small, small, medium, large, x-large, xx-large). h1{ font-size: medium;

5 Unité relative : Unités de mesure RELATIVE Les mesures relatives servent à fixer les dimensions d'un élément en utilisant un rapport de proportion. % (pourcentage) smaller, larger em (dimension de la police) ex (hauteur du caractère x) em { font-size: 120% ; b { font-size: larger ; i { font-size: 1.5em ; a { line-height : 2.5ex ; Les navigateurs Web utilisent une taille de caractères fixée par défaut à 16 pixels (i.e 1em=16px).

6 Fichiers externes Il est possible de placer des instructions CSS dans un fichier externe pour faciliter leur réutilisation entre différentes pages Web. La ligne suivante permet d'appeler une feuille de style externe à l'intérieur d'une page Web : <head> <link rel="stylesheet" type="text/css" href="truc.css" /> </head> Cette directive doit être placée dans la section «HEAD» de la page Web. Le fichier CSS doit se présenter sous un format texte (i.e non binaire). La source du fichier doit être indiquée avec l'attribut «href» (hyper référence). Il est aussi bien possible d'utiliser une URL relative ("truc.css") qu'une URL absolue (" Le nom du fichier externe peut présenter une extension arbitraire (*.htm,*.txt). Il est toutefois recommandé d'utiliser l'extension CSS (*.css) pour faciliter l'administration des fichiers sur le serveur Web.

7 Fichiers externes - Types de médias Il est possible d'ajouter l'attribut media pour limiter l'utilisation d'une feuille de style externe à un certain type de média seulement. <link rel="stylesheet" type="text/css" media="print, screen" href="truc.css" /> all : pour tous les appareils. aural : pour les synthétiseurs de parole. braille : pour les appareils braille à retour tactile. embossed : pour les appareils à impression braille. handheld : pour les appareils portatifs. print : pour les supports paginés opaques (ou pour les documents vus sur écran en mode aperçu avant impression). projection : pour les présentations en projection. screen : pour les moniteurs. tty : pour les médias utilisant une grille de caractères fixe, tels les télétypes, les terminaux ou les appareils portatifs aux capacités d'affichage réduites. tv : pour les appareils de type télévision.

8 Fichiers externes - Préséance Il est possible d'utiliser plusieurs feuilles de style en même temps à l'intérieur d'une même page Web. Les feuilles de style se rajoutent les unes par-dessus les autres ("cascading style sheet"). Lorsqu'un conflit de style intervient, la dernière classe appelée a toujours préséance sur les classes précédentes. <link rel="stylesheet" type="text/css" href="truc1.css" /> <link rel="stylesheet" type="text/css" href="truc2.css" /> <style type="text/css"> h1 { color: blue; /* en cas de conflit, la dernière classe redéfinit les précédentes */ #particulier { color: red; /* les styles individuels ont toujours préséance sur les autres instructions*/ </style>

9 Importation de CSS Il est possible de réaliser l'importation d'une feuille de style à l'intérieur d'une autre feuille de style au moyen de Cette directive doit être placée au début même du fichier CSS de manière à précéder toutes les autres règles de la feuille de style url("truc2.css"); /* deux syntaxes équivalentes */ Il est possible d'assigner une feuille de style externe à un média url("print.css") url("main.css") print, screen;

11 Directives de mise en page color background-image background-repeat background-color font-size font-family font-weight font-style list-style-type list-style-image text-decoration text-transform text-align text-indent line-height white-space margin margin-left margin-right margin-top margin-bottom paddings padding-left padding-right padding-top padding-bottom border-width border-left-width border-right-width border-top-width border-bottom-width border-style border-color position left top width height display visibility float clear

12 Couleur color héritée : oui code pourcentage aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow... etc #0000FF, #00FF00... etc rgb(20%, 30%,100%) em { color: red; /* nom de couleur */ b { color: #ff0000; /* code de couleur */ p { color: rgb(255, 0, 0); /* couleur variant de 0 à 255 */ i { color: rgb(100%, 0%, 0%); /* pourcentage */ Note: L'élément souligné indique la par défaut de l'attribut.

13 Arrière-fond background-image héritée : non adresse URL de l'image background-repeat héritée : non no-repeat, repeat, repeat-x, repeat-y background-color héritée : non code pourcentage aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow... etc #0000FF, #00FF00... etc rgb(20%, 30%,100%) em { background-color: blue; body { background-image: url(" h1 { background-image: url("fond2.gif"); background-repeat: no-repeat;

14 Police font-size héritée : oui absolue relative longueur pourcentage xx-small, x-small, small, medium, large, x-large, xx-large smaller, larger 1pt, 2pt, 3pt... etc 1%, 2%, 3%... etc font-family héritée : oui générique nom d'une police locale (ex.: helvetica, arial) serif, sans-serif, cursive, monospace, fantasy h1 { font-family: helvetica, arial, sans-serif; em { font-size: 120%; p { font-size: 12pt; i { font-size: medium; b { font-size: larger;

15 Police font-weight héritée : oui normal, bold, bolder, lighter, font-style héritée : oui normal, italic h1 em { font-style: italic; em { font-weight: bold; b { font-weight: lighter; i { font-weight: 700;

16 Liste list-style-type s'applique aux éléments de liste héritée : oui disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none ul.image { list-style-image: url("images/carre.png"); ul.alpha { list-style-type: upper-alpha; ul.roman { list-style-type: lower-roman; Note: la forme visuelle de la liste peut varier en fonction du navigateur.

17 Texte text-transform héritée : oui capitalize, uppercase, lower-case, none text-align s'applique uniquement à un groupe d'éléments héritée : oui left, right, center, justify text-indent s'applique uniquement à un groupe d'éléments héritée : oui longueur pourcentage 1em, 2em, 3em in, 0.2in, 0.3in... etc 1%, 2%, 3%... etc h1 { text-transform: capitalize; h1.maj { text-transform: uppercase; all.droite { text-align: right; p.gauche { text-align: left; p.retrait { text-indent: 25%;

18 Texte line-height s'applique uniquement à un groupe d'éléments héritée : oui relative longueur pourcentage nombre réel par rapport à la grosseur de police (ex.: 1.2) 1pt, 2pt, 3pt in, 0.2in, 0.3in... etc 1%, 2%, 3%... etc text-decoration héritée : non underline, line-through, blink, none white-space s'applique uniquement à un groupe d'éléments héritée : oui normal, pre p { font-size: 10pt; line-height: 1.2em; b { text-decoration: underline; p.espace { white-space: pre;

19 Marge-Bordure-Espacement Les éléments visuels possèdent une aire de contenu entourée d'une aire d'espacement, d'une aire de bordure et une aire de marge. margin border padding

20 Marge margin margin-left margin-right margin-top margin-bottom auto longueur 1pt, 2pt, 3pt in, 0.2in, 0.3in... etc pourcentage 1%, 2%, 3%... etc héritée : non body { margin: 10pt 20pt 30pt 40pt; /* haut droite bas gauche */ p { margin: 40pt; /* toutes les marges à 40 pt */

21 Bordure border-width border-left-width border-right-width border-top-width border-bottom-width longueur none 1pt, 2pt, 3pt in, 0.2in, 0.3in... etc héritée : non div.info { border-width: 1px 2px 2px 1px; div.annonce { border-width: 4px;

22 border-style border-color code pourcentage Bordure solid, double, inset, outset, groove, ridge, none #0000FF, #00FF00... etc rgb(20%, 30%,100%) héritée : non héritée : non none, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, etc body { border-color: blue; border-width: 1em 2em 1em 2em; border-style: ridge; h1 { border-color: #aaaaaa; border-width: 0.2in; border-style: groove;

23 Espacement paddings padding-left padding-right padding-top padding-bottom longueur pourcentage 1pt, 2pt, 3pt in, 0.2in, 0.3in... etc 1%, 2%, 3%... etc héritée : non div.gauche { paddings: 1em 2em 1em 2em; div.centre { paddings: 20px;

24 Position position s'applique à un groupe d'éléments héritée : oui static relative absolute fixed static : la boîte est placée selon le flux normal. relative : la boîte est déplacée relativement à sa position dans le flux normal. absolute : L'emplacement de la boîte est déterminé par les propriétés left, right, top, et bottom. fixed : l'emplacement de la boîte est fixe par rapport à une référence donnée. div.pivimage { position: absolute; top: 0px; left: 0px; Note: cette instruction ne fonctionne pas correctement avec tous les navigateurs.

25 Gauche-Droite left s'applique à un groupe d'éléments <longueur> <pourcentage> auto longueur 1pt, 2pt, 3pt in, 0.2in, 0.3in... etc pourcentage 1%, 2%, 3%... etc right s'applique à un groupe d'éléments <longueur> <pourcentage> auto longueur 1pt, 2pt, 3pt in, 0.2in, 0.3in... etc pourcentage 1%, 2%, 3%... etc héritée : oui héritée : oui div.version { position: absolute; left: 0px; top: 0px; width: 18ex; height: 2ex; background-color: #0000dd; /* bleu */

26 Largeur-Hauteur width héritée : oui longueur pourcentage <longueur> <pourcentage> auto 1pt, 2pt, 3pt in, 0.2in, 0.3in... etc 1%, 2%, 3%... etc height héritée : oui longueur pourcentage <longueur> <pourcentage> auto 1pt, 2pt, 3pt in, 0.2in, 0.3in... etc 1%, 2%, 3%... etc div.long { width: 10in; div.court { width: 12px; div.moitie { width: 50%;

27 Affichage display s'applique à tous les d'éléments héritée : oui block, inline, list-item, none block : force un élément à générer une boîte de bloc. inline : force un élément à générer une boîte en-ligne. list-item : force un élément à générer une liste d'items. /* ici p est considéré comme un élément de liste */ p { display: list-item; list-style-type: circle; padding-left: 1em; Note: la forme visuelle de la liste peut varier en fonction du navigateur.

28 Visibilité visibility héritée : oui visible, hidden div.barreonglet, div.onglet a { visibility: hidden; line-height: 0px;

29 Flottement float héritée : non left, right, none img { float: right; margin-top: 2em;

30 Espace libre clear héritée : non left, right, both, none Cette propriété indique quels côtés d'un élément ne devraient jamais être adjacents à une boîte flottante précédente. img { float: right; margin-top: 2em; p { clear: right; /* aucun élément flottant à droite */

31 Validateur CSS Validateur de CSS disponible en ligne.

32 Référence (

34 Mise en application media screen media print

35 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso " /> <title>exemple de mise en page</title> <link rel="stylesheet" type="text/css" media="screen" href="ecran.css" /> <link rel="stylesheet" type="text/css" media="print" href="imprimante.css" /> </head> <body>  <div class="pivbandeau"> <img class="pivvisuel" src="images/visuel.gif" width="310" height="57" alt="drapeau du Québec" /> <div class="barremenupiv"> <ul class="barregauchepiv"> <li class="premier"><a href="">accueil</a></li> <li><a href="">nous joindre</a></li> <li><a href=" Québec</a></li> </ul> <ul class="barredroitepiv"> <li><a href="">recherche</a></li> <li><a href="">english</a></li> </ul> </div> <a href=" class="pivimage" src="images/quebw3.gif" width="160" height="95" border="0" alt="drapeau du Québec" /></a> </div>  <div class="barreonglet"> <div class="onglet selected"><a href="">section un</a></div> <div class="onglet"><a href="">section deux</a></div> <div class="onglet"><a href="">section trois</a></div> </div>

36 <div class="contenu"> <div class="sectionnavigation"> <ul class="listenavigation"> <li><a href="">sous-section A</a></li> <li><a href="" class="selected">sous-section B</a></li> <li><a href="">sous-section C</a></li> </ul> </div> <div class="info"> Voici des informations contextuelles. Voici des informations contextuelles. Voici des informations contextuelles. Voici des informations contextuelles. Voici des informations contextuelles. </div> <div class="sectioncontenu"> Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. <p /> Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. <p /> Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. </div> <div class="pied"> <a href="">politique de confidentialité</a> <a href=""> Déclaration de services aux citoyens</a><br /> <a href=""><img src="images/quebec_drapeau.gif" width="87" height="17" alt="portail du gouvernement du Québec" title="portail du gouvernement du Québec" border="0" /></a><br /> <a href="" class="copyright"> Gouvernement du Québec, 2006</a> </div> </div> </body> </html>

37 /* ecran.css */ body { font-family: arial; margin: 0px; padding: 0px; div.pivbandeau { height: 60px; img.pivvisuel { float: right; img.pivimage { position: absolute; top: 0px; left: 0px; padding-left: 50px; background-color: #FFFFFF; div.barremenupiv { position: absolute; left: 210px; top: 53px; background-color: #003399; height: 1.2em; ul.barregauchepiv { float: left; ul.barregauchepiv, ul.barredroitepiv { margin: 0 1ex 0 1ex; padding: 0px; background-color: #003399; ul.barredroitepiv { float: right; text-align: right; ul.barregauchepiv li, ul.barredroitepiv li { display: inline; ul.barregauchepiv li a, ul.barredroitepiv li a { color: #FFFFFF; font-size: 0.9em; text-decoration: none; margin-left: 1ex; div.barreonglet { margin-top: 3em; text-align: center; border-style: solid; border-width: 0 0 1px 0; line-height: 1.1em; div.onglet { display: inline; margin: 0 0.3em 0 0.3em; background-color: #C3D3EE; border-style: solid; border-width: 1px 1px 0 1px; div.onglet a { padding: 0 0.3em 0 0.3em; text-decoration: none; color: #000000; div.selected a { text-decoration: none; background-color: #F1F5FC; /* bleu */ color: #000000; padding-bottom: 2px; font-weight: bold; div.onglet a:hover { background-color: #FFFFFF; div.contenu { background-color: #FFFFFF; width: 100%; div.sectionnavigation { padding: 0.5ex; width: 10em; float: left; height: 300px; /* hauteur minimale */ ul.listenavigation { padding-left: 1em; margin: 0 0.5em 0 1em ; width: 15ex; ul.listenavigation li a.selected { text-decoration: none; color: #000000; font-weight: bold; div.sectioncontenu { background-image: url("images/fond.jpg"); background-repeat: repeat-x; margin-left: 20ex; padding: 0.5em; div.info { background-color: #FFFFE0; /* jaune */ margin: 8ex 1ex 1ex 1em; width: 180px; float: right; padding: 1ex; font-size: 0.8em; border: 1px solid #AAAAAA; div.pied { clear: both; margin: 10px; font-size: 0.7em; text-align: center; line-height: 2.5em;

38 /* imprimante.css*/ body { font-family: arial; margin: 0px; padding: 0px; div.pivbandeau { height: 100px; img.pivimage { position: absolute; left: 0px; top: 0px; ul.barregauchepiv, ul.barredroitepiv, img.pivvisuel, div.pied, div.barreonglet, div.onglet a, div.sectionnavigation, div.listetitre, ul.listenavigation { visibility: hidden; line-height: 0px; padding: 0px; margin: 0px div.selected a, a.selected { visibility: visible; line-height: 1.2em; font-size: 1.2em; color: #000000; font-weight: bold; text-decoration: none; div.info { margin-left: 1ex; padding: 1ex; width: 180px; float: right; font-size: 0.8em; border: 1px solid #AAAAAA; div.pied { text-align: center; a.copyright { line-height: 1.2em; visibility: visible; font-size: 0.7em; text-decoration: none; color: #000000;