Versions/niveaux (level) de CSS Styles CSS Feuilles de styles en cascade Cascading Style Sheets CSS-1 ou CSS level 1 (1996, révisé en 1999) : 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 Florence Petit 26 février 2008 1 2 HTML 3.2 : exemple (répétition des attributs) HTML 4 avec CSS : exemple <body bgcolor="white"> <h1 align="center">titre 1</h1> <p> <font face="arial, Helvetica" color="red" size="3"> <i><b>mon texte 1</b></i></font></p> <p><font face="arial, Helvetica" color="red" size="3"> <i><b>mon texte 2</b></i></font></p> <h1 align="center">titre 2</h1> <p><font face="arial, Helvetica" color="red" size="3"> <i><b>mon texte 3</b></i></font></p> <h1 align="center">titre 3</h1> body {background-color: white; h1 {text-align: center; p {color:red; font: italic bold 1em Arial, Helvetica; <h1>titre 1</h1> <p>mon texte 1</p> <p>mon texte 2</p> <h1>titre 2</h1> <p>mon texte 3</p> <h1>titre 3</h1> en CSS en XHTML ou HTML 4 3 4 Balises et attributs dépréciés Les styles CSS : avantages et inconvénients Balises du HTML3.2 dépréciées en HTML4, remplacés par des styles : <center> </center> <font color=" " face=" " size=" ">...</font> Attribut dépréciés en HTML4, remplacés par des styles : bgcolor=" " align=" " Balises logiques préférables aux balises physiques : <strong>...</strong> préférable à <b>...</b> <em>...</em> préférable à <i>...</i> 5 Avantages Séparation contenu/mise en forme Meilleure lisibilité du code Code html du fichier 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 Non reconnus des anciens navigateurs (< v. 4), un peu par IE3 Mieux reconnus depuis les versions 6 de Nescape, IE Subsistance de quelques incompatibilités Modèle de boîte différent pour Internet Explorer 5 6 UMLV / F. Petit 1
Déclaration de style Unités de taille (police, dimension d'élément...) Syntaxe Exemples Raccourci pour plusieurs propriétés voisines propriété1: valeur1; color: red; background-color: #cfcfcf; text-decoration: none; text-decoration: underline; font-weight: bold; font-size: 1.5pt; font-family: 'Times New Roman', Times, Serif; font: italic small-caps bold 8pt/12pt Arial,Times; border: 3px solid black; 7 Unité absolue Pouce (2,54cm) : 1.5in Centimètre : 1.5cm Millimètre : 1.5mm Point (1/72 in) : 15pt Pica (12 pt,1/6 in) : 15pc 0 Taille nulle Unité relative Pourcentage : 150% Taille moyenne de police utilisée dans les navigateurs : size="3" (HTML 3.2) <=> 14px <=> 12pt Taille (largeur M) : 1.5em Taille (hauteur x) : 1.5ex Pixel (résolution) : 15px 8 Codage des couleurs en CSS Règle CSS color: red border-color:red background-color:red couleur de texte couleur de bordure couleur de fond déclaration identificateur de propriété valeur Les couleurs peuvent être exprimées sous la forme : nom : red, blue, black, gray, white #rrvvbb (hexadécimal) : #cc0088 #rvb (hexadécimal abrégé) : #c08 rgb(x, y, z) : rgb(255, 0, 122) rgb(x%, y%, z%) : rgb(100%, 0%, 50%) règle CSS sélecteur h2 {color:red; text-align:center; bloc de déclarations 9 10 Ajout des styles en HTML et XHTML Style en ligne Style en ligne (intra-ligne ou incorporé) attribut style=" " dans la balise d'élément Feuille de style interne au document dans la partie <head> liste des règles CSS dans balise <style></style> Feuille de style externe liée liste des règles CSS dans un fichier externe.css appel à ce fichier externe avec une balise <link /> Feuille de style externe importée liste des règles CSS dans un fichier externe.css appel à un fichier externe avec @import Bloc de déclarations CSS incorporé dans la balise avec attribut style S'applique à une balise précise du document Intéressant pour un essai lors du développement Exemple : <p style="text-align: center; background-color:#ccc;">texte</p> A remplacer plutôt par l'utilisation d'un identifiant CSS : #truc {text-align: center; background-color:#ccc;"> XHTML : <element id="truc"> Texte 11 12 UMLV / F. Petit 2
Feuille de style interne Feuille de style CSS externe liée Liste de règles CSS dans une balise style dans l'en-tête du document Règle appliquée à tous les sélecteurs correspondant du document Peu adaptée pour une mise en forme de plusieurs documents Adaptée pour un document isolé Exemple : <head> <style type="text/css"> body {background-color:white; color:blue; h1 {text-align: center; font-size:1.5em;color:black; </style> </head> <h1>titre A</h1> <p>texte</p> <h1>titre B</h1> Liste de règles CSS dans un fichier CSS externe Balise link à ajouter dans l'en-tête des documents html S'applique à tous les sélecteurs correspondant des documents liés Adaptée à un site web Exemple : 1) Dans le fichier html <head> <link rel="stylesheet" type="text/css" href="chemin/monstyle.css" /> </head> 2) Dans le fichier monstyle.css body {background-color:white; color:blue; h1 {text-align: center; font-size:1.5em;color:black; 13 14 Feuille de style CSS importée 4 différentes manières d'appliquer un style 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 S'applique à tous les sélecteurs correspondant des documents liés Adapté à un site web, notamment pour "cascader les styles" Syntaxe @import "fichier.css" @import url("fichier.css") Exemple (dans une feuille interne) <style type="text/css"> @import url("fichier.css") p {color:red; </style> <html> <head> <title>titre</title> <link rel="stylesheet" type="text/css" href="fichier1.css" /> <style type="text/css"> @import url("fichier2.css"); h1 { color: blue </style> </head> <h1>ce titre est en bleu à cause du style interne</h1> <p style="color: green" >et le paragraphe est en vert.</p> </html> 15 16 Code CSS : Indentation et commentaires Les différents sélecteurs : exemples body { background-color:white ; /***********/ /* titre */ /***********/ h1, h2 { text-align: center; color:#333; /* gris sombre */ /* menu */ #menu li { font-size:0.8em; Elément (sélecteur de type) : h1 Regroupement de sélecteurs : h1, h2, p Sélecteur universel : * Identifiant : p#intro1 #intro1 Classe : p.intro.intro Pseudo-classe : a:hover Sélecteur contextuel (combinaison imbriquée d'éléments) : h1 a 17 18 UMLV / F. Petit 3
Elément (Sélecteur de type) Regroupement de sélecteurs (avec virgule) Elément (ou sélecteur de type) h1 { color:red; font-size:2em; h2 { color:red; font-size:1.5em; p { color:black; h1 {color:red; font-size:2em h2 {color:red; p {color:red; h1 {color:red; font-size:2em h2 {color:red; p {color:red; h1, h2, p {color:red; h1 {font-size:2em; h1 h2 p {color:red; h1 {font-size:2em; 19 20 Sélecteur universel * Sélecteurs contextuels (sélecteurs descendants) * remplace tout élément du document dans la partie style CSS, par exemple * {margin:0 -> Tous les éléments du body (h1, h2, p, div, ul ) auront une marge de 0. 21 Espace blanc comme opérateur Exemple : h1 em h1 est un ancêtre de em, même lointain. em est un descendant de h1, même lointain. Dans la partie CSS h1 {color: blue; h1 em {color: red; p {color: black; em {color: green; --------------------------------------- Dans le body <h1>titre A</h1> <p>texte A </p> <h1>titre B <em> Titre C</em>Titre D </h1> <p>texte B <em> Texte C</em> Texte D </p> <p>texte B <span>texte S<em> Texte C</em></span> Texte D </p> 22 Identifiant (attribut générique) Classe (attribut générique) Un identifiant est unique dans un document. Il identifie un élément. Ajout dans une balise du document html : <p id= "intro">texte d'introduction</p> Utilisation dans une règle CSS : #intro {font-style: italic; text-align:center; identique à : p#intro {font-style: italic; text-align:center; Une classe permet de définir un sous-ensemble. Elle peut s'appliquer à plusieurs éléments. Ajout dans une balise du document html : <h1 class="intro">titre 1</p> <p class="intro">texte 2</p> <p class="intro">texte 3</p> <img class="logo">...</p> Utilisation dans une règle CSS :.intro {font-style: italic; h1.intro {text-align: center;.logo {border: 1px solid red ;.intro {color:blue; h1.intro {color:green;.logo {border: 1px solid red; 23 24 UMLV / F. Petit 4
Eléments div et span (éléments neutres) Les pseudo-classes et les pseudo-éléments 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="menu1"> <ul><li> </li>...</ul> </div> <div id="piedpage"> <p> </p> <p> </p> </div> span : 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> 25 Différencie différents états d'un élément Pseudo-classes d'ancre (élément a) pour les états des liens a:link --> lien standard a:visited --> lien visité (cliqué) a:hover --> lien pointé a:active --> lien pendant le clic Exemple : a:link {text-decoration: none; a:hover, a:active {text-decoration:underline; color: red; Pseudo-éléments (ici appliqués à l'élément p) p:first-line {font-variant: small-caps; 1re ligne des paragraphes p:first-letter {font-size:2em;color:red; 1re lettre des paragraphes 26 Combinaisons de sélecteurs Propriétés de police de caractères Combinaisons possibles des différents sélecteurs Exemples : #menu1 li {line-height:2em; #menu1 li a:link {color:black; #menu1 li a:hover {color:red; #menu1 li a:active {color:red; li#intro {font-style:italic; font-style: normal italic oblique font-variant: normal small-caps font-weight : normal bold bolder lighter 100 700 900 font-size : n p% xx-small small smaller large larger xx-large line-height: n p% (interligne entre 2 lignes) font-family: police1, police2, police3 Exemple de propriété raccourcie (ordre important) : font: italic small-caps bold 10pt/14pt Times 27 28 Propriété font-family Propriétés de texte Liste de polices (pour différents OS + police générique en dernier ) font-family: Arial, Helvetica, sans-serif 5 familles de police génériques serif (ex. Times, Times new roman, Palatino, Georgia) sans-serif (ex. 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 serif Sans-serif Cursive fixe word-spacing: n -n letter-spacing: n -n text-decoration: none underline overline blink line-through text-transform: uppercase lowercase capitalize text-align: left right center justify text-indent (retrait des lignes) : n p% white-space : normal pre nowrap UPPERCASE lowercase Capitalize 29 30 UMLV / F. Petit 5
Modèle de boîte et propriétés Propriétés de blocs (body, p, hn, ) : marge margin (marge externe) border (bordure) padding (marge interne, remplissage) contenu de la boîte : texte, images width height margin-top: margin-right: margin-bottom margin-left valeurs possibles : n p% -n -n% auto exemples : 5pt -12px 2em 10% Exemples de propriété raccourcie : On part d'en haut, on tourne dans le sens des aiguilles d'une montre margin: 5em 10em 5em 10em margin: 5em --> 5 pour toutes les marges margin: 5em 10em --> 5 haut/bas 10 droit/gauche margin: 5em 3em 2em --> 5 haut 3 droit 2 bas 3 gauche (=droit) 31 33 Propriétés de boîtes : remplissage Propriétés : border 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 padding: 5em 10em 5em 10em padding: 5em --> 5 pour toutes padding: 5em 10em --> 5 haut/bas 10 droit/gauche padding: 5em 3em 2em --> 5 haut 3 droit 2 bas 3 gauche (=droit) 34 border-top-width: n thin medium thick border-left-width: n thin medium thick border-width: 2pt 9pt 9pt 2pt 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: 2px dashed red border: 2px dotted red --> 4 bordures identiques (idem avec bottom) (idem avec right) 35 Utilisation de marges automatiques pour centrer un bloc Propriétés d'arrière-plan Dans la partie CSS #conteneur { width: 600px; margin-left: auto; margin-right: auto; padding: 1em; en HTML <div id="conteneur"> </div> 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, Background-attachment: scroll fixed Background-position: 50% 50% (ou 20px 10px) Background-color: #ccc Background-image: url(logo.gif) Background-repeat: repeat repeat-x repeat-y no-repeat Exemple de propriété raccourcie : Background: scroll 50% 50 % #ccc url(logo.gif) no-repeat 36 37 UMLV / F. Petit 6
Background-attachment Background-repeat fixed ligne 7 ligne 8 haut de l'écran ligne 1 ligne 2 ligne 3 bas de l'écran après défilement par défaut : scroll ligne 7 ligne 8 no-repeat repeat-x par défaut : repeat repeat-y 38 39 Background-position Propriété Float par défaut background-position: x y (valeur négative possible) 0% 0% top left left top 50% 0% top center center top top 100% 0% top right right top float: left right Utilisation : image, menu, bloc de textes, lettrine ex : <p>texte1 <img... /></p> img {float: left; img {float: right; 0% 50% left center center left left 0% 100% bottom left left bottom 50% 50% center center center 50% 100% bottom center center bottom bottom 100% 50% right center center right right 100% 100% bottom right right bottom 40 Texte1.......... Texte1...... 41 Propriété Clear Propriétés de listes clear: left right both exemple : <p>texte1 </p> <p id="text2">texte2</p> <img... /></p> avec CSS img {float : left; #text2 {clear: left; Texte1 Texte2... Texte1 Texte2 list-style-type : none disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha liste avec list-style-image : url("chemin/fichier.gif") outside list-style-position : outside inside list-style : list-style-type list-style-image list-style-position exemples : list-style-image : url(carrebleu1.gif) list-style-type : none list-style : square inside liste avec inside 42 43 UMLV / F. Petit 7
Propriété Display Display : none inline block list-item exemple 1 : <ul> <li>item1</li> <li>item2</li> </ul> en CSS : li {display:inline; item1 item2 item3 item1 item2 item1 item2 exemple 2 : <a href=" ">item1</a> <a href=" ">item2</a> en CSS : a {display:block; item1 item2 Le positionnement 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 au parent 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 44 45 Le positionnement relatif Le positionnement absolu Statique : flux normal du code html 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#bloc1 { position: relative; top: 10px; left: -30px; -30px top left right bottom 10px 46 Absolue (absolute) - élément indépendant du flux normal -30px - 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#bloc1 { position: absolute; top: 10px; left: -30px; Exemple 2 div#bloc2 { position: absolute; top: 10px; left: -30px; width: 150px; height:75px; -30px 10px 10px 47 Le positionnement : superposition d élément propriétés de page pour l'impression 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;... Pages imprimées @page { size: landscape; margin: 2cm; 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) 48 49 UMLV / F. Petit 8
Apparition d'une image au survol dans un menu Application css : bouton avec relief Partie html <div id="menu"><p> <a href="">menu 1</a><br /> <a href="">menu 2</a><br /> <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:15px; 51 Partie html <input class="bouton" type="submit'' value="envoyer" /> Partie css (pas avec ie6) input.bouton { border:2px outset red; font-weight:bold; cursor:pointer; input.bouton:hover { border:2px outset white; background-color:white; color:red; input.bouton:active { border:2px inset red; background-color:red; color:white; 52 Propriété content Feuilles de style en cascades h1:before {content: Rubrique -> ajoute l expression avant l élément h1 h2:after {content:url(haut.gif); -> ajoute l image après l élément Ne fonctionne pas avec IE6 styl1. css même poids en cas de conflit styl2. css toto.htm h1.cs {color: blue; text-align:center @import "styl1.css"; p.cs {color: green <link href="styl2.css" rel="stylesheet"> <h1 class="cs">texte h1.cs bleu</h1> <p class="cs">texte p.cs vert</p> <p>texte</>texte p normal</p> à mettre en premier 53 54 Conflits de règles : priorité à la dernière Conflits de style : priorité à la forme la plus proche Règle postérieure > Règle antérieure La dernière règle annule la règle antérieure d'un même emplacement (fichier.css, <style>). 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 ; Style intra-ligne > Style interne > Style externe (lié ou importé) <style> p {text-align: center; font-size:10pt; </style> <p align="right">texte 1</p> <p style="text-align:left">texte 2</p> <p>texte 3</p> 55 56 UMLV / F. Petit 9
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:10pt; </style> <p align="right">texte 1</p> <p style="text-align:left">texte 2</p> <p>texte 3</p> Conflits de style : sélecteur contextuel h1, p { color: blue em { color: red h1 em { color: red différent de em h1 { color: green <h1>chapitre I</h1> <p>texte avec <em>point important</em></p> <h1>chapitre II avec <em>appui sur un thème</em></h1> exemples d'utilisation ul li { list-style-type: disc ul ul li {list-style-type: square ; font-size: x-small div.menu ol a:hover {background-color: blue; 57 58 Rendre prioritaire avec! important Priorité en fonction des types de sélecteurs L'ajout de!important rend prioritaire la déclaration quel que soit son emplacement. h2 {color: maroon!important h2 {color: yellow h1 { color: black! important; background: white! important p { font-size: 12pt! important; font-style: italic Sélecteur avec identifiant > Sélecteur avec classe ou pseudo-classe > Sélecteur contextuel > Sélecteur simple sélecteur déclaration ID classe élément total a b c abc li {... a=0 b=0 c=1 = 001 ul li {... a=0 b=0 c=2 = 002 ul ol li {... a=0 b=0 c=3 = 003.red {... a=0 b=1 c=0 = 010 li.red {... a=0 b=1 c=1 = 011 ul ol li.red {... a=0 b=1 c=3 = 013 #x34y {... a=1 b=0 c=0 = 100 59 60 UMLV / F. Petit 10