Feuilles de Styles en Cascade CSS : C ascading S tyle S heets

1. Cours « CSS » - Mardi 3 février 2009, 8h00-18h00 et Mardi 17 février 2009, 13h30-1800 François Daniel Giezendanner, SEM (Service Ecoles-Medias) - DIP - Genève, 5 rue des Gazomètres, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch - http://icp.ge.ch/sem/cms-spip/ Feuilles de Styles en Cascade CSS : CascadingStyleSheets Une référence importante : CSS2 : Les feuilles de style en cascade, niveau 2 http://www.yoyodesign.org/doc/w3c/w3c.html#css2

2. Préambule A Avantages des Feuilles de styles en cascade (CSS) • Séparation de la structure et de la mise en page. • Permet de gérer le « look » des pages d’un site de manière centrale, donc maintenance facilitée et moins coûteuse du site. • Homogénéisation de l'aspect visuel d'un site web. • Mise en page HTML, XHTML et XML sophistiquée. • Code HTML de la page allégé et plus « lisible » donc diminution du poids et du temps de chargement. • Diversification des feuilles de styles pour s'adapter à plusieurs équipements de sortie : affichage à l'écran, impression, vocal, etc. • Mise en page moins facile mais plus précise qu’avec les tableaux. • Infinité de mises en pages riches et diversifiées (cf. css Zen Garden)

3. Infinité de mises en pages riches et diversifiées : Cf. css Zen Garden http://www.mezzoblue.com/zengarden/alldesigns/7 avril 2008 : 209 mises en pages diffférentes

4. Préambule B Rappel sur : • Les couleurs et leur « codage » • Les unités de mesure … utilisées avec les CSS

5. r, g et b : hexadécimal = 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f #rrggbb r, g et b : hexadécimal = 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f #rgb rrr.rr ggg.gg bbb.bb rgb(rrr.rr%,ggg.gg%,bbb.bb%) 0 <= <= 100.00% rrr ggg bbb rgb(rrr,ggg,bbb) 0 <= <= 255 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow keyword Il existe cinq manières de spécifier les valeurs d’une couleur avec les CSS Attention avec les CSS : balises, sélecteurs, classes, identifiant, valeurs … en minuscule

6. Unités de couleur CSS Unité Description #rrggbb Un nombre hexadécimal ( ex : #aa00ff ) #rgb Notation abrégée de rrggbb ( ex : #a0f ) rgb(rrr.rr%,ggg.gg%,bbb.bb%) Valeur RGB en % ( ex : rgb(0%, 77.5%,0%) ) rgb(rrr,ggg,bbb) Une valeur RGB (ex : rgb(0,255,128) ) Keyword / mot-clé Un des 16 nom standards de couleur : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. Attention avec les CSS : balises, sélecteurs, classes, identifiant, valeurs … en minuscule

7. 16 couleurs désignées par leur nom en langue anglaise (code hexadécimal simple) aqua Mots/clés (keywords) et couleurs standards W3C

8. 16 couleurs désignées par leur nom en langue anglaise (code hexadécimal simple) aqua Mots/clés (keywords) et couleurs standards W3C

9. Couleurs web-safe Couleurs non web-safe 16 couleurs désignées par leur nom en langue anglaise (code hexadécimal simple) aqua Mots/clés (keywords) et couleurs standards W3C

10. 16 couleurs désignées par leur nom en langue anglaise (code hexadécimal simple) Couleurs web-safe aqua Mots/clés (keywords) et couleurs standards W3C Couleurs non web-safe

11. 16 couleurs désignées par leur nom en langue anglaise (code hexadécimal simple) Couleurs web-safe aqua Mots/clés (keywords) et couleurs standards W3C Couleurs non web-safe

12. 16 couleurs désignées par leur nom en langue anglaise (code hexadécimal simple) aqua Mots/clés (keywords) et couleurs standards W3C

13. 17 Valeur Couleur Hexadec Hexa court RGB RGB orange #FF6600 F60 255,102,0 100%,40%,0% Certains auteurs mentionnent également la couleur orange 16 couleurs désignées par leur nom en langue anglaise (code hexadécimal simple) aqua Mots/clés (keywords) et couleurs standards W3C

14. Couleurs « Compatibles Web » : Celle qui évitent le tramage en 256 couleurs Les couleurs « Compatibles Web », s’expriment avec les valeurs 00, 0, ou 0%, ou des multiples de 33, 3, 51 ou 20% soit : Hexadec : multiples de 33 : triplets de 00, 33, 66, 99, CC, FF Exemples : #66CC99, #FF3366, #0099CC, ... Hexa court : multiples de 3 : triplets de 0, 3, 6, 9, C, F Exemples : #6C9, #F36, #09C, ... RGB : multiples de 51: 0, 51, 102, 153, 204 et 255 Exemples : rgb(51,0,153), rgb(102,204,51), rgb(255,102,153), ... % : multiples de 20% : 0%, 20%, 40%, 60%, 80%, 100% Exemples : rgb(60%,20%,80%), rgb(100%, 40%, 0%), ... … mais en 2008, existe-t’il encore des cartes graphiques limitées à 256 couleurs ?

15. Mots/clés (keywords) et couleurs NON standards W3C #FFFF00 = yellow #800080 = purple #808080 = gray etc. = = = yellow purple gray Sur le site Web-Wise-Wizard, à la page « HTML Web Color Names (http://web-wise-wizard.com/html-tutorials/html-web-rgb-hex-color-names.html), Gilbert Hadley fait état : des différences d’affichage de couleurs à l’écran entre une couleur exprimée avec un code hexadécimal et la même couleur exprimée avec le mot clé correspondant (son équivalent) tel que : Différences d’affichage de couleurs à l’écran entre le code hexadécimal et le mot clé correspondant D’autre part, il donne la liste des mots-clés supportés par la plupart des navigateurs, mais qui ne sont pas supportés par le standard W3C pour les CSS. On trouve de nombreuses pages sur le web présentant et discutant cette liste de couleurs « non standards », par exemple w3schools (Http://www.w3schools/css/css_colorname.asp)

16. http://web-wise-wizard.com/html-tutorials/html-web-rgb-hex-color-names.htmlhttp://web-wise-wizard.com/html-tutorials/html-web-rgb-hex-color-names.html

17. http://web-wise-wizard.com/html-tutorials/html-web-rgb-hex-color-names.htmlhttp://web-wise-wizard.com/html-tutorials/html-web-rgb-hex-color-names.html

18. http://web-wise-wizard.com/html-tutorials/html-web-rgb-hex-color-names.htmlhttp://web-wise-wizard.com/html-tutorials/html-web-rgb-hex-color-names.html

19. Http://www.w3schools/css/css_colorname.asp

20. Http://www.w3schools/css/css_colorname.asp

21. Préambule C Rappel sur : • Les unités de mesure ... … utilisées avec les CSS

22. % entière 25% Pourcentage par rapport à une référence (taille de police d’une boîte bloc, fenêtre, calque, cellule, etc.) px entière 200px Pixel (un point sur l’écran de l’ordinateur) Relatives em réelle 2.5em L’unité est la largeur de la lettre M (majuscule) ex réelle 0.5ex L’unité est la hauteur de la lettre x (minuscule) pt entière 14pt Point typo (1 pt = 1/72 inch, 1/12 pica) pc réelle 12pc Pica (12 points, 1/6 pouce) cm entière 10cm Centimètre absolues mm entière 5mm Millimètre in réelle 3in Inch (1 inch = 1 pouce = 2.54 cm) Unités de mesure CSS Unité Valeurs Exemple Description • Le séparateur décimal est le point et non pas la virgule. • Il n'y a pas d'espace entre le nombre et l'unité. • Seul le nombre 0 peut être dispensé de son unité. Attention avec les CSS : balises, sélecteurs, classes, identifiant, valeurs, unités … sont écrits en minuscule

23. Préambule D Doctype –DTD DéfinitiondeTypedeDocument

24. Doctype –DTD – DéfinitiondeTypedeDocument 1) DTD Strict : tous les éléments de présentation sont pris en charge par des feuilles de style : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> 2) DTD Transitional : appelée aussi “ loose ”, elle permet d’utiliser un mélange de CSS et de balises ou attributs de présentation du HTML : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lose.dtd"> <html> 3) DTD Frameset : utilisée lorsque le document HTML comporte aussi des cadres : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> En HTML, trois DTD possibles prennent en charge la gestion des CSS :

25. Doctype –DTD – DéfinitiondeTypedeDocument Porte bien son nom, Assez difficile à atteindre. 1) DTD Strict : tous les éléments de présentation sont pris en charge par des feuilles de style : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> 2) DTD Transitional : appelée aussi “ loose ”, elle permet d’utiliser un mélange de CSS et de balises ou attributs de présentation du HTML : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lose.dtd"> <html> Préférée pour cause de confort. 3) DTD Frameset : utilisée lorsque le document HTML comporte aussi des cadres : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> En HTML, trois DTD possibles prennent en charge la gestion des CSS :

26. Doctype –DTD – DéfinitiondeTypedeDocument 1) DTD Strict : tous les éléments de présentation sont pris en charge par des feuilles de style : <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> 2) DTD Transitional : appelée aussi “ loose ”, elle permet d’utiliser un mélange de CSS et de balises ou attributs de présentation du XHTML : <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3) DTD Frameset : utilisée lorsque le document HTML comporte aussi des cadres : <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> En XHTML, trois DTD possibles prennent en charge la gestion des CSS:

27. Hiérarchie arborescente des balises HTML Structure logique du Fichier HTML document, sémantique Boîtes imbriquées Règles CSS Mise en page design Feuilles de styles en cascade CSS : CascadingStyleSheets Pensez aux équivalences, correspondances & inter-relations : HTML et CSS pour séparer le fond et la forme

28. Extrait d’un code du site css Zen Garden css Zen Garden: The Beauty in CSS Design [1/6] Arbre du document et degré de parenté des éléments http://p7app.geneve.ch:8007/spip/article.php3?id_article=160 • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> • <html> • <head> • <title>css Zen Garden: The Beauty in CSS Design</title> • <style type="text/css" title="currentStyle"> • @import "/001/001.css"; • </style> • </head> • <body> • </body> • </html>

29. [2/6] css Zen Garden <div> <div> <div> <h1><span>css Zen Garden</span></h1> <h2><span>The Beauty of CSS Design</span></h2> </div> <div> <p><span> …</span></p> <p><span> …<a>…</a></span></p> </div> <div> <h3><span>…</span></h3> <p><span> …</span></p> <p><span> …</span></p> </div> </div> <div> <div> <div> <h3><span>Select a Design:</span></h3> <ul> <li><a>Attitude</a> by <a>Stephane Moens</a></li> <li><a>Urban</a> by <a>Matt Kim &amp; Nicole</a></li> <li><a>Paravion</a> by <a>Emiliano Pennisi</a></li> <li><a>Verdure</a> by <a>Lim Yuan Qing</a></li> </ul> </div> </div> </div> </div> Extrait d’un code du site css Zen Garden

30. Extrait d’un code du site css Zen Garden <div> <div> <div> <h1><span>css Zen Garden</span></h1> <h2><span>The Beauty of CSS Design</span></h2> </div> <div> <p><span> …</span></p> <p><span> …<a>…</a></span></p> </div> <div> <h3><span>…</span></h3> <p><span> …</span></p> <p><span> …</span></p> </div> </div> <div> <div> <div> <h3><span>Select a Design:</span></h3> <ul> <li><a>Attitude</a> by <a>Stephane Moens</a></li> <li><a>Urban</a> by <a>Matt Kim &amp; Nicole</a></li> <li><a>Paravion</a> by <a>Emiliano Pennisi</a></li> <li><a>Verdure</a> by <a>Lim Yuan Qing</a></li> </ul> </div> </div> </div> </div> [3/6] css Zen Garden

31. <html> <body> 1 2 3 4 6 5 5 6 5 6 7 4 5 6 8 </body> </html> [4/6] css Zen Garden <div> <div> <div> <h1><span>css Zen Garden</span></h1> <h2><span>The Beauty of CSS Design</span></h2> </div> <div> <p><span> …</span></p> <p><span> …<a>…</a></span></p> </div> <div> <h3><span>…</span></h3> <p><span> …</span></p> <p><span> …</span></p> </div> </div> <div> <div> <div> <h3><span>Select a Design:</span></h3> <ul> <li><a>Attitude</a> by <a>Stephane Moens</a></li> <li><a>Urban</a> by <a>Matt Kim &amp; Nicole</a></li> <li><a>Paravion</a> by <a>Emiliano Pennisi</a></li> <li><a>Verdure</a> by <a>Lim Yuan Qing</a></li> </ul> </div> </div> </div> </div>

32. 1 2 3 4 5 6 7 8 9 css Zen Garden: The Beauty in CSS Design [5/6]

33. css Zen Garden: The Beauty in CSS Design [6/6] <div> <div> <div> <h1><span>css Zen Garden</span></h1> <h2><span>The Beauty of CSS Design</span></h2> </div> <div> <p><span> …</span></p> <p><span> …<a>…</a></span></p> </div> <div> <h3><span>…</span></h3> <p><span> …</span></p> <p><span> …</span></p> </div> </div> <div> <div> <div> <h3><span>Select a Design:</span></h3> <ul> <li><a>Attitude</a> by <a>Stephane Moens</a></li> <li><a>Urban</a> by <a>Matt Kim &amp; Nicole</a></li> <li><a>Paravion</a> by <a>Emiliano Pennisi</a></li> <li><a>Verdure</a> by <a>Lim Yuan Qing</a></li> </ul> </div> </div> </div> </div>

34. Notes préliminaires et Définition • Les balises imbriquées ne peuvent jamais être croisées • Tous les noms des balises sont écrits en minuscule • Toutes les balises sont fermées Elément : Couple ouvert et fermé d’une balise HTML : Exemples : <p> … </p> <h1> … </h1> <span> … </span> <div> … </ div > <pre> … </ pre > … <ul> … </ul> <ol> … </ol> <li> … </li> <img…/> <br /> <hr /> Les balises vides sont explicitées : Exemples : <br> devient <br /> <hr id=« top »> devient <hr id="top" /> , etc.

35. Définition des styles Propriétés ou attributs des styles • Les styles permettent de définir : • les alignements de texte • les couleurs de texte • les couleurs de fond • la taille des polices utilisées • etc. • Ces caractéristiques sont appelées propriétésou attributs. • Exemples de propriétés : • text-align • color • background-color • font-size • …

36. Propriété, valeur, déclaration, liste et bloc de déclarations Définir un style consiste à préciser la valeur d'une ou de plusieurs propriétés pour un élément HTML donné. Exemple de valeur pour text-align : • text-align:left; • text-align:right; • text-align:justify; • text-align:center; • Le binôme propriété:valeurconstitue une déclaration ou définition,c’est une instruction de mise en page. • L'ensemble propriété1:valeur1; propriété2:valeur2; constitue une liste de déclarations. • La liste de déclarations placée entre accolades s’appelle bloc de déclaration : { propriété1:valeur1; propriété2:valeur2; }

37. bloc de déclaration(s) sélecteur{ propriété1: valeur1; propriété2: valeur2; } règle de style CSS Le sélecteur peut être : • un élément HTML • une classe • une pseudo-classe • un identifiant ID Règle de style = Sélecteurs + bloc de déclaration(s) • Feuille de style = jeux de Règles de stylequi précisent l’affichage des élémentsHTML. • Chaque règle de style CSS est composée de : • un sélecteur qui indique à quel type d ’élément HTML la règle s’applique • un bloc de déclaration(s).

38. Règle CSS Bloc de déclarations Liste de déclarations Sélecteur Propriété Valeur Déclaration .colonnegauche { margin: 0px; padding: 0%; float: left; position: static; background-color: #FFBEEB; width: 25%; text-align: left; }

39. Règle 1 Règle 2 .gauche { margin: 0px; padding: 0%; float: left; position: static; background-color: #FFBEEB; width: 25%; text-align: left; } .droite { background-color: #FFFF66; margin: 0px; padding: 0%; float: right; width: 25%; text-align: left; position: static; }

40. Les 4 techniques d'application des styles Il existe 4 techniques pour appliquer des styles à un document HTML: 1. Style en ligneou incorporé (Inline Style) : Défini directement dans l'élément concerné par l'attribut "style" dans la balise. 2. Feuille de style incorporée dans le document (Embedded Style Sheet):Liste de règles CSS dans l'en-tête <head> </head> du document à l'intérieur d'une balise <style></style> 3. Feuille de style externe liée (Linked Style Sheet) : Liste de règles CSS dans un fichier séparé à extension CSS; balise <link /> dans le document source. 4. Feuille de style externe importée (Imported Style Sheet) : Liste de règles CSS dans un fichier séparé à extension CSS; @import dans le document source. • Le style en ligne englobe définition et utilisation dans une même balise. • Dans une feuille de styles, la définition du style est isolée de son appel (utilisation) dans le document.

41. 1. Style en ligne (intra-ligne ou incorporé) [1/1] • Le style en ligne est élaboré pour un seul élément. La balise de l'élément est complétée par l'attribut : • style ="propriété: valeur" • qui précise la définition des propriétés. <élémentstyle="propriété: valeur"> Exemple : <pstyle="font-size:16pt ; text-align:center ; width:100% ; color:#ff0000; " > Voici un paragraphe de largeur 100% dont le texte est rouge, centré, en 16 pt. </p>

42. Syntaxe générale : des accolades entourent les déclarations des styles pour chaque élément : • <style type="text/css"> • element1 {propriété1: valeur1; propriété2: valeur2;} • element2 {propriété1: valeur1; propriété2: valeur2;} • </style> Remarque : correspondance « élément1 <--> sélecteur1 » « élément2 <--> sélecteur2 » 2. Feuille de style incorporée (interne ou globale) [1/2] Les règles de styles des différents éléments sont regroupés dans une balise spécifique <style></style> placée dans l'en-tête ( entre les balises <head> et </head> ) du document HTML. Cela permet de définir globalement les styles de toute la page HTML à l'intérieur même de la page. Cette technique permet de modifier facilement la présentation de toute la page.

43. 2. Feuille de style incorporée (interne ou globale) [2/2] Exemple : • feuille de style incorporée qui définit • un fond d'écran et • la justification des paragraphes. • <head> • ... • < style type="text/css"> • body {background-image:URL(image.gif)} • p {text-align:justify} • </style> • ... • </head> • <body> • ... • <p>Voici un paragraphe justifié.</p> • <p>Voici un autre paragraphe justifié.</p> • ... • </body>

44. 3. Feuille de style externe liée [1/3] Une feuille de style externe liée est un fichier de texte à extension .css, qui contient la liste des règles CSS. Ce fichier permet de grouper les stylesde plusieurs pages HTML, voire d'un site Web entier. • Cette dernière technique est donc la plus performante car : • Le chargement des informations de style de différentes pages ne se fait qu'une seule fois. • La feuille de style liée est mise en mémoire séparément. • Les documents sont moins volumineux. • Une modification s'applique sur toutes les pages. Le fichier externe à extension css (feuille de style externe) contient uniquement les règles de styles, avec éventuellement des commentaires, mais sans aucun autre code HTML (même minimal).

45. 3. Feuille de style externe liée [2/3] …suite : body {background-image: url(image.gif);} p {text-align: justify;} Par exemple : Une feuille de style globale ou liée peut définir la justification de tout paragraphe, mais ce choix est inopportun dans certains cas. Il faut alors définir une classe spéciale par exemple pour aligner le paragraphe à gauche pour cette classe : p.gauche {text-align:left;} Des commentaires peuvent être ajoutés dans la feuille de style sous la forme : /* commentaires */ • Il existe 2 manières d'appliquer une feuille de style externe : • sous forme liée ou • sous forme importée.

46. 3. Feuille de style externe liée [3/3] …suite : C'est la technique la plus courante. Dans le document HTML, on ajoute à l'intérieur de la partie HEAD : <head> ... <link rel = "stylesheet" type ="text/css" href = "chemin/nom_fichier.css"> ... </head>

47. 4. Feuille de style externe importée (directive @import ou at-rules) • Une directive @import permet d'inclure dans une feuille de style (liée, incorporée ou importée) une référence à une autre feuille de style. Les règles de la feuille de style importée seront ajoutées à la feuille d'appel. @import url(url); • L'url peut être encadrée ou non de guillemets simples ou doubles. • On peut trouver plusieurs @import à placer toujours au début des définitions, avant les autres règles CSS. @import url(http://www.univ-mlv.fr/dossier/mafeuille1.css); @import url(dossier/mafeuille2.css); p {text-align: justify};

48. Sélecteurs La règle de styleCSS associe un bloc de déclaration(s) à un sélecteur. Le sélecteur peut être : • Sélecteurs simples basés sur des éléments de balises HTML • Regroupement de sélecteurs simples • Sélecteurs contextuels • Classes • Identifiants • Pseudo-classes

49. Sélecteurs d’élément : Sélecteurs simples basés sur des éléments de balises HTML Un sélecteur simple associe un élémentHTML à une règle particulière. • Les styles sont souvent associés aux : • balises bloc : div, body, h1, h2, h3, h4, h5, ,h6, p, pre, ul, ol, li, ... • balises en ligne : span, a, strong, em, img, ... La balise bloc <div> délimite une zone de la page HTML comportant un ou plusieurs paragraphes. alors que La balise en ligne <span> délimite un fragment de texte et/ou de données au sein d’un paragraphe, donc sans saut de paragraphe. Exemples de sélecteurs d’éléments (sélecteurs simples) : h2 {color: red} span {background-color: red; color: white} p {color: blue}

50. Sélecteurs universel * : Sélecteurs simples basés sur des éléments de balises HTML, et représenté par un astérisque (*) Correspond à n’importe quel éléments HTML, fonctionnant donc de manière générique: un caractère générique. Par exemples, pour que tous les éléments soient en bleu: * {color: blue}