Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS

3,853 views

Published on

Cours de CSS.

Published in: Education
  • nice document
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

CSS

  1. 1. CSS
  2. 2. Contenu ??? Présentation
  3. 3. Un peu d’histoire… • 1995 : Création du W3C, HTML 2.0 • 1996 : CSS 1 • 1997 : HTML 3.2 • 1998 : CSS 2 • 1999 : HTML 4.01 • 2001 - 2008 : CSS 2.1 • 1999 - Un jour (peut-être) : CSS 3
  4. 4. CSS ? • Langage (sémantique + syntaxe = communication) • Présenter des documents • Pour les navigateurs… • … et les lecteurs d’écrans, et d’autres… (User-Agents)
  5. 5. CSS Cascading Style Sheet
  6. 6. Cascading — Cascade Tree drawing for red work piece titled Breathe — Bascom Hogue
  7. 7. Cascading — Cascade Tree drawing for red work piece titled Breathe — Bascom Hogue
  8. 8. Cascading — Cascade Tree drawing for red work piece titled Breathe — Bascom Hogue
  9. 9. Cascading — Cascade Tree drawing for red work piece titled Breathe — Bascom Hogue
  10. 10. Cascading — Cascade Tree drawing for red work piece titled Breathe — Bascom Hogue
  11. 11. Cascading — Cascade Tree drawing for red work piece titled Breathe — Bascom Hogue
  12. 12. Cascading — Cascade Tree drawing for red work piece titled Breathe — Bascom Hogue
  13. 13. Cascading — Cascade Tree drawing for red work piece titled Breathe — Bascom Hogue
  14. 14. Cascading — Cascade Tree drawing for red work piece titled Breathe — Bascom Hogue
  15. 15. Cascading — Cascade Tree drawing for red work piece titled Breathe — Bascom Hogue
  16. 16. Cascading — Cascade Tree drawing for red work piece titled Breathe — Bascom Hogue
  17. 17. Cascading — Cascade Tree drawing for red work piece titled Breathe — Bascom Hogue
  18. 18. Cascading — Cascade Tree drawing for red work piece titled Breathe — Bascom Hogue
  19. 19. Cascading — Cascade Tree drawing for red work piece titled Breathe — Bascom Hogue
  20. 20. Cascading — Cascade Tree drawing for red work piece titled Breathe — Bascom Hogue
  21. 21. Cascading — Cascade Héritage Tree drawing for red work piece titled Breathe — Bascom Hogue
  22. 22. Cascading — Cascade Héritage Tree drawing for red work piece titled Breathe — Bascom Hogue
  23. 23. Cascading — Cascade Héritage Tree drawing for red work piece titled Breathe — Bascom Hogue
  24. 24. Cascading — Cascade Héritage Tree drawing for red work piece titled Breathe — Bascom Hogue
  25. 25. Cascading — Cascade Héritage Tree drawing for red work piece titled Breathe — Bascom Hogue
  26. 26. Sélecteurs Tree drawing for red work piece titled Breathe — Bascom Hogue
  27. 27. Sélecteurs Tree drawing for red work piece titled Breathe — Bascom Hogue
  28. 28. Sélecteurs Tree drawing for red work piece titled Breathe — Bascom Hogue
  29. 29. Règles Propriété: valeur;
  30. 30. Déclaration Sélecteur(s) { Propriété: valeur; … }
  31. 31. Les sélecteurs CSS 2 * {} Toutes les balises
  32. 32. Les sélecteurs CSS 2 balise {} Toutes les balises <balise> Exemple : div {}
  33. 33. Les sélecteurs CSS 2 #identifiant {} La balise dont l’attribut id vaut identifiant Exemple : #header {}
  34. 34. Les sélecteurs CSS 2 .classe {} Les balises dont l’attribut class vaut classe Exemple : .even {}
  35. 35. Les sélecteurs CSS 2 E F {} Les éléments F descendants de E Exemple : #header li {}
  36. 36. Les sélecteurs CSS 2 E > F {} Les éléments F enfants de E Exemple : #menu > .even {} IE 6
  37. 37. Les sélecteurs CSS 2 E + F {} Les éléments F directement précédés de E Exemple : #header + div {} IE 6 ~IE 7
  38. 38. 2 astuces • On peut spécifier une balise pour l’#identifiant : balise#identifiant {} • On peut spécifier un élément pour la classe : balise.classe {} #identifiant.classe {} .classe.classe {} Nommez sémantiquement vos identifiants et classes !
  39. 39. Pseudo-classes • a:link : Lien non visité • a:visited : Lien visité • a:hover : Survol de la souris • a:focus : Sélection au clavier • a:active : Pendant le clic
  40. 40. Groupement #header, #container, #footer {}
  41. 41. Les propriétés font-family — Définit la police à utiliser Valeurs : • Nom de police (Arial, "Comic Sans MS", Georgia, Helvetica, "Lucida Grande", Tahoma, "Times New Roman", "Trebuchet MS", Verdana) • Classe de police (serif, sans-serif, monospace, fantasy, cursive) Ex : font-family: "Trebuchet MS", Helvetica, sans-serif;
  42. 42. Les propriétés font-size — Définit la taille de la police Valeurs : • Taille • Pourcentage Ex : font-size: 1em;
  43. 43. Les propriétés font-weight — Définit la graisse de la police Valeurs : • normal, bold, bolder, lighter Ex : font-weight: bold;
  44. 44. Les propriétés font-style — Définit l’orientation de la police Valeurs : • normal, italic, oblique Ex : font-style: italic;
  45. 45. Les propriétés text-decoration — Définit le soulignement du texte (cumulable) Valeurs : • none, underline, overline, line- through Ex : text-decoration: underline;
  46. 46. Les propriétés text-align — Définit l’alignement du texte dans la boite Valeurs : • left, center, right, justify Ex : text-align: center;
  47. 47. Les propriétés text-transform — Définit la casse du texte Valeurs : • none, uppercase, lowercase, capitalize Ex : text-transform: uppercase;
  48. 48. Les propriétés color — Définit la couleur du texte Valeurs : • transparent • Couleur • Mot-clé (white, black, red, green, blue, yellow, etc.) Ex : color: #FF017D;
  49. 49. Les propriétés line-height — Définit la hauteur d’une ligne Valeurs : • normal • Multiplieur • Taille • Pourcentage Ex : line-height: 1.5;
  50. 50. Les propriétés margin-top (-right, -bottom, -left) — Définit les marges externes d’une boite Valeurs : • auto • Distance Ex : margin-top: 15px;
  51. 51. Les propriétés border-top (-right, -bottom, -left) — Définit les bordures d’une boite Valeurs : • Combinées (voir plus loin) Ex : border-top: ☺;
  52. 52. Les propriétés padding-top (-right, -bottom, -left) — Définit les marges internes d’une boite Valeurs : • Distance Ex : paddin-bottom: 15px;
  53. 53. Les propriétés width — Définit la largeur d’une boite Valeurs : • auto • Largeur • Pourcentage Ex : width: 50%;
  54. 54. Les propriétés (max, min)-width — Définit la largeur maximale/minimale d’une boite Valeurs : • none • Largeur • Pourcentage IE 6 Ex : min-width: 250px;
  55. 55. Les propriétés height — Définit la hauteur d’une boite Valeurs : • auto • Hauteur • Pourcentage Ex : height: 50%;
  56. 56. Les propriétés (max, min)-height — Définit la hauteur maximale/minimale d’une boite Valeurs : • none • Hauteur • Pourcentage IE 6 Ex : min-height: 100px;
  57. 57. Les propriétés border-width — Définit l’épaisseur des bordures Valeurs : • Épaisseur Ex : border-width: 2em;
  58. 58. Les propriétés border-color — Définit la couleur des bordures Valeurs : • transparent • Couleur • Mot-clé (white, black, red, green, blue, yellow, etc.) Ex : border-color: rgb(255, 1, 125);
  59. 59. Les propriétés border-style — Définit le type des bordures Valeurs : • solid, dashed, dotted, inset, outset, double, groove, ridge Ex : border-style: solid;
  60. 60. Les propriétés background-color — Définit la couleur de fond d’une boite Valeurs : • transparent • Couleur • Mot-clé (white, black, red, green, blue, yellow, etc.) Ex : background-color: #FFF;
  61. 61. Les propriétés background-image — Définit l’image de fond d’une boite Valeurs : • url(fichier) Ex : background-image: url(img/back.png);
  62. 62. Les propriétés background-repeat — Définit la répétition de l’image de fond Valeurs : • no-repeat, repeat, repeat-x, repeat-y Ex : background-repeat: no-repeat;
  63. 63. Les propriétés background-position — Définit la position de l’image de fond Valeurs : • Coordonnés • Pourcentage • Mot-clé (top, right, bottom, left, center) Ex : background-position: 5px 10px;
  64. 64. Les propriétés display — Définit la manière d’afficher une boite Valeurs : • none, block, inline… Ex : display: block;
  65. 65. Les propriétés visibility — Définit si la boite doit s’afficher Valeurs : • visible, hidden, collapse Ex : visibility: hidden;
  66. 66. Les propriétés overflow — Définit comment la boite doit gérer le contenu qui dépasse sa taille Valeurs : • visible, hidden, auto, scroll Ex : overflow: auto;
  67. 67. Les propriétés position — Définit la manière de positionner une boite Valeurs : • static, absolute, relative, fixed Ex : position: relative;
  68. 68. Les propriétés top, right, bottom, left — Définit la position d’une boite Valeurs : • auto • Distance • Pourcentage Ex : top: 10px;
  69. 69. Les propriétés z-index — Définit l’ordre d’empilement des boites positionnées Valeurs : • auto • Entier (supérieur = devant) Ex : z-index: 3;
  70. 70. Les propriétés float — Définit le positionnement d’une boite par rapport à son parent, le reste du contenu du parent s’écoulera Valeurs : • none, left, right Ex : float: left;
  71. 71. Les propriétés clear — Définit l’écoulement d’une boite qui suit un flottant. Valeurs : • none, left, right, both Ex : clear: both;
  72. 72. + inherit : n’hérite pas IE 6 IE 7
  73. 73. Et il y en a d’autres…
  74. 74. Raccourcis … { font-family: Arial, sans-serif; font-size: 12em; font-weight: bold; font-style: italic; line-height: 1.5; }
  75. 75. Raccourcis … { font-family: Arial, sans-serif; font-size: 12em; font-weight: bold; font-style: italic; line-height: 1.5; } … { font: italic bold 12em/1.5 Arial, sans-serif; }
  76. 76. Raccourcis … { padding-top: 10px; padding-bottom: 15px; padding-left: 8px; padding-right: 8px; }
  77. 77. Raccourcis … { padding-top: 10px; padding-bottom: 15px; padding-left: 8px; padding-right: 8px; } … { padding: 10px 8px 15px 8px; }
  78. 78. Raccourcis … { padding-top: 10px; padding-bottom: 15px; padding-left: 8px; padding-right: 8px; } … { padding: 10px 8px 15px 8px; }
  79. 79. Raccourcis … { padding-top: 10px; padding-bottom: 15px; padding-left: 8px; padding-right: 8px; } … { padding: 10px 8px 15px 8px; }
  80. 80. Raccourcis … { padding-top: 10px; padding-bottom: 15px; padding-left: 8px; padding-right: 8px; }
  81. 81. Raccourcis … { padding-top: 10px; padding-bottom: 15px; padding-left: 8px; padding-right: 8px; } … { padding: 10px 8px 15px; }
  82. 82. Raccourcis … { padding-top: 10px; padding-bottom: 15px; padding-left: 8px; padding-right: 8px; } … { padding: 10px 8px 15px; }
  83. 83. Raccourcis … { padding-top: 10px; padding-bottom: 15px; padding-left: 8px; padding-right: 8px; } 10 … { padding: 10px 8px 15px; }
  84. 84. Raccourcis … { padding-top: 10px; padding-bottom: 15px; padding-left: 8px; padding-right: 8px; } 10 8 8 … { padding: 10px 8px 15px; }
  85. 85. Raccourcis … { padding-top: 10px; padding-bottom: 15px; padding-left: 8px; padding-right: 8px; } 10 8 8 … { 15 padding: 10px 8px 15px; }
  86. 86. Raccourcis … { padding-top: 10px; padding-bottom: 10px; padding-left: 8px; padding-right: 8px; }
  87. 87. Raccourcis … { padding-top: 10px; padding-bottom: 10px; padding-left: 8px; padding-right: 8px; } … { padding: 10px 8px; }
  88. 88. Raccourcis … { padding-top: 10px; padding-bottom: 10px; padding-left: 8px; padding-right: 8px; } … { padding: 10px 8px; }
  89. 89. Raccourcis … { padding-top: 10px; padding-bottom: 10px; padding-left: 8px; padding-right: 8px; } 10 … { 10 padding: 10px 8px; }
  90. 90. Raccourcis … { padding-top: 10px; padding-bottom: 10px; padding-left: 8px; padding-right: 8px; } 10 8 8 … { 10 padding: 10px 8px; }
  91. 91. Raccourcis … { padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; }
  92. 92. Raccourcis … { padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; } … { padding: 10px; }
  93. 93. Raccourcis … { padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; } … { padding: 10px; }
  94. 94. Raccourcis … { padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; } 10 10 10 … { 10 padding: 10px; }
  95. 95. Idem pour margin et border-width
  96. 96. Raccourcis … { border-top-width: 2px; border-top-color: #FF017D; border-top-style: solid; }
  97. 97. Raccourcis … { border-top-width: 2px; border-top-color: #FF017D; border-top-style: solid; } … { border-top: 2px solid #FF017D; }
  98. 98. Raccourcis … { border-top-width: 2px; border-top-color: #FF017D; border-top-style: solid; border-… }
  99. 99. Raccourcis … { border-top-width: 2px; border-top-color: #FF017D; border-top-style: solid; border-… } … { border: 1px solid #FF017D; border-width: 1px 2px 3px 4px; }
  100. 100. Raccourcis … { background-color: #FF017D; background-image: url(img/background.png); background-repeat: no-repeat; background-position: left top; }
  101. 101. Raccourcis … { background-color: #FF017D; background-image: url(img/background.png); background-repeat: no-repeat; background-position: left top; } … { background: #FF017D url(img/background.png) no-repeat left top; }
  102. 102. Les unités (absolues)
  103. 103. Les unités (absolues) • 0 : Pas d’unité
  104. 104. Les unités (absolues) • 0 : Pas d’unité • px : Pixels
  105. 105. Les unités (absolues) • 0 : Pas d’unité • px : Pixels
  106. 106. Les unités (absolues) • 0 : Pas d’unité • px : Pixels • cm, mm : Centimètres, millimètres
  107. 107. Les unités (absolues) • 0 : Pas d’unité • px : Pixels • cm, mm : Centimètres, millimètres • in : Inches (1in = 2.54cm)
  108. 108. Les unités (absolues) • 0 : Pas d’unité • px : Pixels • cm, mm : Centimètres, millimètres • in : Inches (1in = 2.54cm) • pt : Points (1pt = 1/72in)
  109. 109. Les unités (absolues) • 0 : Pas d’unité • px : Pixels • cm, mm : Centimètres, millimètres • in : Inches (1in = 2.54cm) • pt : Points (1pt = 1/72in) • pc : Picas (1 pc = 12pt)
  110. 110. Les unités (relatives)
  111. 111. Les unités (relatives) • em : Hauteur de la lettre « M » (m majuscule) de l’élément parent
  112. 112. Les unités (relatives) • em : Hauteur de la lettre « M » (m majuscule) de l’élément parent • ex : Largeur de la lettre « x » (x minuscule) de l’élément parent
  113. 113. Les unités (relatives) • em : Hauteur de la lettre « M » (m majuscule) de l’élément parent • ex : Largeur de la lettre « x » (x minuscule) de l’élément parent Pas d’espace entre la valeur et l’unité ! Ex: 1.5em
  114. 114. Couleurs
  115. 115. Couleurs • RGB (Red Green Blue — Rouge vert bleu) : rgb(rouge, vert, bleu) (de 0 à 255 ou en pourcentage)
  116. 116. Couleurs • RGB (Red Green Blue — Rouge vert bleu) : rgb(rouge, vert, bleu) (de 0 à 255 ou en pourcentage) • Hexadécimalrgb(255, #FF017D = : 1, 125)
  117. 117. Couleurs #FF017D
  118. 118. Couleurs #FF017D Rouge
  119. 119. Couleurs #FF017D Rouge Vert
  120. 120. Couleurs #FF017D Rouge Vert Bleu
  121. 121. Couleurs #FF017D Rouge Vert Bleu #1A3 = #11AA33
  122. 122. Commentaires /* Commentaires */
  123. 123. Appliquer du CSS à un document
  124. 124. Appliquer du CSS à un document • Fichier externe : <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> dans le <head>
  125. 125. Appliquer du CSS à un document • Fichier externe : <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> dans le <head> • Dans le document : <style type="text/css"> … </style> dans le <head>
  126. 126. Appliquer du CSS à un document • Fichier externe : <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> dans le <head> • Dans le document : <style type="text/css"> … </style> dans le <head> • En ligne : <div style="background: red; color: blue;">
  127. 127. Appliquer du CSS à un document Faible • Fichier externe : <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> dans le <head> • Dans le document : Priotité <style type="text/css"> … </style> dans le <head> • En ligne : <div style="background: red; color: blue;">
  128. 128. Une dernière chose… … Il est impossible d’avoir un rendu identique
  129. 129. Ressources • Pompage : http://pompage.net • Alsacreations : http://alsacreations.com • OpenWeb : http://openweb.eu.org • Spécification (fr) : http://yoyodesign.org/ doc/w3c/css2/cover.html
  130. 130. Contact Nicolas Le Gall slides@neovov.com twitter.com/neovov

×