3 DW Part III

CSS3
CSS ≡ Cascading Style Sheets

Elles décrivent le style des éléments HTML
La page HTML représente la structure du document, le
CSS sa présentation
75 / 192
CSS3
Ajout du CSS au HTML
Inline en utilisant l'attribut style d'un élément HTML

En interne en utilisant la balise <style> dans l'en-tête de
la page (<head>)
En externe en utilisant un chier externe comme feuille de
style (solution à privilégier)
76 / 192
CSS3
CSS Inline

<table style="border:1px solid black; border=collapse:
collapse">

77 / 192
CSS3
CSS Interne
Le CSS interne est déni dans la section <head>

On utilise la balise <style>...</style>
Un style CSS est déni par
élément_HTML : {description du style CSS}
78 / 192
CSS3
CSS Interne

< head>
<style>
body {background=color : azure;}
p {color : blue;}
q {background=color: chartreuse;}
blockquote {color : green;}
style>
</
</head>
<body>
<p>Une première citation : <q>C'est une citation courte</q>, telle
que représentée par un navigateur.</p>
<p>Une longue citation :
<blockquote cite="https://www.lipsum.com">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
congue sodales laoreet.
</ blockquote>
p
</ >
p
< >Le roman < cite>Le seigneur des anneaux</cite> a été écrit par
J.R.R. Tolkien. La traduction française publiée au livre de poche
a pour ISBN : 9782253011392.
</ body>

79 / 192
CSS3
CSS Externe
Il permet de dénir le style de plusieurs pages HTML

Il permet d'avoir un style homogène pour tout un site,
décrit dans un seul chier
On doit :
1 construire un chier d'extension CSS contenant la
description du style
2 ajouter un lien vers ce chier dans la page HTML
<head>
<link rel = "stylesheet" href = "chier CSS">
</head>
80 / 192
CSS3
CSS Externe

< head>
<link rel = "stylesheet" href = "style.css"
> chier style.css
head>
background=color : azure;}
</
<body> body {
<p>Une première citation : p {color : grey;}
<q>C'est une citation courte</q>, q {background=color : chartreuse;}
telle que représentée par un navigateur.</ blockquote {color : green;}
p>
...

81 / 192
CSS3
Syntaxe CSS
règle : := sélecteur { ensemble de déclarations }

déclaration : := propriété : valeur ;
commentaire : := /* commentaires */
82 / 192
CSS3
Sélecteurs
Sélecteurs simples : cible directement un élément

Combinateurs : cible un élément relié à un autre élément
Pseudo-classes : cible un élément selon un état donné
Pseudo-éléments : cible une partie d'un élément
83 / 192
CSS3
Sélecteurs simples
Sélecteurs de type : Permet de cibler un élément par son nom

Syntaxe : élément {déclarations}
on peut cibler plusieurs éléments
Syntaxe : elt_1, elt_2, ..., elt_n {déclarations}
Sélecteurs d'identiant : Permet de cibler un élément par son id.

L'id doit être unique
Syntaxe : #id_élément {déclarations}
Sélecteurs de classe : Permet de cibler un élément par la valeur

de sa classe (attribut HTML class)
Syntaxe : .valeur_classe {déclarations}
Sélecteur universel : Permet de cibler tous les éléments HTML

Syntaxe : * {déclarations}
84 / 192
CSS3
Sélecteurs simples

< h1>Les citations</h1>
chier style.css
p class = "c2">Quelques citations.</p>
background=color : azure;}
<
body {
p q
< >Une première citation : < >C'est une
q
citation courte</ >, telle que représenté /* id p2 */
p
e par un navigateur.</ > #p2 { color : grey;}
< p id = "p2">Une longue citation : h1, blockquote {
blockquote cite="https://www.lipsum.com color : green;
font=style : italic;
<
">
Lorem ipsum dolor sit amet, }
consectetur adipiscing elit.
Quisque congue sodales laoreet. /* class c2 */
</blockquote> .c2{font=weight : bold;}
</p>
/* universel */
p
< >Le roman < cite class="c2">Le seigneur * {font=family: arial;}
des anneaux</cite> a été écrit par J.R.

R. Tolkien.

85 / 192
CSS3
Combinateurs
Représente les liens entre éléments :
Sélecteurs d'éléments descendants (espace) : Permet de cibler un
élément contenu dans un autre élément
Syntaxe : elt_contenant elt {déclarations}
Sélecteurs d'éléments ls (>) : Permet de cibler un élément

contenu dans un autre élément et son descendant directe
Syntaxe : elt_père > elt {déclarations}
Sélecteurs de voisin direct (+) : Permet de cibler un élément qui

suit directement un élément déni
Syntaxe : elt_précédent + elt {déclarations}
sélecteurs de voisins (~) : Permet de cibler tous les éléments qui

suivent un élément déni
Syntaxe : elt_précédent ~elt {déclarations}
86 / 192
CSS3
Exemple - descendants

< h1>descendant</h1>
< nav> chier style.css
<p>Quelques citations.</p>
/* descendants */
div>
<

<p>Une première citation : <q>C'est
une citation courte</q>, telle que
représentée par un navigateur.</p>
nav p {color : blue;}
</div>
</nav>
p
< > Paragraphe hors NAV </ > p

87 / 192
CSS3
Exemple - ls

nav> chier style.css
<
/* ls */
div>
<
nav > p {color : blue;}
</div>
</nav>

88 / 192
CSS3
Exemple - voisin direct

p
< >Avant</ > p
< nav> chier style.css
/*voisin direct*/
div>
<

nav + p {color : blue;}
</div>
</nav>
p
< >Après</ > p
p
< >Encore après</ > p

89 / 192
CSS3
Exemple - voisins

p
< >Avant</ > p
< nav>
chier style.css

div>
<
/* voisins*/

</div>
nav ~ p {color : blue;}
</nav>
p
< >Après</ > p
q q
< >C'est une citation courte</ >
p
< >Encore après</ > p

90 / 192
CSS3
Pseudo-classes
Ils permettent de cibler des éléments selon un état ou un

événement particulier :
▶ Modier le style d'un élément lorsqu'un utilisateur passe la
souris dessus
▶ Modier le style des liens visités et non visités
▶ Styliser un élément quand on clique dessus
▶ ...
Syntaxe : selecteur : pseudo-classe {déclarations}
91 / 192
CSS3
Pseudo-classes - les liens
Il y a 5 états possibles pour un lien : non visité, visité, survolé,

cliqué et en focus clavier
lien non visité, pseudo-classe : :link
lien visité, pseudo-classe : :visited
lien survolé, pseudo-classe : :hover
lien cliqué, pseudo-classe : :active
lien en focus, pseudo-classe : :focus
92 / 192
CSS3
Pseudo-classes - les liens
L'ordre de dénition des styles est important pour garder une

cohérence dans les liens. L'ordre est le suivant :
1 a { }
2 a :link { }
3 a :visited { }
4 a :hover { }
5 a :focus { }
6 a :active { }
93 / 192
CSS3
Exemple

DOCTYPE html>
<!
<html>
<head>
chier style.css

<link rel = "stylesheet" href = "pseudo
a {color : black; font=size: 30px;}
a:link { color : blue }
.css">
</head>
a:visited { color : red }
<body>
a:hover { color : yellow }
a:focus { color : green }
<a href="c:">PSEUDO</a>
a:active {color : purple }

body>
</
</html>

94 / 192
CSS3
Pseudo-classes combinées
On peut dénir une classe donnée pour l'élément ciblé :

Syntaxe :
elt.classe{déclarations}
95 / 192
CSS3
Exemple

DOCTYPE html>
<!
<html>
<head>
<link rel = "stylesheet" href = "style.css"
chier style.css

>
a {color : black; font=size: 30px;}
</ head> a.spec:link { color : blue }
< body> a.spec:visited { color : red }
a.spec:hover { color : yellow }
<a href="c:">PSEUDO</a> a.spec:focus { color : green }
<br> a.spec:active {color : purple }
<a class="spec" href="c:">PSEUDO</a>
</body>
</ html>

96 / 192
CSS3
Travail à réaliser
Rendre un rapport pour la semaine prochaine contenant la

liste des pseudo-classes CSS
97 / 192
CSS3
Pseudo-éléments
Ils sont utilisés pour :

Styliser la première lettre ou la première ligne d'un élément
Insérer du contenu avant ou après le contenu d'un élément
Syntaxe :
elt : :pseudo_elt{déclarations}
98 / 192
CSS3
Exemple ( : :rst_letter)

p
< >Avant</ > p
< div>
div> chier style.css

<
<p>Lorem ipsum dolor sit amet,
p::rst=letter {
consectetur adipiscing elit, sed do
font=family: Arial;
eiusmod tempor incididunt ut labore
font=style: italic;
et dolore magna aliqua. Ut enim ad
font=size: large;
minim veniam, quis nostrud
}
exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur
p
. </ >
</ div>
</ div>

N.B. Applicable uniquement aux éléments de type bloc 99 / 192
CSS3
Exemple ( : :rst_line)

p
< >Avant</ > p
< div>
p
< >Quelques citations.</ > p
< div> chier style.css
p
< >Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
p::rst=line {
sed do eiusmod tempor
font=family: Arial;
incididunt ut labore et dolore
font=style: italic;
magna aliqua. Ut enim ad
font=size: large;
}
exercitation ullamco laboris
nisi ut aliquip ex ea commodo
consequat. Duis aute irure
dolor in reprehenderit in
voluptate velit esse cillum
dolore eu fugiat nulla
p
pariatur. </ >
</ div>
</ div>
100 / 192
CSS3
Exemple ( : :before et : :after)

p p chier style.css
< >Avant</ >
p::before {
< div> /* le contenu a ajouter */
p
< >Quelques citations.</ > p content : "<";
< div> font=family: Arial;

p
font=size: large;
consectetur adipiscing elit,
color:red;
sed do eiusmod tempor
}
incididunt ut labore et dolore
magna aliqua. Ut enim ad
p::after {
/* le contenu a ajouter */
exercitation ullamco laboris
content : ">";
font=family: Arial;
font=size: large;
color:red;
}
p
pariatur. </ >
</ div>
</ div>
101 / 192
CSS3
Exemple ( : :selection)

p
< >Avant</ > p
< div>
p
< >Quelques citations.</ > p
< div> chier style.css
p
consectetur adipiscing elit, p::selection {
sed do eiusmod tempor font=family: Arial;
incididunt ut labore et dolore font=size: large;
magna aliqua. Ut enim ad color:yellow;
minim veniam, quis nostrud background=color:blue;
exercitation ullamco laboris }

p
pariatur. </ >
</ div>
</ div>
102 / 192
CSS3
Les couleurs
Elles sont utilisés pour dénir la :

couleur du texte color
couleur du fond background-color
couleur de bordure par exemple, border : 5px solid red ;
103 / 192
CSS3
Les couleurs
Elles sont spéciées par :
des couleurs prédénies red, blue, white, etc. 2
RGB rgb(value_r, value_g, value_b)
value ∈ [0, 255]
HEX #RRGGBB
chif f re ∈ [0, f ]
HSL (hue, saturation, lightness) hsl(hue, saturation,
lightness)
hue ∈ [0, 360] (0 (ou 360) → rouge, 120 → vert, 240 →
bleu)
saturation ∈ [0%, 100%] (0% légèrement ombrée et 100%
couleur pure)
lightness ∈ [0%, 100%] (0% sombre et 100% claire)
2. https://www.w3schools.com/cssref/css_colors.asp
104 / 192
CSS3
Les couleurs
On peut ajouter la transparence à la couleur :

RGBA rgba(value_r, value_g, value_b, alpha)
value ∈ [0, 255]
alpha ∈ [0.0, 1.0] la transparence qui va de 0 (transparent)
à 1 (opaque)
HEXA #RRGGBBAA
chif f re ∈ [0, f ]
HSLA (hue, saturation, lightness, alpha) hsla(hue,
saturation, lightness, alpha)
alpha ∈ [0.0, 1.0]
105 / 192
CSS3
Exemple - les couleurs
chier style.css

#pred{background=color:blue;}
< p id="pred">Prédénie</p>
#rgb{background=color:rgb(0, 0, 255);}
<p id="rgb">RGB</p> #rgb00{background=color:rgba(0, 0, 255, 0);}
<p id="rgb00">RGB alpha 0.0</p>
#rgb05{background=color:rgba(0, 0, 255, 0.5);}
#rgb10{background=color:rgba(0, 0, 255, 1);}
#hex{background=color:#0000;}
<p id="hex">HEX</p> #hex00{background=color:#000000;}
<p id="hex00">HEX alpha 0.0</p>
#hex05{background=color:#000088;}
#hex10{background=color:#0000;}
#hsl{background=color:hsl(240, 100%, 50%);}

<p id="hsl">HSL</p> #hsl00{background=color:hsla(240, 100%, 50%,
<p id="hsl00">HESLalpha 0.0</p>
0);}
<p id="hsl05">HSL alpha 0.5</p>
#hsl05{background=color:hsla(240, 100%, 50%,
<p id="hsl10">HSL alpha 1.0</p>
0.5);}
#hsl10{background=color:hsla(240, 100%, 50%,

1);}

106 / 192
CSS3
Les fonds
background-color modie la couleur de fond d'un élément

Syntaxe : background-color :couleur ;
background-image ajoute une image comme fond d'un
élément
Syntaxe : background-image :url("adresse ") ;
L'image est répétée horizontalement et verticalement sur
l'ensemble de la page
background-repeat déni comment répéter l'image
Syntaxe :
background-repeat :repeat-x|repeat-y|no-repeat ;
▶ repeat-x répéter uniquement horizontalement
▶ repeat-y répéter uniquement verticalement
▶ no-repeat ne pas répéter
107 / 192
CSS3
Les fonds
background-position déni la position de l'image de fond

Syntaxe : background-position :left|center|right
top|center|bottom ;
background-attachment déni si l'image de fond suit le
délement de la page
Syntaxe : background-attachment :scroll|xed|local ;
▶ scroll suit le délement de la page (par défaut). Elle reste à
sa place
▶ xed elle reste visible, même lors d'un délement
▶ local suit uniquement le délement de l'élément auquel elle
est attachée
108 / 192
CSS3
Exemple - les fonds

<body>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse auctor ante nec
dolor condimentum, vel hendrerit elit varius
. Suspendisse convallis lobortis dolor et
mollis. Vivamus a purus quis massa
volutpat tempus. Donec bibendum varius chier style.css
elit, eu tempor est luctus id. Donec et
facilisis leo. Nullam vitae ultrices sem, ac body{
mollis sem. Morbi urna velit, venenatis ut background=image:url("image.png");
elementum dapibus, consequat ut nulla. background=repeat:no=repeat;
Quisque accumsan nisi urna, vitae volutpat background=position:center top;
dui condimentum auctor. Mauris mattis background=attachment: xed;
risus vitae dapibus dapibus. Vestibulum }
ecitur sed quam eget elementum.

Phasellus viverra enim sed arcu euismod
condimentum. Integer viverra varius
porttitor. Sed sollicitudin, nisi quis rutrum
rutrum, diam quam venenatis nisl, ut
dapibus ante elit quis eros.
</ > p
...
109 / 192
CSS3
Style du texte
color déni la couleur du texte

Syntaxe : color :couleur ;
text-align déni l'alignement du texte
Syntaxe : text-align :left|right|justify|center ;
text-decoration décore le texte
Syntaxe : text-decoration :ligne couleur style ;
ligne : underline, overline, line-through
style : solid, wavy, dotted, dashed, double
110 / 192
CSS3
Style du texte
text-transform transforme le texte

Syntaxe :
text-transform :none|capitalize|uppercase|lowercase ;
text-indent déni l'indentation de 1ère ligne

Syntaxe : text-indent :valeur (px, ...) ;
letter-spacing espacement des caractères
Syntaxe : letter-spacing :valeur (px, ...) ;
word-spacing espacement des mots
Syntaxe : word-spacing :valeur (px, ...) ;
line-height espacement des lignes
Syntaxe : line-height :valeur (px, ...) ;
111 / 192
CSS3
Exemple - style du texte

<body>
<p id="id">
chier style.css
volutpat tempus. Donec bibendum varius
#id{
text=decoration: underline overline
facilisis leo. Nullam vitae ultrices sem, ac
wavy blue;
mollis sem. Morbi urna velit, venenatis ut
text=transform:uppercase;
elementum dapibus, consequat ut nulla.
text=indent:20px;
Quisque accumsan nisi urna, vitae volutpat
letter=spacing:4px;
dui condimentum auctor. Mauris mattis
word=spacing:10px;
risus vitae dapibus dapibus. Vestibulum
line=height:30px;
ecitur sed quam eget elementum.
}
Phasellus viverra enim sed arcu euismod
condimentum. Integer viverra varius
porttitor. Sed sollicitudin, nisi quis rutrum
rutrum, diam quam venenatis nisl, ut
dapibus ante elit quis eros.
</ > p
...
112 / 192
CSS3
Marge, bordure et padding
Boîte CSS
http://tecfa.unige.ch/guides/tie/html/css-intro/
css-intro-7.html
113 / 192
CSS3
margin marge externe avec d'autres éléments

Syntaxe : margin :valeur (px, ...) ;
border bordure de l'élément
Syntaxe : border :largeur (px, ...), style (solid,
dashed, dotted, ...), couleur ;
padding marge interne entre bordure et contenu
Syntaxe : padding :valeur (px, ...) ;
height et width hauteur et largeur de la boîte CSS
Syntaxe : height|width :valeur (px, ...) ;
114 / 192
CSS3
oat placement de l'élément dans son conteneur sur une

ligne
Syntaxe : oat :left/none/right ;
border-radius arrondi la bordure de l'élément

Syntaxe : border-radius :largeur (px, ...) ;
On l'absence de propriété oat les éléments sont empilés les
uns sur les autres
115 / 192
CSS3
Exemple - marge, bordure et padding

body> chier style.css
<
<p class="left">
left{
.
width: 200px;
margin:10px;
padding:10px;
border:4px solid black;
mollis.
oat:left;
</ > p border=radius:10px;
< p class="left"> background=color:azure;
Quisque accumsan nisi urna, vitae volutpat dui
}
condimentum auctor. Mauris mattis risus
vitae dapibus dapibus. Vestibulum ecitur
right{
.
sed quam eget elementum. Phasellus viverra
width: 200px;
enim sed arcu euismod condimentum.
margin:10px;
p
</ >
padding:20px;
<p class="right">
Cras ornare, sapien a convallis ultrices, risus sem
oat:right;
aliquet leo, vestibulum fringilla eros ex ac
border=radius:10px;
sem. Praesent eget elit libero.
background=color:azure;
p
</ >
}
</body>

116 / 192
CSS3
Règle CSS @media
Règle utilisée pour construire des pages responsive en

prenant en compte le média d'achage
Syntaxe :
@media not|only mediatype and (mediafeature
and|or|not mediafeature ) {
CSS-Code ;
}
only utilisé pour éviter que les vieux navigateurs n'applique
le style (@media non pris en charge)
not inverse le mediatype
mediatype ≡ all|print|screen|speech
speech pour lecteur d'écran
117 / 192
CSS3
Règle CSS @media
mediafeature
▶ aspect-ratio le rapport entre hauteur et largeur du
dispositif d'achage (3/4, 16/9, ...)
▶ color le nombre de bits utilisés pour représenter les
couleurs (8, 16, ...)
▶ orientation Orientation du système d'achage
(landscape|portrait )
▶ resolution la résolution du système d'achage (dpi ou
dpcm, dot per inch/cm)
▶ height hauteur du système d'achage (px, cm, em, ...)
▶ width largeur du système d'achage (px, cm, em, ...)
▶ ...
On peut ajouter à certaines spécications (sauf orientation )
un préxe min- (respectivement, max-) qui déni la valeur
minimum (respectivement, maximum) à appliquer au
mediafeature
118 / 192
CSS3
Exemple - règle CSS @media

< p class="grand">
chier style.css
@media screen and (orientation:
landscape) {
.grand{
oat:left;
}
}
</ > p .grand{
< p class="grand"> width: 200px;
margin:10px;
padding:10px;
border=radius:10px;
Integer viverra varius porttitor. Sed
}
sollicitudin, nisi quis rutrum rutrum, diam
quam venenatis nisl, ut dapibus ante elit
quis eros.
</ >p
119 / 192
CSS3
Exemple - règle CSS @media

p class="grand"> chier style.css
<
@media screen and (max=width: 320px
) {
.grand{
width: 100px;
}
}
@media screen and (min=width: 321px)
{
.grand{
</ > p width: 200px;
< p class="grand"> }
}
.grand{
margin:10px;
padding:10px;
Integer viverra varius porttitor. Sed
sollicitudin, nisi quis rutrum rutrum, diam
border=radius:10px;
quam venenatis nisl, ut dapibus ante elit
quis eros.
}
</ >p
120 / 192
CSS3
Règle CSS @media
Tester le web responsive sous Firefox :

Menu → Outils → Développement web → Vue adaptative
121 / 192
CSS3
Règle CSS @media
Tester le web responsive sous Safari :

Menu → Develop → Enter Responsive Design Mode
122 / 192
CSS3
Règle CSS @media
Tester le web responsive sous Chrome :

F12 → bouton Toggle device mode (près de Elements )
123 / 192

3 DW Part III

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

3 DW Part III

Transféré par

Droits d'auteur :

Formats disponibles

CSS3

CSS ≡ Cascading Style Sheets

Inline en utilisant l'attribut style d'un élément HTML

Le CSS interne est déni dans la section <head>

Il permet de dénir le style de plusieurs pages HTML

règle : := sélecteur { ensemble de déclarations }

Sélecteurs simples : cible directement un élément

Sélecteurs de type : Permet de cibler un élément par son nom

Sélecteurs d'identiant : Permet de cibler un élément par son id.

Sélecteurs de classe : Permet de cibler un élément par la valeur

Sélecteur universel : Permet de cibler tous les éléments HTML

Sélecteurs d'éléments ls (>) : Permet de cibler un élément

Sélecteurs de voisin direct (+) : Permet de cibler un élément qui

sélecteurs de voisins (~) : Permet de cibler tous les éléments qui

body {background=color : azure;}

body {background=color : azure;}

body {background=color : azure;}

Ils permettent de cibler des éléments selon un état ou un

Syntaxe : selecteur : pseudo-classe {déclarations}

Il y a 5 états possibles pour un lien : non visité, visité, survolé,

L'ordre de dénition des styles est important pour garder une

On peut dénir une classe donnée pour l'élément ciblé :

Rendre un rapport pour la semaine prochaine contenant la

Ils sont utilisés pour :

div> chier style.css

< div> font=family: Arial;

Elles sont utilisés pour dénir la :

On peut ajouter la transparence à la couleur :

#hsl{background=color:hsl(240, 100%, 50%);}

  #hsl10{background=color:hsla(240, 100%, 50%,

background-color modie la couleur de fond d'un élément

background-position déni la position de l'image de fond

color déni la couleur du texte

text-transform transforme le texte

text-indent déni l'indentation de 1ère ligne

margin marge externe avec d'autres éléments

oat placement de l'élément dans son conteneur sur une

border-radius arrondi la bordure de l'élément

Règle utilisée pour construire des pages responsive en

Tester le web responsive sous Firefox :

Tester le web responsive sous Safari :

Tester le web responsive sous Chrome :

Vous aimerez peut-être aussi

Le CSS interne est déni dans la section <head>

Il permet de dénir le style de plusieurs pages HTML

Sélecteurs d'identiant : Permet de cibler un élément par son id.

Sélecteurs d'éléments ls (>) : Permet de cibler un élément

L'ordre de dénition des styles est important pour garder une

On peut dénir une classe donnée pour l'élément ciblé :

div> chier style.css

Elles sont utilisés pour dénir la :

#hsl10{background=color:hsla(240, 100%, 50%,

background-color modie la couleur de fond d'un élément

background-position déni la position de l'image de fond

color déni la couleur du texte

text-indent déni l'indentation de 1ère ligne

oat placement de l'élément dans son conteneur sur une