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. CSS ?
• Langage
(sémantique + syntaxe = communication)
• Présenter des documents
• Pour les navigateurs…
• … et les lecteurs d’écrans, et d’autres…
(User-Agents)
32. Les sélecteurs CSS 2
balise {}
Toutes les balises <balise>
Exemple : div {}
33. Les sélecteurs CSS 2
#identifiant {}
La balise dont l’attribut id
vaut identifiant
Exemple : #header {}
34. Les sélecteurs CSS 2
.classe {}
Les balises dont l’attribut
class vaut classe
Exemple : .even {}
35. Les sélecteurs CSS 2
E F {}
Les éléments F
descendants de E
Exemple : #header li {}
36. Les sélecteurs CSS 2
E > F {}
Les éléments F
enfants de E
Exemple : #menu > .even {}
IE 6
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. 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. 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
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. Les propriétés
font-size — Définit la taille de la police
Valeurs : • Taille
• Pourcentage
Ex : font-size: 1em;
43. Les propriétés
font-weight — Définit la graisse de la police
Valeurs : • normal, bold, bolder, lighter
Ex : font-weight: bold;
44. Les propriétés
font-style — Définit l’orientation de la police
Valeurs : • normal, italic, oblique
Ex : font-style: italic;
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. 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. Les propriétés
text-transform
— Définit la casse du texte
Valeurs : • none, uppercase, lowercase,
capitalize
Ex : text-transform: uppercase;
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. Les propriétés
line-height
— Définit la hauteur d’une ligne
Valeurs : • normal
• Multiplieur
• Taille
• Pourcentage
Ex : line-height: 1.5;
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. 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: ☺;
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. 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. 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. 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. 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. 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. Les propriétés
display
— Définit la manière d’afficher une boite
Valeurs : • none, block, inline…
Ex : display: block;
65. Les propriétés
visibility
— Définit si la boite doit s’afficher
Valeurs : • visible, hidden, collapse
Ex : visibility: hidden;
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. Les propriétés
position
— Définit la manière de positionner une boite
Valeurs : • static, absolute, relative, fixed
Ex : position: relative;
68. Les propriétés
top, right, bottom, left
— Définit la position d’une boite
Valeurs : • auto
• Distance
• Pourcentage
Ex : top: 10px;
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. 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. Les propriétés
clear
— Définit l’écoulement d’une boite qui suit
un flottant.
Valeurs : • none, left, right, both
Ex : clear: both;
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. 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
115. Couleurs
• RGB (Red Green Blue — Rouge vert bleu) :
rgb(rouge, vert, bleu)
(de 0 à 255 ou en pourcentage)
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)
124. Appliquer du CSS à un document
• Fichier externe :
<link rel="stylesheet" type="text/css"
media="screen" href="style.css" /> dans le <head>
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. 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. 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;">
