Technologies de l Internet Partie 3 : CSS Iulian Ober iulian.ober@irit.fr
Introduction au langage CSS permet de changer la mise en forme d'une page (X)HTML sans modifier son contenu gain de temps, de simplicité de création et de maintenance e.g., charte graphique CSS, appliquée à toutes les pages d'un site capacités de CSS : spécifie l'apparence des blocs de texte ou image spécifie les bordures, les marges, le recouvrement de chaque élément peut aussi contrôler de manière très précise le positionnement des objets, 2
Principe du langage une feuille de style est une suite de règles composants d'une règle: sélecteur { propriété1 : valeur1 ; propriété2 : valeur2 ; } une page (X)HTML est un arbre d'éléments sélecteur précise sur quels éléments s'applique la règle propriété : valeur précise la mise en forme des éléments sélectionnés 3
Où mettre les styles et les feuilles de style feuille de style interne à un document HTML dans l'entête, dans un élément <style>: <style type="text/css">...</style> feuille de style externe, dans un fichier séparé lien dans l'entête : <link rel="stylesheet" type="text/css" href="fichier.css"/> on peut donner plusieurs feuilles de style pour une page application "en cascade" styles définis en-ligne (pas besoin de sélecteur) attribut style, applicable à tous les éléments HTML : <p style="font-family:sans-serif; color:red ;"> 4
Les sélecteurss Peuvent sélectionner un élément sur la base de: son type (h1, p, img, ) sa position relative dans l'arbre d'éléments (fils de, frère de ) son identifiant (attribut id) sa classe (attribut class) la valeur d'un attribut quelconque (e.g., src, href, ) une combinaison de ça 5
Sélection par le type Exemple : h1 { /* propriétés */ } s'applique à tous les éléments <h1> 6
Sélection par la position hiérarchique élément E1 contenu directement ou indirectement dans E2 (héritier de) : E2 E1 { /* propriétés */ } élément E1 contenu directement dans E2 (fils de) : E2 > E1 { /* propriétés */ } élément E1 situé directement après E2 (frère suivant de) : E2 + E1 { /* propriétés */ } 7
Sélection par les attributs élément ayant un identifiant donné (e.g., <h1 id="i1" > </h1>): #i1 { /* propriétés */ } éléments ayant une classe donnée (e.g., <h1 class="c1"> <h1> <p class="c1"> </p>) :.c1 { /* propriétés */ } éléments ayant un attribut égal à une valeur donnée (e.g., <img src="toto.gif" /> ) : [src="toto.gif"] { /* propriétés */ } 8
Sélections complexes on peut combiner les opérateurs de sélection div#leftmenu ol>li em { } sélection d'un <em> inclus dans un <li> restriction : on peut sélectionner un élément en fonction de ses supérieurs, mais pas des ses subordonnés sélection d'un <em> dans un <td> : td em { } sélection d'un <td> contenant un <em> :?!? em td 9
Les classes d'éléments attribut class associable à tous les éléments HTML exemple: <p class="exemple">texte</p> par défaut, pas de changement du rendu visuel sert à faire le lien avec les styles p.exemple {/* style applicable aux paragraphes "exemple" */}.exemple {/* style applicable à tous les éléments "exemple" (paragraphe, div, ) 10
Class vs. ID Si on veut modifier l'apparence : de plusieurs éléments utiliser attribut class="toto" et sélecteur.toto d'un seul élément utiliser attribut id="toto" et sélecteur #toto 11
Pseudo-classes Sélectionner un élément en fonction de son état (déterminé par le navigateur) Exemple : états des liens (<a>) lien non-visité: a:link lien visité: a:visited lien pointé actuellement par la souris: a:hover 12
Pseudo-éléments Sélectionner une partie d'un élément Exemples : première ligne d'un paragraphe: p:first-line première lettre d'un paragraphe: p:first-letter 13
Plus sur les sélecteurss sélecteur universel, s'applique à tous les éléments: * * { color : blue } plusieurs sélecteurs pour une règle : h1,h2,h3 { color : green } règles de résolution de conflits: voir plus loin ici, h1, h2, h3 seront verts car sélecteur plus spécifique 14
div & span éléments HTML dont la seule utilité et de se voir appliquer un style div élément de type bloc saut de ligne avant et après (en flux normal) span élément de type en-ligne pas de saut de ligne 15
Bien choisir les noms de classe CSS est fait pour séparer le style du contenu les noms de classe doivent décrire le contenu, par le style Exemple: on utilise une classe span.enorme {font-size: 30pt} pour du texte important plus tard on découvre que c'est plus agréable de mettre le texte important simplement en rouge on redéfinit span.enorme {color:red} mais le nom n'est plus adéquat, que faire? on aurait dû appeler la classe span.important dès le départ! 16
Propriétés s de mise en forme Principales catégories: texte et polices couleur/image de fond des éléments bordures marges, espacement dimensionnement positionnement caractéristiques des listes et tableaux 17
Couleurs et unités s de mesure Couleurs: par le nom: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (d'autres noms existent mais sont spécifiques aux navigateurs!) par les composants RGB: #rrggbb oùr,g,b sont des chiffres héxa rgb(r,g,b) oùr,g,b sont des nombres de 0 à 255 Unités de mesure: relatives: em, ex spécifiques aux polices px pixels % pourcentage de a valeur héritée absolues: mm, cm, in, pt, pc 18
Quelques propriétés s du texte text-align : left right center justify text-decoration : none underline overline line-through text-transform : none capitalize uppercase lowercase text-indent : length 10% white-space : normal pre nowrap color : rgb(255,0,0) direction : ltr rtl 19
Propriétés s de police font-family font-size font-weight font-style : courier,serif : xx-small x-small small medium : normal bold bolder : normal italic oblique Raccourci pour combiner plusieurs propriétés de polic en une: font : courier small italic 20
Quelques propriétés s du fond background-color : rgb(255,0,0) background-image : url("titi.gif") background-repeat : repeat no-repeat repeat-x repeat-y background-attachment : scroll fixed Raccourci pour combiner plusieurs propriétés de background en une: background : url("titi.gif") fixed no-repeat 21
Modèle des boîtes tout élément HTML est contenu dans une boîte invisible (peut être rendue visible) (top) (left) (right) contenu espacement (padding) - invisible bordure (border) peut être colorée marge (margin) invisible (bottom) 22
Marge et espacement marge margin-top : auto taille margin-right : auto taille margin-bottom : auto taille margin-left : auto taille raccourci : marge : 1px 2px 3px 2px espacement padding-top : taille padding-right : taille padding-bottom : taille padding-left : taille raccourci : marge : 1px 2px 3px 2px 23
Bordures border-width: thin medium thick size border-style: none hidden dotted dashed solid double groove ridge inset outset border-color: color Raccourci pour combiner plusieurs propriétés de polic en une: border : solid 1px blue 24
Interactions entre marges, espacements, bordures Exemple HTML: <ul> <li>premier élément de liste</li> <li class="withborder">s econd élément de liste</li> </ul> 25
Cas particulier: marge auto par défaut : auto = 0 si 2 marges opposés sont "auto", elles divisent l'espace disponible en 2 utile pour centrer les éléments de type bloc dans leur container: div > table { margin-left : auto; margin-right : auto; } 26
Modèle de mise en forme visuel dicte comment les boîtes correspondantes aux éléments sont assemblées 2 contextes de mise en forme contexte de type bloc exemple : dans <body> ou dans un <div> (un <div> peut contenir des blocs en fait il en contient toujours) règle (simplifiée) : les boîtes sont empilées de haut en bas contexte de type en-ligne exemple : dans un <p> (un <p> ne contient pas de blocs) règle (simplifiée) : les boîtes sont alignées de gauche à droite avec retour à la ligne peut générer des boîtes pas rectangulaires! 27
Changer la taille des boîtes chaque boîte a une taille "naturelle" changer la taille des éléments bloc: width : size height : size les tailles relatives (en %) sont par rapport au bloc conteneur de la largeur du paragraphe! <p> </p> <img src="toto.gif" alt="toto" style="width:60%/> 28
Changer la position des boîtes (1) chaque boîte a une position "naturelle", qui peut être changée déplacement relatif ( position : relative ): décalage sur x ou y par rapport à la position naturelle, avec top, bottom, left, right (: size) ne change pas la position des autres boîtes (comme si la boîte n'était pas déplacée) <p> image <img src="portrait.gif" alt="p" style="position:relative; bottom:20px/> déplacée </p> 29
Changer la position des boîtes (2) position absolue : position : absolute position par rapport aux marges : top, bottom, left, right (: size) l'élément est enlevé du flux normal, les autres boîtes sont positionnées comme si l'élément n'existait pas! on peut superposer des éléments ( z-index) <div style=" position:absolute "> image <img src="portrait.gif" alt="p" style="position:absolute; bottom:40px"/> déplacée </div> 30
Changer la position des boîtes (3) position fixe : marche +/- comme absolute mais position fixe par rapport à la fenêtre de visualisation! 31
Changer la position des boîtes (4) boîtes flottantes : la boîte est déplacée vers la gauche / droite sur la ligne courante le reste du contenu (en mode en-ligne) ou les autres boîtes (en mode bloc) s'écoulent le long des flancs de la boîte "flottante" la boîte est enlevée du flux normal <p> <img src=img.gif alt="img" style="float:left"/> Un échantillon de texte. Un échantillon de texte. 32
Modèle de mise en forme visuel Plus de détail Chapitre 9 de la norme CSS2! 33
Directive Import CSS2 permet d'importer une feuille de style au début d'une autre: <style type="text/css"> </style> @import url("loudvoice.css"); 34
Types de médiam CSS2 permet de spécifier des règles applicables à des médias screen, print, projection, handheld, braille, aural Variantes: @media print { @import url("loudvoice.css") aural; color : black; } 35
Règles de cascade et d héritage d Les propriétés peuvent se combiner: * { color : blue; } p { font-weight : bold} un paragraphe sera bleu et gras Il peut y avoir des ambiguïtés: propriétés définies plusieurs fois propriétés pas définies * { color : blue; } h1 { color : green} body { color : blue; } h1 { } règles "de cascade" règles "d'héritage" 36
Règles de cascade résoudre les conflits quand plusieurs affectations sont possibles pour une propriété 1. Prise en compte du média @media print { body {font-size: 10pt} } @media screen { body {font-size: 12pt} } 2. sinon, priorité selon l'origine de la feuille de style: i. feuille de style par défaut du navigateur (utilisateur) ii. feuille de style externe (auteur) iii. feuille de style interne (élément <style>) (auteur) iv. style inline (attribut style) (auteur) 37
Règles de cascade 3. sinon, spécificité du sélecteur : le sélecteur le plus spécifique l'emporte * {} /* a=0 b=0 c=0 -> specificity = 0 */ li {} /* a=0 b=0 c=1 -> specificity = 1 */ ul li {} /* a=0 b=0 c=2 -> specificity = 2 */ ul ol>li {} /* a=0 b=0 c=3 -> specificity = 3 */ h1 + *[rl=up] {} /* a=0 b=1 c=1 -> specificity = 11 */ ul ol li.red {} /* a=0 b=1 c=3 -> specificity = 13 */ #x34y {} /* a=1 b=0 c=0 -> specificity = 100 */ 4. sinon, ordre d'apparition: la dernière règle rencontrée l'emporte 38
Règles d'héritage calculer une affectation de propriété par défaut quand elle n est pas spécifiée il existe des propriétés héritables et nonhéritables! l'héritage s'entend "dans l'arbre du document" <body> <div> <p> 39
Héritage Ordre de priorité dans l'affectation des propriétés: 1. valeur calculée (en cascade) 2. sinon, valeur héritée (du parent) 3. sinon, valeur par défaut (du navigateur) Exemple: <body> body { color: blue; } + <div> <p> sera bleu <p> 40
Règles!important permettent à l'utilisateur de prendre la priorité feuille de style utilisateur: body { color: black!important; background: white!important; } * { color: inherit!important; background: transparent; } texte noir sur fond blanc partout! accessibilité 41
CSS : mot de fin permet de changer la mise en forme d'une page HTML sans modifier son contenu permet de partager la mise en forme de plusieurs pages contrôle de manière très fine la mise en page: positionnement des éléments, bordures, marges, (impossible sans CSS) applicable aussi aux documents XML! 42