CSS - Introductiondd

Cascade
S
electeurs
Priorit
es
Pseudo-
CSS : cascades et s
electeurs
Universit
e Lille 1
Technologies du Web CSS : les s

electeurs
Cascade
S
electeurs
Priorit
es
Pseudo-
au programme...
Cascade
S
electeurs
Priorit
es
Pseudo-
Universit
e Lille 1

electeurs
Cascade
S
electeurs
Priorit
es
Pseudo-
au programme...
Cascade
S
electeurs
Priorit
es
Pseudo-
Universit
e Lille 1

electeurs
Cascade
S
electeurs
Priorit
es
Pseudo-
conflits
un meme document peut utiliser plusieurs feuilles de style

il peut y avoir des règles en conflit
Universit
e Lille 1

electeurs
Cascade
S
electeurs
Priorit
es
Pseudo-
conflits

1
2
3
Universit
e Lille 1
les selecteurs selectionnent des elements communs

portent sur la meme propriete
attribuent des valeurs differentes

electeurs
Cascade
S
electeurs
Priorit
es
Pseudo-
conflits

1
2
3
les selecteurs selectionnent des elements communs

portent sur la meme propriete
attribuent des valeurs differentes
Comment resoudre ces conflits ?

Quelle règle est appliquee ?
Universit
e Lille 1

electeurs
Cascade
S
electeurs
Priorit
es
Pseudo-
cascade
Cascade
Le mecanisme de cascade determine les règles appliquees.
Universit
e Lille 1

electeurs
Cascade
S
electeurs
Priorit
es
Pseudo-
cascade
Cascade
Le mecanisme de cascade determine les règles appliquees.
3 etapes de filtre :
1 par m
edia
2 par origine
3 par sp
ecificite des selecteurs
Universit
e Lille 1

electeurs
Cascade
S
electeurs
Priorit
es
Pseudo-
m
edias
possibilite de preciser le media dans auquel sapplique les règles

definies dans la feuille style
attribut media de la balise <link>
ex : media="screen" media="print"
Universit
e Lille 1

electeurs
Cascade
S
electeurs
Priorit
es
Pseudo-
origine des styles
3 origines possibles pour les feuilles de style

auteur definies par lauteur de la page
utilisateur definies par celui qui consulte la page
navigateur definies par le navigateur
en general : auteur > utilisateur > navigateur
nuance par usage du mot-cle !important
plus de details : http: // openweb. eu. org/ articles/ cascade_ css
Universit
e Lille 1

electeurs
Cascade
S
electeurs
Priorit
es
Pseudo-
au programme...
Cascade
S
electeurs
Priorit
es
Pseudo-
Universit
e Lille 1

electeurs
Cascade
S
electeurs
Priorit
es
Pseudo-
au programme...
Cascade
S
electeurs
Priorit
es
Pseudo-
Universit
e Lille 1

electeurs
Cascade
S
electeurs
Priorit
es
Pseudo-
s
electeurs
S
electeur
Le s
electeur determine les elements sur lesquels sapplique la règle.
necessite de savoir comment
definir les selecteurs appropries
sont gerees les priorites entre règles en conflit
Universit
e Lille 1

electeurs
10
Cascade
S
electeurs
Priorit
es
Pseudo-
s
electeurs
S
electeur
Le s
electeur determine les elements sur lesquels sapplique la règle.
necessite de savoir comment
definir les selecteurs appropries
sont gerees les priorites entre règles en conflit
S
electeurs simples :
E tout element dont la balise est <E>
* tout element
Universit
e Lille 1

electeurs
10
Cascade
S
electeurs
Priorit
es
Pseudo-
s
electeurs et attributs
E[att] tout element E dont lattribut att est defini

ex : p[lang], img[alt], *[title]
Universit
e Lille 1

electeurs
11
Cascade
S
electeurs
Priorit
es
Pseudo-
s

E[att=val] tout element E dont lattribut att vaut val
ex : p[lang=fr]
Universit
e Lille 1

electeurs
11
Cascade
S
electeurs
Priorit
es
Pseudo-
s

E[att=val] tout element E dont lattribut att vaut val
ex : p[lang=fr]
E[att=val] tout element E dont lattribut att est une liste de mots
separes par des espaces, lun de ces mots vaut exactement
val
Universit
e Lille 1

electeurs
11
Cascade
S
electeurs
Priorit
es
Pseudo-
s
E[att=prefixe] tout element E dont la valeur de lattribut att

commence exactement par prefixe
ex : a[href="http://fil.univ-lille1.fr"]
Universit
e Lille 1

electeurs
12
Cascade
S
electeurs
Priorit
es
Pseudo-
s

E[att$=suffixe] tout element E dont la valeur de lattribut att se
termine exactement par suffixe
ex : img[src$=".png"], a[href$=".pdf"]
Universit
e Lille 1

electeurs
12
Cascade
S
electeurs
Priorit
es
Pseudo-
s

E[att$=suffixe] tout element E dont la valeur de lattribut att se
termine exactement par suffixe
ex : img[src$=".png"], a[href$=".pdf"]
E[att*=val] tout element E dont la valeur de lattribut att
contient la sous-chane val
ex : figure[alt*="diagramme"], *[title*="timo"]
Universit
e Lille 1

electeurs
12
Cascade
S
electeurs
Priorit
es
Pseudo-
s
electeur de classe et did
Cas particuliers des attributs class et id :
E.c tout element E appartenant à la classe c
equivalent à E[class=c]
ex : div.exercice, *.solution,
div.rmq[title="NB"]
Universit
e Lille 1

electeurs
13
Cascade
S
electeurs
Priorit
es
Pseudo-
s
electeur de classe et did
Cas particuliers des attributs class et id :
E.c tout element E appartenant à la classe c
equivalent à E[class=c]
ex : div.exercice, *.solution,
div.rmq[title="NB"]
E#ident tout element E dont lid vaut ident
equivalent à E[id=ident]
ex : img#joconde, *#joconde, #unique
Universit
e Lille 1

electeurs
13
Cascade
S
electeurs
Priorit
es
Pseudo-
s
electeurs de pseudo-classes et pseudo-
el
ements
E:pseudoC tout element E appartenant à la pseudo-classe pseudoC

ex : a:visited, a.fichier:hover
pseudo-classes et pseudo-elements presentes plus loin
Universit
e Lille 1

electeurs
14
Cascade
S
electeurs
Priorit
es
Pseudo-
s
electeurs de pseudo-classes et pseudo-
el
ements
E:pseudoC tout element E appartenant à la pseudo-classe pseudoC

ex : a:visited, a.fichier:hover
E::pseudoE tout pseudo-
el
ement pseudoE de lelement E
ex : h1::first-letter, p[lang=fr]::first-line
pseudo-classes et pseudo-elements presentes plus loin
Universit
e Lille 1

electeurs
14
Cascade
S
electeurs
Priorit
es
Pseudo-
combinaison de s
electeurs
sappuie sur la structure arborescente du document
si Sel1 et Sel2 sont des selecteurs :
Sel1 Sel2 tout element selectionne par Sel2 descendant (emboite
dans) dun element selectionne par Sel1
Universit
e Lille 1

electeurs
15
Cascade
S
electeurs
Priorit
es
Pseudo-
combinaison de s
electeurs
Sel1 > Sel2 tout element selectionne par Sel2 qui est fils dun
element selectionne par Sel1
Universit
e Lille 1

electeurs
15
Cascade
S
electeurs
Priorit
es
Pseudo-
combinaison de s
electeurs
Sel1 + Sel2 tout element selectionne par Sel2 qui suit
imm
ediatement un element selectionne par Sel1
(premier fr`
ere suivant)
Universit
e Lille 1

electeurs
15
Cascade
S
electeurs
Priorit
es
Pseudo-
combinaison de s
electeurs
Sel1 + Sel2 tout element selectionne par Sel2 qui suit
imm
ediatement un element selectionne par Sel1
(premier fr`
ere suivant)
Sel1 Sel2 tout element selectionne par Sel2 qui suit un element
selectionne par Sel1 (un fr`
ere suivant)
Universit
e Lille 1

electeurs
15
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
body
h1
p
em
h1
div
h1
ou
h1
div
em
em
body h1
Cr
edits figures Bruno Bogaert
Universit
e Lille 1

electeurs
16
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
body
body
h1
p
em
h1
div
h1
ou
h1
div
em
em
body h1
h1
p
em
div
h1
h1
div
em
em
div h1
Cr
Universit
e Lille 1

electeurs
16
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
body
body
h1
p
em
h1
div
h1
ou
h1
div
em
em
h1
p
em
div
h1
body h1
h1
div
em
em
div h1
body
h1
p
em
div
h1
h1
div
em
em
body>h1
Cr
Universit
e Lille 1

electeurs
16
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
body
body
h1
p
em
h1
div
h1
h1
div
em
em
h1
p
em
body h1
ou
div
h1
p
em
em
em
body
div
h1
div
div h1
body
h1
h1
h1
div
em
em
body>h1
h1
p
em
div
h1
h1
div
em
em
div+h1
Cr
Universit
e Lille 1

electeurs
16
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
body
h1
p
em
div
h1
h1
div
em
em
div em
Cr
Universit
e Lille 1

electeurs
17
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
body
h1
p
em
body
div
h1
h1
div
em
em
div em
h1
p
em
div
h1
h1
div
em
em
div>em
Cr
Universit
e Lille 1

electeurs
17
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
body
h1
p
em
body
div
h1
h1
h1
div
em
em
div
em
h1
div em
h1
div
em
em
div>em
body
h1
p
em
div
h1
h1
div
em
em
div p em
Cr
Universit
e Lille 1

electeurs
17
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
body
h1
p
em
body
div
h1
h1
div
em
em
h1
p
em
div em
div
h1
p
em
em
em
body
div
h1
div
div>em
body
h1
h1
h1
div
em
em
div p em
h1
p
em
div
h1
h1
div
em
em
body>p em
Cr
Universit
e Lille 1

electeurs
17
Cascade
S
electeurs
Priorit
es
Pseudo-
au programme...
Cascade
S
electeurs
Priorit
es
Pseudo-
Universit
e Lille 1

electeurs
18
Cascade
S
electeurs
Priorit
es
Pseudo-
au programme...
Cascade
S
electeurs
Priorit
es
Pseudo-
Universit
e Lille 1

electeurs
19
Cascade
S
electeurs
Priorit
es
Pseudo-
conflit entre r`
egles
Calcul de priorit
e
On compte pour chaque selecteur :
a nombre de selecteurs did (= nombre de #)
b nombre de classes, pseudo-classes ou dattributs
c nombre delements ou de pseudo-elements
Le selecteur recoit la priorite a b c.
Le selecteur avec la plus grande priorite lemporte.
En cas degalite, la dernière declaration lemporte.
Universit
e Lille 1

electeurs
20
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
selecteur
* {...}
h1 {...}
div.reponse {...}
#joconde {...}
div a {...}
div a:visited {...}
p span.fichier {...}
p a[href$=.pdf] {...}
p.enonce a[href$=.pdf] {...}
ol.exercice li.question {...}
div#diaporama img.gauche {...}
article p::first-letter {...}
article#special p::first-letter {...}
Universit
e Lille 1

electeurs
21
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
selecteur
* {...}
h1 {...}
div.reponse {...}
#joconde {...}
div a {...}
div a:visited {...}
Universit
e Lille 1
a b
0 0

electeurs
c
0
21
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
selecteur
* {...}
h1 {...}
div.reponse {...}
#joconde {...}
div a {...}
div a:visited {...}
Universit
e Lille 1
a b
0 0
0 0

electeurs
c
0
1
21
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
selecteur
* {...}
h1 {...}
div.reponse {...}
#joconde {...}
div a {...}
div a:visited {...}
Universit
e Lille 1
a b
0 0
0 0
0 1

electeurs
c
0
1
1
21
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
selecteur
* {...}
h1 {...}
div.reponse {...}
#joconde {...}
div a {...}
div a:visited {...}
Universit
e Lille 1
a b
0 0
0 0
0 1
1 0

electeurs
c
0
1
1
0
21
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
selecteur
* {...}
h1 {...}
div.reponse {...}
#joconde {...}
div a {...}
div a:visited {...}
Universit
e Lille 1
a b
0 0
0 0
0 1
1 0
0 0

electeurs
c
0
1
1
0
2
21
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
selecteur
* {...}
h1 {...}
div.reponse {...}
#joconde {...}
div a {...}
div a:visited {...}
Universit
e Lille 1
a b
0 0
0 0
0 1
1 0
0 0
0 1

electeurs
c
0
1
1
0
2
2
21
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
selecteur
* {...}
h1 {...}
div.reponse {...}
#joconde {...}
div a {...}
div a:visited {...}
Universit
e Lille 1
a b
0 0
0 0
0 1
1 0
0 0
0 1
0 1

electeurs
c
0
1
1
0
2
2
2
21
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
selecteur
* {...}
h1 {...}
div.reponse {...}
#joconde {...}
div a {...}
div a:visited {...}
Universit
e Lille 1
a b
0 0
0 0
0 1
1 0
0 0
0 1
0 1
0 1

electeurs
c
0
1
1
0
2
2
2
2
21
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
selecteur
* {...}
h1 {...}
div.reponse {...}
#joconde {...}
div a {...}
div a:visited {...}
Universit
e Lille 1
a b
0 0
0 0
0 1
1 0
0 0
0 1
0 1
0 1
0 2

electeurs
c
0
1
1
0
2
2
2
2
2
21
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
selecteur
* {...}
h1 {...}
div.reponse {...}
#joconde {...}
div a {...}
div a:visited {...}
Universit
e Lille 1
a b
0 0
0 0
0 1
1 0
0 0
0 1
0 1
0 1
0 2
0 2

electeurs
c
0
1
1
0
2
2
2
2
2
2
21
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
selecteur
* {...}
h1 {...}
div.reponse {...}
#joconde {...}
div a {...}
div a:visited {...}
Universit
e Lille 1
a b
0 0
0 0
0 1
1 0
0 0
0 1
0 1
0 1
0 2
0 2
1 1

electeurs
c
0
1
1
0
2
2
2
2
2
2
2
21
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
selecteur
* {...}
h1 {...}
div.reponse {...}
#joconde {...}
div a {...}
div a:visited {...}
Universit
e Lille 1
a b
0 0
0 0
0 1
1 0
0 0
0 1
0 1
0 1
0 2
0 2
1 1
0 0

electeurs
c
0
1
1
0
2
2
2
2
2
2
2
3
21
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
selecteur
* {...}
h1 {...}
div.reponse {...}
#joconde {...}
div a {...}
div a:visited {...}
Universit
e Lille 1
a b
0 0
0 0
0 1
1 0
0 0
0 1
0 1
0 1
0 2
0 2
1 1
0 0
1 0

electeurs
c
0
1
1
0
2
2
2
2
2
2
2
3
3
21
Cascade
S
electeurs
Priorit
es
Pseudo-
b-g = background-color
1
2
<p>zero</p>
<h1>Titre</h1>
<p>premier</p>
<p>second</p>
<p>troisi`
eme</p>
<p lang="en">fourth </p>
<p class="bleu">cinqui`
eme</p>
<p class="bleu">sixi`
eme</p>
<p class="bleu" id="special">7`
eme</p>
<p>huiti`
eme</p>
<div>
<p>neuvi`
eme</p>
<p lang="en">tenth</p>
</div>
<p>onzi`
eme
</p>
<h1>Second titre </h1>
<p>douzi`
eme</p>
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }
div>p { b-g:yellow; }
p#special { b-g:gold; }
p[lang=en] { b-g:green; }
p.bleu { b-g:lightblue; }
p+p { b-g:lightgreen; }

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p>
<h1>Titre</h1>
<p>premier</p>
<p>second</p>
<p>troisi`
eme</p>
eme</p>
eme</p>
eme</p>
<p>huiti`
eme</p>
<div>
<p>neuvi`
eme</p>
</div>
<p>onzi`
eme
</p>
<p>douzi`
eme</p>
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p>
<h1>Titre</h1>
<p>premier</p>
<p>second</p>
<p>troisi`
eme</p>
eme</p>
eme</p>
eme</p>
<p>huiti`
eme</p>
<div>
<p>neuvi`
eme</p>
</div>
<p>onzi`
eme
</p>
<p>douzi`
eme</p>
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p> 1
<p>second</p> 1
<p>troisi`
eme</p> 1
<p lang="en">fourth </p> 1
eme</p> 1
eme</p> 1
eme</p>
<p>huiti`
eme</p> 1
<div>
<p>neuvi`
eme</p> 1
<p lang="en">tenth</p> 1
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p> 1
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p> 1 2
<p>second</p> 1
<p>troisi`
eme</p> 1
eme</p> 1
eme</p> 1
eme</p>
<p>huiti`
eme</p> 1
<div>
<p>neuvi`
eme</p> 1
<p lang="en">tenth</p> 1
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p> 1 2
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p> 1 2
<p>second</p> 1
<p>troisi`
eme</p> 1
eme</p> 1
eme</p> 1
eme</p>
<p>huiti`
eme</p> 1
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p> 1 2
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p> 1 2
<p>second</p> 1
<p>troisi`
eme</p> 1
eme</p> 1
eme</p> 1
eme</p>
<p>huiti`
eme</p> 1
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p> 1 2
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p> 1 2
<p>second</p> 1
<p>troisi`
eme</p> 1
<p lang="en">fourth </p> 1 5
eme</p> 1
eme</p> 1
eme</p>
<p>huiti`
eme</p> 1
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3 5
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p> 1 2
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p> 1 2
<p>second</p> 1
<p>troisi`
eme</p> 1
<p lang="en">fourth </p> 1 5
eme</p> 1 6
eme</p> 1 6
eme</p>
<p>huiti`
eme</p> 1
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3 5
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p> 1 2
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p> 1 2
<p>second</p> 1 7
<p>troisi`
eme</p> 1 7
<p lang="en">fourth </p> 1 5 7
eme</p> 1 6 7
eme</p> 1 6 7
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
<p lang="en">tenth</p> 1 3 5 7
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p> 1 2
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p> 1 2
<p>second</p> 1 7
<p>troisi`
eme</p> 1 7
eme</p> 1 6 7
eme</p> 1 6 7
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p> 1 2
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }
a

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p> 1 2
<p>second</p> 1 7
<p>troisi`
eme</p> 1 7
eme</p> 1 6 7
eme</p> 1 6 7
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p> 1 2
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }
a
4 > 6 > 5 > 7 > 3 > 2 > 1

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p> 1 7
<p>troisi`
eme</p> 1 7
eme</p> 1 6 7
eme</p> 1 6 7
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p> 1 2
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }
a
4 > 6 > 5 > 7 > 3 > 2 > 1

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
<p>troisi`
eme</p> 1 7
eme</p> 1 6 7
eme</p> 1 6 7
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p> 1 2
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }
a
4 > 6 > 5 > 7 > 3 > 2 > 1

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
7
<p>troisi`
eme</p>
eme</p> 1 6 7
eme</p> 1 6 7
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p> 1 2
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }
a
4 > 6 > 5 > 7 > 3 > 2 > 1

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
7
<p>troisi`
eme</p>
5
eme</p> 1 6 7
eme</p> 1 6 7
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p> 1 2
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }
a
4 > 6 > 5 > 7 > 3 > 2 > 1

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
7
<p>troisi`
eme</p>
5
eme</p>
6
eme</p> 1 6 7
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p> 1 2
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }
a
4 > 6 > 5 > 7 > 3 > 2 > 1

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
7
<p>troisi`
eme</p>
5
eme</p>
6
6
eme</p>
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p> 1 2
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }
a
4 > 6 > 5 > 7 > 3 > 2 > 1

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
7
<p>troisi`
eme</p>
5
eme</p>
6
6
eme</p>
eme</p>
<p>huiti`
eme</p> 1 7
<div>
<p>neuvi`
eme</p> 1 3
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p> 1 2
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }
a
4 > 6 > 5 > 7 > 3 > 2 > 1

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
7
<p>troisi`
eme</p>
5
eme</p>
6
6
eme</p>
eme</p>
<p>huiti`
eme</p>
7
<div>
<p>neuvi`
eme</p> 1 3
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p> 1 2
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }
a
4 > 6 > 5 > 7 > 3 > 2 > 1

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
7
<p>troisi`
eme</p>
5
eme</p>
6
6
eme</p>
eme</p>
<p>huiti`
eme</p>
7
<div>
3
<p>neuvi`
eme</p>
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p> 1 2
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }
a
4 > 6 > 5 > 7 > 3 > 2 > 1

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
7
<p>troisi`
eme</p>
5
eme</p>
6
6
eme</p>
eme</p>
<p>huiti`
eme</p>
7
<div>
3
<p>neuvi`
eme</p>
5
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p> 1 2
Universit
e Lille 1
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }
a
4 > 6 > 5 > 7 > 3 > 2 > 1

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
1
2
<p>zero</p> 1
<h1>Titre</h1>
<p>premier</p>
2
<p>second</p>
7
7
<p>troisi`
eme</p>
5
eme</p>
6
6
eme</p>
eme</p>
<p>huiti`
eme</p>
7
<div>
3
<p>neuvi`
eme</p>
5
</div>
<p>onzi`
eme 1 </p>
<p>douzi`
eme</p>
2
3
4
5
6
7
p { b-g :pink }
h1+p { b-g:red; }
a
4 > 6 > 5 > 7 > 3 > 2 > 1
ex-selecteur.html
Universit
e Lille 1

electeurs
22
Cascade
S
electeurs
Priorit
es
Pseudo-
h
eritage
H
eritage
lorsque pour un element aucune règle ne definit de valeur pour
une propriete, cest la valeur de cette propriete pour son parent
qui sapplique
toutes les proprietes ne sheritent pas

ex : margin, padding, etc
la propriete inherit permet dagir sur lheritage
Universit
e Lille 1

electeurs
23
Cascade
S
electeurs
Priorit
es
Pseudo-
au programme...
Cascade
S
electeurs
Priorit
es
Pseudo-
Universit
e Lille 1

electeurs
24
Cascade
S
electeurs
Priorit
es
Pseudo-
au programme...
Cascade
S
electeurs
Priorit
es
Pseudo-
Universit
e Lille 1

electeurs
25
Cascade
S
electeurs
Priorit
es
Pseudo-
pseudo-classes
non exhaustif
Structurelles
:empty un element E sans descendant (y compris nud texte)
:first-child un element qui est premier fils dun autre element
ex : div.exercice:first-child
:last-child element dernier fils dun autre element
:nth-child(an + b) element (an + b)-ème fils dun autre element
ex : div:nth-child(3), div:nth-child(2n),
div:nth-child(even), div[idx]:nth-child(3n+1)
:nth-last-child(an + b) (an + b)-ème fils en partant de la fin
:nth-of-type(an + b) (an + b)nème element du type selectionne et
qui ont le meme père
Universit
e Lille 1

electeurs
26
Cascade
S
electeurs
Priorit
es
Pseudo-
pseudo-classes (suite) et pseudo-

el
ements
non exhaustif
Dynamiques
:hover est sous le pointeur de la souris
:visited (<a> uniquement) lien dejà visite
:link (<a> uniquement) lien non encore visite
Pseudo-
el
ements
::first-line la première ligne formatee dun element
::first-letter le première lettre formatee dun element
::before insertion de contenu avant lelement
::after insertion de contenu après lelement
Universit
e Lille 1

electeurs
27
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
body
h1
p
em
div
h1
h1
div
em
em
:first-child
Cr
Universit
e Lille 1

electeurs
28
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
body
h1
p
em
body
div
h1
h1
div
em
em
:first-child
h1
p
em
div
h1
h1
div
em
em
h1:first-child
Cr
Universit
e Lille 1

electeurs
28
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
body
h1
p
em
body
div
h1
h1
h1
div
em
em
div
em
:first-child
h1
h1
div
em
em
h1:first-child
body
h1
p
em
div
h1
h1
div
em
em
div>h1:first-child
Cr
Universit
e Lille 1

electeurs
28
Cascade
S
electeurs
Priorit
es
Pseudo-
exemples
body
h1
p
em
body
div
h1
h1
div
em
em
h1
p
em
:first-child
div
h1
p
em
em
em
body
div
h1
div
h1:first-child
body
h1
h1
h1
div
em
em
div>h1:first-child
h1
p
em
div
h1
h1
div
em
em
h1:first-child+*
Cr
Universit
e Lille 1

electeurs
28
Cascade
S
electeurs
Priorit
es
Pseudo-
exemple
Cr
Universit
e Lille 1

electeurs
29

CSS - Introductiondd

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

CSS - Introductiondd

Transféré par

Droits d'auteur :

Formats disponibles

Cascade

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

un meme document peut utiliser plusieurs feuilles de style

Technologies du Web CSS : les s

un meme document peut utiliser plusieurs feuilles de style

les selecteurs selectionnent des elements communs

Technologies du Web CSS : les s

un meme document peut utiliser plusieurs feuilles de style

les selecteurs selectionnent des elements communs

Comment resoudre ces conflits ?

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

possibilite de preciser le media dans auquel sapplique les r`egles

Technologies du Web CSS : les s

origine des styles

3 origines possibles pour les feuilles de style

plus de details : http: // openweb. eu. org/ articles/ cascade_ css

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

E[att] tout element E dont lattribut att est defini

Technologies du Web CSS : les s

E[att] tout element E dont lattribut att est defini

Technologies du Web CSS : les s

E[att] tout element E dont lattribut att est defini

Technologies du Web CSS : les s

E[att=prefixe] tout element E dont la valeur de lattribut att

Technologies du Web CSS : les s

E[att=prefixe] tout element E dont la valeur de lattribut att

Technologies du Web CSS : les s

E[att=prefixe] tout element E dont la valeur de lattribut att

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

E:pseudoC tout element E appartenant `a la pseudo-classe pseudoC

pseudo-classes et pseudo-elements presentes plus loin

Technologies du Web CSS : les s

E:pseudoC tout element E appartenant `a la pseudo-classe pseudoC

pseudo-classes et pseudo-elements presentes plus loin

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s

Technologies du Web CSS : les s