Styles CSS Feuilles de styles en cascade Cascading
- Slides: 71
Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit 24 novembre 2009
2 Sitographie sur le CSS n Site de démonstration de la puissance du CCS n n Site de référence du langage CSS n n http: //www. W 3. org Traduction française du W 3 C : n n http: //www. csszengarden. com/tr/francais/ http: //www. yoyodesign. org/doc/w 3 c/css 2/selector. html Didacticiels n n n http: //www. w 3 schools. com/Css/ http: //www. alsacreations. com/tutoriels/ http: //www. siteduzero. com http: //www. aidenet. com/css/ http: //fr. selfhtml. org/css/ http: //edu. ca. edu/cours-web/
3 Le CSS et ses versions (niveaux) n n n Feuilles de styles en cascade (Cascading Style Sheets => CSS) Langage permettant la mise en forme de documents structurés écrits en langage HTML, XML Succession de différentes versions n n n n CSS-1 ou CSS level 1 (1996) CSS-P (CSS Positioning) CSS-2 ou CSS level 2 (1998) CSS-2. 1 (révision 2006) CSS-3 : brouillons (drafts) CSS Mobile Profile 1. 0 CSS Print Profile CSS TV Profile 1. 0
4 Exemple de HTML 3. 2 avant l'usage du CSS <body bgcolor="white"> <h 1 align="center">Titre 1</h 1> <p> <font face="Arial" color="red" size="2"> <i><b>Mon texte 1</b></i></font></p> <p><font face="Arial" color="red" size="2"> <i><b>Mon texte 2</b></i></font></p> <h 1 align="center">Titre 2</h 1> <p><font face="Arial" color="red" size="2"> <i><b>Mon texte 3</b></i></font></p> <h 1 align="center">Titre 3</h 1> </body>
5 Exemple de code (X)HTML et de code CSS body {background-color: white; } h 1 {text-align: center; } p {color: red; font: italic bold 10 pt Arial; } <body> <h 1>Titre 1</h 1> <p>Mon texte 1</p> <p>Mon texte 2</p> <h 1>Titre 2</h 1> <p>Mon texte 3</p> <h 1>Titre 3</h 1> </body> partie CSS partie (X)HTML
6 Dépréciation de balises et attributs du HTML n A partir du HTML 4, des balises et attributs du HTML 3. 2 sont dépréciées et remplacées par des styles n n Balises dépréciées n <center> </center> Attributs dépréciés n bgcolor="…" n align="…" Balises et attributs dépréciés n <font color="…" face="…" size="…">. . . </font> Balises logiques (sémantique) préférables aux balises physiques : n n <strong>. . . </strong> préférable à <b>. . . </b> <em>. . . </em> préférable à <i>. . . </i>
7 Le CSS : avantages et inconvénients n Avantages n n n n Séparation contenu/mise en forme Code plus lisible Code du fichier html allégé -> Diminution du temps de chargement Présentation homogène du site web Maintenance facilitée : répercussion automatique des modifications Nouvelles possibilités de mise en forme des documents html Compatible avec divers langages (HTML, XHTML, DHTML, XML…) Inconvénients n n Pas/peu reconnu par les anciens navigateurs (Netscape 4, IE 3) Mieux reconnu depuis Nescape 6, IE 6 Modèle de boîte différent pour IE 5 (mode Quirks) Subsistance de quelques incompatibilités
8 Déclaration de style CSS : syntaxe n n Syntaxe générale propriété: valeur; Exemples color: blue; background-color: #ff 0000; border-width: 1 px; border-style: solid; border-color: black; n Raccourci pour plusieurs propriétés voisines border: 1 px solid black;
9 Règle CSS : syntaxe accolades sélecteur règle CSS bloc de déclarations h 2 {color: red; text-align: center ; } déclaration identificateur valeur de propriété ; séparateur entre déclarations ; facultatif à la fin
10 Règle CSS : présentation du code n n Présentation possible : h 2 {color: red; text-align: center ; } Présentation conseillée (avec indentation et passage à la ligne) : h 2 { color: red; text-align: center ; }
11 /* Utilisation des commentaires en CSS */ /* Auteur : Florence PETIT */ a{ } color: #333; /* gris sombre */ /* Feuille de style du site truc. org Version modifiée le 12 juin 2009 */ /* -----------------Typographie et couleurs ------------------- */ p { font-size: 12 px; } #menu li { color: #ff 0000; } /* -----------------Structure du site ------------------- */ div {… } Commentaire sur une ligne Commentaire sur une portion de ligne Commentaire sur plusieurs lignes Commentaires permettant d'organiser la feuille de style en rubriques facilement repérables
12 Commentaire conditionnel Si le navigateur est inférieur (lt pour less than) à la version d'IE, alors on ajoute un style… <!--[if lt IE 7]> <style type="text/css"> div { width: expression(document. body. client. Width >= 1000? "1000 px": "auto" ); } </style> <![endif]--> n
13 Codage des couleurs en CSS Propriétés de couleurs n color: red -> couleur de texte n border-color: red -> couleur de bordure n background-color: red -> couleur de fond Une couleur peut être exprimée sous différentes formes : n Nom de couleur reconnu par W 3 C red, blue black, white , gray, silver… (17 couleurs) n Nom de couleur non reconnu par W 3 C darkolivegreen, lightskyblue, tomato n Codage hexadécimal classique de type #rrvvbb #cc 0088 n Codage hexadécimal abrégé de type #rvb #c 08 n Codage décimal de type rgb(x, y, z) avec nombre de 0 à 255: rgb(255, 0, 122) n Codage décimal de type rgb(x%, y%, z%) en pourcentage : rgb(100%, 50%) Sites sur la couleur n Noms de couleur : http: //www. 5 axe. com/5 axe 2/inc/pgeditor/popups/color_help. php? lng=fr n Codes de couleur : http: //www. code-couleur. com n Théorie sur la couleur : http: //www. profil-couleur. com n Couleur et harmonie : http: //www. colorsontheweb. com/colorwizard. asp
14 Unités de taille (polices, dimensions d'élément. . . ) n Unité absolue Exemples n n n 0. 2 in Unité relative n n n Millimètre 12 mm Centimètre 1. 2 cm Pouce ou Inch (1 inch = 2, 54 cm) Point (1 pt = 1/72 inch) 15 pt Pica (1 pc = 12 pt = 1/6 inch) 2 pc Pixel (/résolution) 15 px Pourcentage (/ parent) Taille (largeur d'un M)1. 5 em Taille (hauteur d'un x)1. 5 ex 150% Remarques n n n Inutile de préciser l'unité pour la valeur nulle : 0 L'abréviation de l'unité doit être collée à la valeur, sans espace La taille de police est exprimée le plus souvent en pt, en em, en % Largeur et hauteur d'une image sont exprimées en général en px Les tailles pour l'impression (marges…) sont exprimées en cm, ou en in
15 Méthodes pour appliquer des styles en (X)HTML n Feuille de style interne au document n n n Feuille de style externe liée n n n liste des règles CSS dans un fichier externe. css appel à ce fichier externe avec une balise <link … /> Feuille de style externe importée n n n liste des règles CSS dans balise <style…></style> placée dans la partie <head> liste des règles CSS dans un fichier externe. css appel à un fichier externe avec @import Style en ligne (intra-ligne ou incorporé) n attribut style="…" dans la balise d'un élément
16 Feuille de style interne au document n n n Balise <style type="text/css"></style> placée dans l'en-tête du document Liste de règles CSS placée dans cette balise ouvrante et fermante Règle appliquée à tous les sélecteurs correspondant du document Utilisation pour un document isolé, éventuellement pour une page particulière d'un site Utilisation ne convenant pas pour mettre en forme un site entier Exemple : <head> <style type="text/css"> body {background-color: silver; color: maroon; } h 1 {text-align: center; font-size: 1. 5 em; color: black; } </style> </head> <body> <h 1>Titre A</h 1> <p>Texte 1</p> <p>Texte 2</p> </body>
17 Feuille de style CSS externe liée n n n Liste de règles CSS placée dans un fichier CSS externe (extension css) Balise link à ajouter dans l'en-tête du document html permettant de faire un "lien" vers ce fichier css Utilisation bien adaptée à un site web dont toutes les pages HTML comporteront la balise <link> Règle appliquée à tous les sélecteurs correspondant dans les documents liés Exemples n n n 1) Code CSS : contenu d'un fichier CSS nommé monstyle. css body { background-color: white ; color: blue; } h 1 { text-align: center; font-size: 1. 5 em ; color: black; } 2 a) Code HTML (extrait du fichier) … <head><title>. . . </title> <link rel="stylesheet" type="text/css" href="chemin/monstyle. css"> </head> … 2 b) Code XHTML (extrait du fichier) … <head><title>. . . </title> <link rel="stylesheet" type="text/css" href="chemin/monstyle. css" /> </head>. . .
18 Feuille de style CSS importée n n n Liste de règles CSS dans un fichier CSS externe Règle @import à ajouter dans la feuille de style (interne ou externe) Se place avant tout autre déclaration de style Règle appliquée à tous les sélecteurs correspondant dans les documents liés Utilisation adaptée à un site web, notamment pour "cascader les styles" Syntaxe @import "fichier. css" @import url("fichier. css") n Exemple (dans une feuille interne) <style type="text/css"> @import url("fichier. css") p {color: red; } </style>
19 Style en ligne, dans une balise (X)HTML n Bloc de déclarations CSS n n n incorporé dans la balise introduit par l'attribut style Exemple : <p style="text-align: center; background-color: #ccc; ">Texte</p> S'applique à une balise précise du document Intéressant pour un essai lors du développement Déconseillé actuellement : à remplacer plutôt par l'utilisation d'un identifiant (X)HTML : <element id="truc"> CSS : #truc {text-align: center; background-color: #ccc; }
20 4 manières d'appliquer un style : exemple <html> <head> <title>…</title> <link rel="stylesheet" type="text/css" href="fichier 1. css" /> <style type="text/css"> @import url("fichier 2. css"); h 1 { color: blue } </style> </head> <body> <h 1>Ce texte est en bleu à cause du style interne</h 1> <p style="color: green" >Ce paragraphe est en vert. </p> </body> </html>
21 Les principaux sélecteurs : exemples n n n n Nom d'élément : h 1 Sélecteur multiple (regroupement de sélecteurs) : h 1, h 2, p Sélecteur contextuel (combinaison d'éléments imbriqués ) : h 1 a Identifiant : p#intro 1 Classe : p. intro Pseudo-classe : a: hover Sélecteur universel : *
22 Nom d'élément (Sélecteur de type) n n La règle css s'applique à toutes les balises HTML indiquées Exemples : h 1 { color: red; font-size: 2 em; } h 2 { color: red; font-size: 1. 5 em; } p{ color: black; }
23 Regroupement de sélecteurs (avec virgule) h 1 {color: red; font-size: 2 em} h 2 {color: red; } p {color: red; } h 1, h 2, p {color: red; } h 1 {font-size: 2 em; } h 1 h 2 p {color: red; } h 1 {font-size: 2 em; }
24 Sélecteur universel * n n * remplace tout élément du document Se met dans la partie style CSS, par exemple : * {margin: 0} Tous les éléments du document (h 1, h 2, p, div, ul…) auront une marge de 0.
25 Sélecteurs contextuels (sélecteurs descendants) Exemple : h 1 em h 1 est un ancêtre de em, même lointain. em est un descendant de h 1, même lointain. n Dans la partie CSS h 1 {color: blue; } h 1 em {color: red; } p {color: black; } em {color: green; } -------------------n Dans le body <h 1>Titre A 1</h 1> <p>Texte A </p> <h 1>Titre B 1 <em> Titre C 1</em>Titre D 1 </h 1> <p>Texte B <em> Texte C</em> Texte D </p> <p>Texte E <span>Texte F<em> Texte G</em></span> Texte H </p> n
26 Autres sélecteurs contextuels n n n Sélecteur parent descendant (au sens large : enfant, petit-enfant, etc. ) div a (a descendant de div) Sélecteur d'enfants (au sens strict, enfant direct) body > p (p enfant direct de body) Sélecteur adjacent (ou consécutif) ul + li (li suivant immédiatement un ul) a+a (a suivant immédiatement un a) Sélecteur d'attribut h 1[title] (h 1 qui possède un attribut title) Sélecteur de valeur d'attribut input[type=text]
27 L'identifiant id du (X)HTML n n id est un attribut "générique" qui s'applique à toutes sortes d'éléments. Il sert à identifier une balise précise. Il doit être unique dans un document. Il s'ajoute dans une balise du document html : <p id="intro">texte d'introduction</p> n Il peut être utilisé dans une règle CSS : #intro {font-style: italic; text-align: center; } identique à : p#intro {font-style: italic; text-align: center; }
28 La classe "class" du (X)HTML n n Class est un attribut "générique" qui s'applique à toutes sortes d'éléments. Une classe permet de définir un sous-ensemble. Elle peut s'appliquer à plusieurs éléments. Elle s'ajoute dans une balise du document html : <h 1 class="intro">titre 1</p> <p class="intro">texte 2</p> <p class="intro">texte 3</p> <img class="logo">. . . </p> n Utilisation dans une règle CSS : . intro {font-style: italic; } h 1. intro {text-align: center; }. logo {border: 1 px solid red ; }
29 Eléments div et span (éléments neutres) du (X)HTML n n div et span sont en général associés à un id ou une class. div : balise de bloc, délimite souvent un ensemble de balises <div id="menu 1"> <ul><li>……</li>. . . </ul> </div> <div id="piedpage"> <p>……</p> </div> n span ("petite étendue") : balise en-ligne, délimite une partie de texte <p>Il pris un pot de <span id="rouge">peinture rouge</span> et un pinceau. </p> <p>Il pris aussi un pot de <span class="vert">peinture vert clair</span>, un pot de <span class="vert">peinture vert foncé</span>, et un autre pinceau. </p>
30 Les pseudo-classes et les pseudo-éléments n n Différencie différents états d'un élément Pseudo-classes d'ancre (élément a) pour les états des liens a: link a: visited a: hover a: active n --> --> lien standard visité (cliqué) pointé pendant le clic Respecter cet ordre dans les règles de style ! Exemple : a: link {color: red; } a: hover, a: active {text-decoration: underline ; color: gray; } n Pseudo-éléments (ici appliqués à l'élément p) p: first-line {font-variant: small-caps; } p: first-letter {font-size: 2 em; color: red; } n 1 re ligne des paragraphes 1 re lettre des paragraphes Pseudo-classe first-child (1 er élément enfant d'un autre élément) a: first-child {font-variant: small-caps; } p: first-child em { font-weight : bold } si a est un 1 er enfant si em est dans un p est un 1 er enfant
31 Autres pseudo-éléments : before et : after n n : before : after Exemples permet d'insérer un texte avant permet d'insérer un texte après 12, 50 td: before { content: "Prix: "; } td: after { content: " euros"; } th: before { content: url(carre. gif)" "; } Prix: 12, 50 euros Produits vendus h 1: before {content: counter(nomcompteur, upper-roman) ". "} I. titre h 1: before { content: counter(niv 1); counter-increment(niv 1); counter-reset(niv 2); } h 2: before { content: counter(niv 1) ". "; counter(niv 2); counter-increment(niv 2); 1 Europe 1. 1 France … 1. 2 Italie … 2 Asie 2. 1 Chine
32 Combinaisons de sélecteurs n Exemples : #menu 1 li a: link #menu 1 li a: hover #menu 1 li a: active p. intro {line-height: 2 em; } {color: black; } {color: red; } {font-style: italic; }
33 Propriétés de police de caractères n n n n n color background-color font-style: normal | italic | oblique font-variant: normal | small-caps font-weight : normal | bolder | lighter | 100 | 700 | 900 font-size : n | p% | xx-small | smaller | larger | xx-large line-height: n p% (interligne entre 2 lignes) font-family: police 1, police 2, police 3 Exemple de propriété raccourcie (ordre important) : font: italic small-caps bold 10 pt/14 pt Times
34 Propriété font-family n n Liste de polices (pour différents OS + police générique en dernier ) font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-family: Georgia, "Bookman Old Style", serif; 5 familles de police génériques n n n serif (ex. Times, Times new roman, Palatino, Georgia) sans-serif (ex. Geneva, Arial, Helvetica, Tahoma, Verdana) cursive (ex. Zapf-Chancery, Comic Sans MS) fantasy (ex. Western, Impact) monospace ou à taille fixe (ex. Courier) Nom de police avec espace font-family: Times, "Times New Roman", serif font-family: Times, 'Times New Roman', serif Sans-serif Cursive fixe
35 Propriétés de texte n n n n word-spacing: n | -n letter-spacing: n | -n text-decoration: none | underline | overline | blink | line-through text-transform: uppercase | lowercase | capitalize UPPERCASE text-align: left | right | center | justify lowercase text-indent (retrait de première ligne) : n p% Capitalize white-space : normal | pre | nowrap
36 Modèle de boîte et propriétés margin (marge externe) border (bordure) padding (marge interne, remplissage) contenu de la boîte : texte, images… width height
38 Propriétés de blocs (body, p, hn, …) : marge n n margin-top: margin-right: margin-bottom margin-left valeurs possibles : n p% -n -n% auto exemples : 5 pt -12 px 2 em 10% Exemples de propriété raccourcie : On part d'en haut, on tourne dans le sens des aiguilles d'une montre n margin: 5 em 10 em 5 em 3 em 2 em 10 em --> 5 pour toutes les marges --> 5 haut/bas 10 droit/gauche --> 5 haut 3 droit 2 bas 3 gauche (=droit)
39 Propriétés de boîtes : remplissage n n n padding-top: n p% padding-right padding-bottom padding-left padding Exemples de propriété raccourcie : on part d'en haut, on tourne dans le sens des aiguilles d'une montre n padding: 5 em 10 em 5 em 3 em 2 em 10 em --> 5 pour toutes --> 5 haut/bas 10 droit/gauche --> 5 haut 3 droit 2 bas 3 gauche (=droit)
40 Propriétés : border n n n n n border-top-width: n| thin |medium|thick (idem avec bottom) border-left-width: n| thin |medium|thick (idem avec right) border-width: 2 pt 9 pt 2 pt border-color: red blue green black pas de couleur précisée : color de l'élément border-style: none|solid|dotted|dashed|… border-style: double solid border-top: 2 px dashed red border: 2 px dotted red --> 4 bordures identiques
41 Utilisation de marges automatiques pour centrer un bloc n Dans la partie CSS #conteneur { width: 600 px; background-color: cyan; margin-left: auto; margin-right: auto; padding: 1 em; text-align: right; } n en HTML <body> <div id="conteneur">…… </div> </body> TITRE Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed luctus, tortor vitae elementum dignissim, elit erat cursus felis, ut tristique velit mauris vitae velit. In sed pede ut purus lobortis scelerisque. Nunc vel turpis. Vestibulum fringilla nunc a libero. Mauris molestie dolor at lectus. Proin erat quam, feugiat a, auctor ac, tempor quis,
42 Propriétés d'arrière-plan n n Background-attachment: scroll | fixed Background-position: 50% (ou 20 px 10 px) d'abord verticale puis horizontale Background-color: #ccc Background-image: url(logo. gif) Background-repeat: repeat | repeat-x | repeat-y | no-repeat Propriété raccourcie : n Background: scroll 50% 50 % #ccc url(logo. gif) no-repeat
43 Background-attachment haut de l'écran ligne 1 ligne 2 ligne 3 … par défaut : scroll fixed … ligne 7 ligne 8 bas de l'écran après défilement … ligne 7 ligne 8
44 Background-repeat no-repeat par défaut repeat-x repeat-y
45 Background-position background-position: x y (valeur négative possible) par défaut 0% 0% top left top 50% 0% top center top 100% 0% top right top 0% 50% left center left 50% center 100% 50% right center right 0% 100% bottom left bottom 50% 100% bottom center 100% bottom right bottom
46 Propriété Float (valeur : right | left ) n n float: left | right Utilisation : image, menu, bloc de textes, lettrine… ex : <p>Texte 1… <img. . /></p> img {float: left; } Texte 1. . …………………. . . . . n img {float: right; } . . Texte 1 … ………………………. . . . . …………………………………. . . .
47 Mise en page d'images et de blocs avec "Float" n Galerie d'images img {float: left} <img src="i 1. gif" alt=""> <img src="i 2. gif" alt="">… n Blocs avec image et légende div {float: left; width: 100 px; } <div> <img src="i 1. gif" alt=""> <p>legende 1</p> </div> <img src="i 2. gif" alt=""> <p>legende 2</p> </div>… n Echecs Golf Plus facile à gérer qu'en tableau Informatique Architecture Voile Peinture
48 Propriété clear (valeur left | right | both ) initial n n n code html : <p><img. . /></p> <p>Texte A…</p> <p id="text. B">Texte B</p> code CSS exemple 1 : img {float : right; } Texte A …………… Texte B ………………… ex 1 Texte B …………… ……. ………. …… code CSS exemple 2 : img {float : right; } #text. B {clear: right; } ……………………… ex 2 n Clear permet qu'un élément se place tel qu'il n'ait rien à sa droite, à sa gauche ou ni l'un , ni l'autre. Texte A …………… Texte A …… ………… Texte B ………………
49 Propriétés de listes n n n list-style-type : none | disc | circle | square | decimal | lower-roman| upperroman | lower-alpha | upper-alpha • liste avec list-style-image : url("chemin/fichier. gif") outside list-style-position : outside | inside • liste avec inside n n list-style : list-style-type list-style-image list-style-position exemples : list-style-image : url(carrebleu 1. gif) list-style-type : none list-style : square inside
50 Propriété Display : none | inline | block | list-item n n exemple 1 : <ul> <li>item 1</li> <li>item 2</li> </ul> en CSS : li {display: inline; } • item 1 n • item 2 • item 3 n item 1 item 2 exemple 2 : <a href="…">item 1</a> <a href="…">item 2</a> en CSS : a {display: block; } item 1 item 2
51 Le positionnement n n n Type de positionnement : static | relative | absolute | fixed - static (statique) : flux normal du code html - relative : décalage par rapport à la position statique - absolute (absolue) : position par rapport au parent - fixed (fixe) : position par rapport à la zone de visualisation Emplacement top : n | p % | -n | -p % bottom : n | p % | -n | -p % right : n | p % | -n | -p % left : n | p % | -n | -p % Superposition z-index : n | -n plus n est grand, plus l'élément est au-dessus des autres
52 Le positionnement relatif n n n Statique : flux normal du code html Relatif (relative) - élément dans le flux du code html - décalé par rapport à sa position statique - décalé par rapport à un bord vertical ou/et horizontal - pas de changement de position des autres éléments Exemple : div#bloc 1 { position: relative; top: 10 px; left: -30 px; } top left right bottom -30 px 10 px
53 Le positionnement absolu n n Statique : flux normal du code html Absolue (absolute) - élément indépendant du flux normal -30 px - perd son ancienne position dans le flux - les autres éléments peuvent prendre sa position dans le flux - positionné verticalement ou/et horizontalement (top | bottom, left | right) par rapport à l'origine de son parent - largeur et hauteur sont reportées à partir de cette nouvelle origine Exemple 1 div#bloc 1 { position: absolute; top: 10 px; left: -30 px; } Exemple 2 div#bloc 2 { position: absolute; top: 10 px; left: -30 px; width: 150 px; height: 75 px; } 10 px -30 px 10 px
54 Le positionnement fixe n n n Statique : flux normal du code html Fixe (fixe) - élément dans le flux du code html - décalé par rapport à sa position statique - décalé par rapport à un bord vertical ou/et horizontal - pas de changement de position des autres éléments Exemple : div#bloc 1 { position: relative; top: 10 px; left: -30 px; } top left right bottom -30 px 10 px
55 Le positionnement : superposition d’élément Superposition L’élément de z-index supérieur est au-dessus des autres. div#cercle {z-index: -2; . . . } div#carre{z-index: 1; . . . } div#triangle {z-index: 2; . . . } n
56 Propriétés de page pour l'impression n Pages imprimées @page { } n n size: landscape; margin: 2 cm; Pseudo-classes de pages imprimées @page: first 1ère page du document @page: left pages de gauche du document @page: right pages de droite du document propriétés de taille (size) : portrait | lanscape (paysage)
57 Apparition d'une image au survol dans un menu Partie html <div id="menu"><p> <a href="">menu 1</a> <a href="">menu 2</a> <a href="">menu 3</a> </p><div> Partie css #menu a: hover { background-image: url(images/guillemet. png); background-repeat: no-repeat; background-position: 1% 50%; padding-left: 15 px; }
58 Application css : bouton avec relief n n Partie html <input class="bouton" type="submit'' value="Envoyer" /> Partie css (pas avec ie 6) input. bouton { border: 2 px outset red; font-weight: bold; cursor: pointer; } input. bouton: hover { border: 2 px outset white; background-color: white; color: red; } input. bouton: active { border: 2 px inset red; background-color: red; color: white; }
59 Propriété content n n n h 1: before { content: ’’Rubrique ’’; } -> ajoute l’expression avant l’élément h 1 h 2: after { content: url(haut. gif) ; } -> ajoute l’image après l’élément Ne fonctionne pas avec IE 6
60 Feuille de style CSS externe liée: link n n Pour tous périphériques de sortie <link rel="stylesheet" type="text/css" href="nomdufichier 1. css" /> Pour différents périphériques de sortie <link rel="stylesheet" type="text/css" href="nomdufichier 1. css" media="screen" /> <link rel="stylesheet" type="text/css" href="nomdufichier 2. css" media="print" /> <link rel="stylesheet" type="text/css" href="nomdufichier 2. css" media="braille" /> <link rel="stylesheet" type="text/css" href="nomdufichier 2. css" media="handheld" />
61 Structure de page : noms usuels des zones container header navbar navmain navbar 2 menu footer • • aa bb ccc dd main column aside
62 Structuration de la feuille de style : exemple d'ordre n n n n n Reset global (ex: marge à 0…) Base typographique (H 1, H 2…) Formulaire Structure de page (container, header, main, footer) Structure des templates (colonne 1, colonne 2…) Éléments de contenu Éléments de navigation Eléments-outils ou toolbox (. clearer, . floatleft) Variantes par gabarit Surcharges pour autres medias (print, handled…)
63 Structuration en n feuilles de style n n n Disposition de la page layout. css Typographie de la page style. css Typographie de la partie principale de la page main. css
64 Héritage de propriété n Certaines propriétés héritent de la valeur de propriété du parent. n n n Si on applique une couleur (color) au body, tous les éléments du body héritent de cette couleur. Attention à l'héritage de la taille de police en % et en em… Certaines propriétés n'héritent pas de la valeur de propriété du parent. n n Pas d'héritage de margin et padding. On peut forcer l'héritage d'une propriété par défaut non héritable avec la valeur inherit. {margin: inherit }
65 Feuilles de style en cascades styl 1. css même poids en cas de conflit styl 2. css toto. htm h 1. cs {color: blue; text-align: center} @import "styl 1. css"; p. cs {color: green} à mettre en premier <link href="styl 2. css" rel="stylesheet"> <h 1 class="cs">texte h 1. cs bleu</h 1> <p class="cs">texte p. cs vert</p> <p>texte</>texte p normal</p>
66 Conflits de règles : priorité à la dernière Règle postérieure > Règle antérieure Dans un même emplacement (fichier. css, <style>), la dernière règle annule la règle antérieure. p {font-family: arial} p {font-size: 10 pt} --> p {font-family: arial ; font-size: 10 pt ; } p {font-family: arial ; font-size: 10 pt} p {font-size: 12 pt} --> p {font-family: arial; font-size: 12 pt ; }
67 Conflits de style : priorité à la forme la plus proche Style intra-ligne > Style interne > Style externe (lié ou importé) <style> p {text-align: center; font-size: 10 pt; } </style> … <body> <p align="right">Texte 1</p> <p style="text-align: left">Texte 2</p> <p>Texte 3</p> </body>
68 Conflits de style : sélecteur contextuel h 1, p { color: blue } em { color: red } h 1 em { color: red } <h 1>Chapitre I</h 1> <p>Texte avec <em>point important</em></p> <h 1>Chapitre II avec <em>appui sur un thème</em></h 1> exemples d'utilisation ul li { list-style-type: disc } ul ul li {list-style-type: square ; font-size: 10 pt } #menu ol a: hover {color: red; }
69 Rendre prioritaire avec ! important L'ajout de !important rend prioritaire la déclaration quel que soit son emplacement. h 2 {color: maroon !important} h 2 {color: yellow} h 1 { color: black ! important; background: white ! important } p { font-size: 12 pt ! important; font-style: italic }
71 Priorité en fonction des types de sélecteurs Sélecteur avec identifiant > Sélecteur avec classe ou pseudo-classe > Sélecteur contextuel > Sélecteur simple sélecteur déclaration élément total a li {. . . } a=0 ul ol li {. . . } a=0. titi {. . . } a=0 li. titi {. . . } a=0 ul ol li. titi {. . . } a=0 #toto {. . . } a=1 ID classe b b=0 b=0 b=1 b=1 b=0 c c=1 c=2 c=3 c=0 c=1 c=3 c=0 abc = 001 = 002 = 003 = 010 = 011 = 013 = 100
73 Pour déboguer une page HTML/CSS n n n n Ajoutez la DTD (H)HTML. Passez le code (X)HTML au validateur HTML. Passez le code CSS au validateur CSS. Ajoutez au début du CSS la règle : * { margin : 0; padding : 0; } Appliquez une couleur de fond aux éléments posant problème. Placez en commentaires (/* …*/) les propriétés susceptibles de poser problème. Essayez dans différents navigateurs et différentes versions. Recherchez sur le web ou dans des ouvrages si le problème est connu.
74 Arbre syntaxique : exemple (fichier exercice) html head title body h 1 p p ul em em li li li