CSS _ Introductiondd

8/16/2019 CSS _ Introductiondd

1/86

Cascade S électeurs Priorit és Pseudo-

CSS : cascades et sélecteurs

Université Lille 1 Technologies du Web – CSS : les sélecteurs 1


2/86


au programme...

1 Cascade

2 Sélecteurs

3 Priorités

4 Pseudo-



3/86


au programme...

1 Cascade

2 Sélecteurs

3 Priorités

4 Pseudo-



4/86


conits

un même document peut utiliser plusieurs feuilles de styleil peut y avoir des r̀egles en conit



5/86


conits


1 les sélecteurs s électionnent des éléments communs

2 portent sur la m ême propri ét é3 attribuent des valeurs diff érentes



6/86


conits


1 les sélecteurs s électionnent des éléments communs

2 portent sur la m ême propri ét é3 attribuent des valeurs diff érentes

Comment résoudre ces conits ?Quelle règle est appliquée ?


C d S ´ l i i ´ d


7/86


cascade

CascadeLe ḿecanisme de cascade d́etermine les r̀egles appliqúees.


C d S ´ l t P i it ´ P d


8/86

Cascade S electeurs Priorit es Pseudo-

cascade

CascadeLe ḿecanisme de cascade d́etermine les r̀egles appliqúees.

3 étapes de ltre :1 par média2 par origine3 par spécicit́e des sélecteurs


Cascade S électeurs Priorit és Pseudo


9/86

Cascade S electeurs Priorit es Pseudo-

médias

possibilit́e de pŕeciser le media dans auquel s’applique les règles

dénies dans la feuille styleattribut media de la balise

ex : media="screen" – media="print"




10/86

Cascade S electeurs Priorit es Pseudo

origine des styles

3 origines possibles pour les feuilles de styleauteur d́enies par l’auteur de la page

utilisateur dénies par celui qui consulte la pagenavigateur dénies par le navigateuren général : auteur > utilisateur > navigateur

nuanc ´ e par usage du mot-cl ´ e !important

plus de d ´ etails : http: // openweb. eu. org/ articles/ cascade_ css




11/86

Cascade S electeurs Priorit es Pseudo

au programme...

1 Cascade

2 Sélecteurs

3 Priorités

4 Pseudo-




12/86

au programme...

1 Cascade

2 Sélecteurs

3 Priorités

4

Pseudo-




13/86

sélecteurs

SélecteurLe sélecteur détermine les éléments sur lesquels s’applique la règle.

nécessit́e de savoir commentdénir les śelecteurs appropríessont gérées les priorit́es entre r̀egles en conit




14/86

sélecteurs

SélecteurLe sélecteur détermine les éléments sur lesquels s’applique la règle.

nécessit́e de savoir commentdénir les śelecteurs appropríessont gérées les priorit́es entre r̀egles en conit

Sélecteurs simples :E tout éĺement dont la balise est * tout éĺement




15/86

sélecteurs et attributs

E[att] tout élément E dont l’attribut att est déniex : p[lang] , img[alt] , *[title]




16/86



E[att=val] tout éĺement E dont l’attribut att vaut valex : p[lang=fr]




17/86



E[att=val] tout éĺement E dont l’attribut att vaut valex : p[lang=fr]

E[att ∼ =val] tout éĺement E dont l’attribut att est une liste de motsséparés par des espaces, l’un de ces mots vaut exactementval




18/86


E[attˆ=”prexe”] tout éĺement E dont la valeur de l’attribut attcommence exactement par prefixeex : a[hrefˆ="http://fil.univ-lille1.fr"]




19/86



E[att$=”suffixe”] tout éĺement E dont la valeur de l’attribut att setermine exactement par suffixeex : img[src$=".png"] , a[href$=".pdf"]




20/86



E[att$=”suffixe”] tout éĺement E dont la valeur de l’attribut att setermine exactement par suffixeex : img[src$=".png"] , a[href$=".pdf"]

E[att*=”val”] tout élément E dont la valeur de l’attribut attcontient la sous-châıne valex : figure[alt*="diagramme"] , *[title*="timo"]




21/86

sélecteur de classe et d’id

Cas particuliers des attributs class et id :

E.c tout élément E appartenant à la classe céquivalent à E[class ∼ =c]

ex : div.exercice , *.solution ,div.rmq[titleˆ="NB"]




22/86

sélecteur de classe et d’id

Cas particuliers des attributs class et id :

E.c tout élément E appartenant à la classe céquivalent à E[class ∼ =c]

ex : div.exercice , *.solution ,div.rmq[titleˆ="NB"]

E#ident tout éĺement E dont l’id vaut identéquivalent à E[id=ident]

ex : img#joconde , *#joconde , #unique




23/86

sélecteurs de pseudo-classes et pseudo-éléments

E:pseudoC tout éĺement E appartenant à la pseudo-classe pseudoC

ex : a:visited , a.fichier:hover

pseudo-classes et pseudo- éléments pr ésent és plus loin




24/86

sélecteurs de pseudo-classes et pseudo-éléments

E:pseudoC tout éĺement E appartenant à la pseudo-classe pseudoC

ex : a:visited , a.fichier:hover

E::pseudoE tout pseudo-élément pseudoE de l’élément E

ex : h1::first-letter , p[lang=fr]::first-line

pseudo-classes et pseudo- éléments pr ésent és plus loin




25/86

combinaison de sélecteurs

s’appuie sur la structure arborescente du document

si Sel1 et Sel2 sont des sélecteurs :

Sel1 Sel2 tout éĺement sélectionńe par Sel2 descendant (emboitédans) d’un éĺement sélectionné par Sel1




26/86





Sel1 > Sel2 tout élément sélectionné par Sel2 qui est ls d’unéĺement sélectionńe par Sel1




27/86






Sel1 + Sel2 tout éĺement sélectionńe par Sel2 qui suitimmédiatement un éĺement sélectionńe par Sel1(premier frère suivant)




28/86






Sel1 + Sel2 tout éĺement sélectionńe par Sel2 qui suitimmédiatement un éĺement sélectionńe par Sel1(premier frère suivant)

Sel1 ∼ Sel2 tout éĺement sélectionńe par Sel2 qui suit un éĺementśelectionné par Sel1 (un frère suivant)




29/86

exemples

Cr ́ edits gures Bruno Bogaert Université Lille 1 Technologies du Web – CSS : les sélecteurs 16



30/86

exemples




31/86

exemples




32/86

exemples




33/86

exemples




34/86

exemples




35/86

exemples



36/86



37/86

au programme...

1 Cascade

2 Sélecteurs

3 Priorités

4 Pseudo-




38/86

au programme...

1 Cascade

2 Sélecteurs

3 Priorités

4 Pseudo-




39/86

conit entre règles

Calcul de priorité

On compte pour chaque śelecteur :a nombre de sélecteurs d’id (= nombre de #)b nombre de classes, pseudo-classes ou d’attributsc nombre d’́eĺements ou de pseudo-́eĺements

Le śelecteur reçoit la priorit́e a b c.Le sélecteur avec la plus grande priorité l’emporte.

En cas d’́egalit́e, la dernìere d́eclaration l’emporte.




40/86

exemples

sélecteur a b c* {...}h1 {...}div.reponse {...}#joconde {...}

div a {...}div a:visited {...}p span.chier {...}p a[href$=”.pdf”] {...}p.enonce a[href$=”.pdf”] {...}ol.exercice li.question {...}div#diaporama img.gauche {...}article p::rst-letter {...}article#special p::rst-letter {...}



l


41/86

exemples

sélecteur a b c* {...} 0 0 0h1 {...}div.reponse {...}#joconde {...}




l


42/86

exemples

sélecteur a b c* {...} 0 0 0h1 {...} 0 0 1div.reponse {...}#joconde {...}




l


43/86

exemples

sélecteur a b c* {...} 0 0 0h1 {...} 0 0 1div.reponse {...} 0 1 1#joconde {...}




l


44/86

exemples

sélecteur a b c* {...} 0 0 0h1 {...} 0 0 1div.reponse {...} 0 1 1#joconde {...} 1 0 0




exemples


45/86

exemples


div a {...} 0 0 2div a:visited {...}p span.chier {...}p a[href$=”.pdf”] {...}p.enonce a[href$=”.pdf”] {...}ol.exercice li.question {...}div#diaporama img.gauche {...}article p::rst-letter {...}article#special p::rst-letter {...}


Cascade S´electeurs Priorit

´es Pseudo-

exemples


46/86

exemples


div a {...} 0 0 2div a:visited {...} 0 1 2p span.chier {...}p a[href$=”.pdf”] {...}p.enonce a[href$=”.pdf”] {...}ol.exercice li.question {...}div#diaporama img.gauche {...}article p::rst-letter {...}article#special p::rst-letter {...}



exemples


47/86

exemples


div a {...} 0 0 2div a:visited {...} 0 1 2p span.chier {...} 0 1 2p a[href$=”.pdf”] {...}p.enonce a[href$=”.pdf”] {...}ol.exercice li.question {...}div#diaporama img.gauche {...}article p::rst-letter {...}article#special p::rst-letter {...}



exemples


48/86

exemples


div a {...} 0 0 2div a:visited {...} 0 1 2p span.chier {...} 0 1 2p a[href$=”.pdf”] {...} 0 1 2p.enonce a[href$=”.pdf”] {...}ol.exercice li.question {...}div#diaporama img.gauche {...}article p::rst-letter {...}article#special p::rst-letter {...}



exemples


49/86

exemples


div a {...} 0 0 2div a:visited {...} 0 1 2p span.chier {...} 0 1 2p a[href$=”.pdf”] {...} 0 1 2p.enonce a[href$=”.pdf”] {...} 0 2 2ol.exercice li.question {...}div#diaporama img.gauche {...}article p::rst-letter {...}article#special p::rst-letter {...}



exemples


50/86

exemples


div a {...} 0 0 2div a:visited {...} 0 1 2p span.chier {...} 0 1 2p a[href$=”.pdf”] {...} 0 1 2p.enonce a[href$=”.pdf”] {...} 0 2 2ol.exercice li.question {...} 0 2 2div#diaporama img.gauche {...}article p::rst-letter {...}article#special p::rst-letter {...}



exemples


51/86

exemples


div a {...} 0 0 2div a:visited {...} 0 1 2p span.chier {...} 0 1 2p a[href$=”.pdf”] {...} 0 1 2p.enonce a[href$=”.pdf”] {...} 0 2 2ol.exercice li.question {...} 0 2 2div#diaporama img.gauche {...} 1 1 2article p::rst-letter {...}article#special p::rst-letter {...}



exemples


52/86

exemples


div a {...} 0 0 2div a:visited {...} 0 1 2p span.chier {...} 0 1 2p a[href$=”.pdf”] {...} 0 1 2p.enonce a[href$=”.pdf”] {...} 0 2 2ol.exercice li.question {...} 0 2 2div#diaporama img.gauche {...} 1 1 2article p::rst-letter {...} 0 0 3article#special p::rst-letter {...}



exemples


53/86

exemples


div a {...} 0 0 2div a:visited {...} 0 1 2p span.chier {...} 0 1 2p a[href$=”.pdf”] {...} 0 1 2p.enonce a[href$=”.pdf”] {...} 0 2 2ol.exercice li.question {...} 0 2 2div#diaporama img.gauche {...} 1 1 2article p::rst-letter {...} 0 0 3article#special p::rst-letter {...} 1 0 3



b-g = background-color


54/86

zero
Titre
premier

second

troisi` eme

fourth

cinqui` eme

sixi` eme

7` eme

huiti` eme

neuvi` eme

tenth

onzi` eme
Second titre
douzi` eme

1 p { b-g :pink }2 h1+p { b-g:red; }3

div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }





55/86

zero
Titre
premier

second

troisi` eme

fourth

cinqui` eme

sixi` eme

7` eme

huiti` eme

neuvi` eme

tenth

onzi` eme
Second titre
douzi` eme

1 p { b-g :pink }2 h1+p { b-g:red; }3

div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }





56/86

zero
Titre
premier

second

troisi` eme

fourth

cinqui` eme

sixi` eme

7` eme

huiti` eme

neuvi` eme

tenth

onzi` eme
Second titre
douzi` eme

1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p

{ b-g:yellow;

}4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }





57/86

zero

1

Titre

premier
1
second
1
troisi` eme
1
fourth
1
cinqui` eme

1

sixi` eme

1

7` eme
1
huiti` eme

1

neuvi` eme
1
tenth

1

onzi` eme 1
Second titre
douzi` eme

1

1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p

{ b-g:yellow;

}4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }





58/86

zero

1

Titre

premier
1 2
second
1
troisi` eme
1
fourth
1
cinqui` eme

1

sixi` eme

1

7` eme
1
huiti` eme

1

neuvi` eme
1
tenth

1

onzi` eme 1
Second titre
douzi` eme

1 2

1 p { b-g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }





59/86

zero

1

Titre

premier
1 2
second
1
troisi` eme
1
fourth
1
cinqui` eme

1

sixi` eme

1

7` eme
1
huiti` eme

1

neuvi` eme
1 3
tenth

1 3

onzi` eme 1
Second titre
douzi` eme

1 2






60/86

zero

1

Titre

premier
1 2
second
1
troisi` eme
1
fourth
1
cinqui` eme
1
sixi` eme
1
7` eme
1 4
huiti` eme

1

neuvi` eme
1 3
tenth

1 3

onzi` eme 1
Second titre
douzi` eme

1 2






61/86

zero

1

Titre

premier
1 2
second
1
troisi` eme
1
fourth
1 5
cinqui` eme
1
sixi` eme
1
7` eme
1 4
huiti` eme

1

neuvi` eme
1 3
tenth

1 3 5

onzi` eme 1
Second titre
douzi` eme

1 2






62/86

zero

1

Titre

premier
1 2
second
1
troisi` eme
1
fourth
1 5
cinqui` eme
1 6
sixi` eme
1 6
7` eme
1 4 6
huiti` eme

1

neuvi` eme
1 3
tenth

1 3 5

onzi` eme 1
Second titre
douzi` eme

1 2






63/86

zero

1

Titre

premier
1 2
second
1 7
troisi` eme
1 7
fourth
1 5 7
cinqui` eme
1 6 7
sixi` eme
1 6 7
7` eme
1 4 6 7
huiti` eme

1 7

neuvi` eme
1 3
tenth

1 3 5 7

onzi` eme 1
Second titre
douzi` eme

1 2






64/86

zero

1

Titre

premier
1 2
second
1 7
troisi` eme
1 7
fourth
1 5 7
cinqui` eme
1 6 7
sixi` eme
1 6 7
7` eme
1 4 6 7
huiti` eme

1 7

neuvi` eme
1 3
tenth

1 3 5 7

onzi` eme 1
Second titre
douzi` eme

1 2


a b c

1 0 0 12 0 0 2

3 0 0 2

4 1 0 1

5 0 1 1

6 0 1 1

7 0 0 2





65/86

zero

1

Titre

premier
1 2
second
1 7
troisi` eme
1 7
fourth
1 5 7
cinqui` eme
1 6 7
sixi` eme
1 6 7
7` eme
1 4 6 7
huiti` eme

1 7

neuvi` eme
1 3
tenth

1 3 5 7

onzi` eme 1
Second titre
douzi` eme

1 2


a b c

1 0 0 12 0 0 2

3 0 0 2

4 1 0 1

5 0 1 1

6 0 1 1

7 0 0 2

4 > 6 > 5 > 7 > 3 > 2 > 1





66/86

zero

1

Titre

premier
2
second
1 7
troisi` eme
1 7
fourth
1 5 7
cinqui` eme
1 6 7
sixi` eme
1 6 7
7` eme
1 4 6 7
huiti` eme

1 7

neuvi` eme
1 3
tenth

1 3 5 7

onzi` eme 1
Second titre
douzi` eme

1 2


a b c

1 0 0 12 0 0 2

3 0 0 2

4 1 0 1

5 0 1 1

6 0 1 1

7 0 0 2

4 > 6 > 5 > 7 > 3 > 2 > 1





67/86

zero

1

Titre

premier
2
second
7
troisi` eme
1 7
fourth
1 5 7
cinqui` eme
1 6 7
sixi` eme
1 6 7
7` eme
1 4 6 7
huiti` eme

1 7

neuvi` eme
1 3
tenth

1 3 5 7

onzi` eme 1
Second titre
douzi` eme

1 2


a b c

1 0 0 12 0 0 2

3 0 0 2

4 1 0 1

5 0 1 1

6 0 1 1

7 0 0 2

4 > 6 > 5 > 7 > 3 > 2 > 1





68/86

zero

1

Titre

premier
2
second
7
troisi` eme
7
fourth
1 5 7
cinqui` eme
1 6 7
sixi` eme
1 6 7
7` eme
1 4 6 7
huiti` eme

1 7

neuvi` eme
1 3
tenth

1 3 5 7

onzi` eme 1
Second titre
douzi` eme

1 2


a b c

1 0 0 1

2 0 0 2

3 0 0 2

4 1 0 1

5 0 1 1

6 0 1 1

7 0 0 2

4 > 6 > 5 > 7 > 3 > 2 > 1





69/86

zero

1

Titre

premier
2
second
7
troisi` eme
7
fourth
5
cinqui` eme
1 6 7
sixi` eme
1 6 7
7` eme
1 4 6 7
huiti` eme

1 7

neuvi` eme
1 3
tenth

1 3 5 7

onzi` eme 1
Second titre
douzi` eme

1 2


a b c

1 0 0 1

2 0 0 2

3 0 0 2

4 1 0 1

5 0 1 1

6 0 1 1

7 0 0 2

4 > 6 > 5 > 7 > 3 > 2 > 1




{ b k }


70/86

zero

1

Titre

premier
2
second
7
troisi` eme
7
fourth
5
cinqui` eme
6
sixi` eme
1 6 7
7` eme
1 4 6 7
huiti` eme

1 7

neuvi` eme
1 3
tenth

1 3 5 7

onzi` eme 1
Second titre
douzi` eme

1 2


a b c

1 0 0 1

2 0 0 2

3 0 0 2

4 1 0 1

5 0 1 1

6 0 1 1

7 0 0 2

4 > 6 > 5 > 7 > 3 > 2 > 1




{ b i k }


71/86

zero

1

Titre

premier
2
second
7
troisi` eme
7
fourth
5
cinqui` eme
6
sixi` eme
6
7` eme
1 4 6 7
huiti` eme

1 7

neuvi` eme
1 3
tenth

1 3 5 7

onzi` eme 1
Second titre
douzi` eme

1 2


a b c

1 0 0 1

2 0 0 2

3 0 0 2

4 1 0 1

5 0 1 1

6 0 1 1

7 0 0 2

4 > 6 > 5 > 7 > 3 > 2 > 1




1 { b g i k }


72/86

zero

1

Titre

premier
2
second
7
troisi` eme
7
fourth
5
cinqui` eme
6
sixi` eme
6
7` eme
4
huiti` eme

1 7

neuvi` eme
1 3
tenth

1 3 5 7

onzi` eme 1
Second titre
douzi` eme

1 2


a b c

1 0 0 1

2 0 0 2

3 0 0 2

4 1 0 1

5 0 1 1

6 0 1 1

7 0 0 2

4 > 6 > 5 > 7 > 3 > 2 > 1




1 p { b g :pink }


73/86

zero

1

Titre

premier
2
second
7
troisi` eme
7
fourth
5
cinqui` eme
6
sixi` eme
6
7` eme
4
huiti` eme

7

neuvi` eme
1 3
tenth

1 3 5 7

onzi` eme 1
Second titre
douzi` eme

1 2


a b c

1 0 0 1

2 0 0 2

3 0 0 2

4 1 0 1

5 0 1 1

6 0 1 1

7 0 0 2

4 > 6 > 5 > 7 > 3 > 2 > 1




1 p { b g :pink }


74/86

zero

1

Titre

premier
2
second
7
troisi` eme
7
fourth
5
cinqui` eme
6
sixi` eme
6
7` eme
4
huiti` eme

7

neuvi` eme
3
tenth

1 3 5 7

onzi` eme 1
Second titre
douzi` eme

1 2


a b c

1 0 0 1

2 0 0 2

3 0 0 2

4 1 0 1

5 0 1 1

6 0 1 1

7 0 0 2

4 > 6 > 5 > 7 > 3 > 2 > 1




1 p { b-g :pink }


75/86

zero

1

Titre

premier
2
second
7
troisi` eme
7
fourth
5
cinqui` eme
6
sixi` eme
6
7` eme
4
huiti` eme

7

neuvi` eme
3
tenth

5

onzi` eme 1
Second titre
douzi` eme

1 2


a b c

1 0 0 1

2 0 0 2

3 0 0 2

4 1 0 1

5 0 1 1

6 0 1 1

7 0 0 2

4 > 6 > 5 > 7 > 3 > 2 > 1




1 p { b-g :pink }


76/86

zero

1

Titre

premier
2
second
7
troisi` eme
7
fourth
5
cinqui` eme
6
sixi` eme
6
7` eme
4
huiti` eme

7

neuvi` eme
3
tenth

5

onzi` eme 1
Second titre
douzi` eme

2

p { b g :pink }2 h1+p { b-g:red; }3 div>p { b-g:yellow; }4 p#special { b-g:gold; }5 p[lang=en] { b-g:green; }6 p.bleu { b-g:lightblue; }7 p+p { b-g:lightgreen; }

a b c

1 0 0 1

2 0 0 2

3 0 0 2

4 1 0 1

5 0 1 1

6 0 1 1

7 0 0 2

4 > 6 > 5 > 7 > 3 > 2 > 1

ex-selecteur.html



héritage


77/86

Héritage

lorsque pour un éĺement aucune règle ne d́enit de valeur pourune propriété, c’est la valeur de cette propriété pour son parent

qui s’applique

toutes les propríetés ne s’h́eritent pasex : margin , padding , etcla propríeté inherit permet d’agir sur l’h́eritage



78/86


au programme...


79/86

1 Cascade

2 Sélecteurs

3 Priorités

4 Pseudo-



pseudo-classes


80/86

non exhaustif

Structurelles:empty un élement E sans descendant (y compris nœud texte)

:rst-child un élément qui est premier ls d’un autre élémentex : div.exercice:first-child

:last-child éĺement dernier ls d’un autre éĺement:nth-child( an + b ) élément ( an + b )-ème ls d’un autre éĺement

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 )-ème ls en partant de la n:nth-of-type( an + b ) (an + b )nème éĺement du type śelectionńe et

qui ont le m̂eme p̀ere



pseudo-classes (suite) et pseudo-élémentsh if


81/86

non exhaustif

Dynamiques:hover est « sous » le pointeur de la souris

:visited ( uniquement) lien d́ej̀a visit́e

:link ( uniquement) lien non encore visit́e

Pseudo-éléments

::rst-line la première ligne « formatée » d’un élément::rst-letter le première lettre « formatée » d’un élément

::before insertion de contenu avant l’élément::after insertion de contenu après l’élément

Université Lille 1 Technologies du Web – CSS : les sélecteurs 27 Cascade S électeurs Priorit és Pseudo-

exemples


82/86

Cr ́ edits gures Bruno Bogaert


exemples


83/86



exemples


84/86



exemples


85/86



exemple


86/86



CSS _ Introductiondd

Documents

Transcript of CSS _ Introductiondd