Vous êtes sur la page 1sur 28

CSS Cascade Sélecteurs

Feuilles de style CSS

Technologies du Web 1

Jean-Christophe Routier
Licence 1 SESI
Université Lille 1

Université Lille 1 - Licence 1 SESI Technologies du Web 1 1


CSS Cascade Sélecteurs

Tout cela manque quand même de style


Chaque élément HTML est affiché par le navigateur avec un style par
défaut.

sansCSS.html

I les éléments <h1> apparaissent avec une police de taille 2em et « en


gras »
I les éléments <code> sont affichés avec une police à chaque fixe.
I les éléments <p> forment des blocs qui s’affichent les uns en dessous
des autres avec une marge haute et basse de 1em et leur texte est
affiché avec la police par défaut du navigateur
I les éléments <q> sont encadrés par des guillemets
I les éléments <strong> sont en gras
I etc.
Université Lille 1 - Licence 1 SESI Technologies du Web 1 2
CSS Cascade Sélecteurs

CSS

Cascading Style Sheets


Il est possible de modifier ce style grâce aux CSS

CSS = Cascading Style Sheets = Feuilles de style « en cascade »

Université Lille 1 - Licence 1 SESI Technologies du Web 1 3


CSS Cascade Sélecteurs

Un concept important

Concept
La séparation de la forme et du contenu.

I la structure d’un document (et son contenu) est décrite en HTML


I sa présentation est gérée par les CSS

1 on crée le document (contenu et structure) sans se préoccuper de sa


mise en forme
2 on conçoit la (les !) mise(s) en forme
puis éventuellement on les modifie/adapte

« CSS Zen garden »


http://www.csszengarden.com/

Université Lille 1 - Licence 1 SESI Technologies du Web 1 4


CSS Cascade Sélecteurs

Avantages

I document HTML et feuille CSS peuvent être définis dans des fichiers
séparés
I construction du document (HTML) sans se préoccuper de son rendu
visuel
I création plus efficace
I code HTML plus simple et plus lisible
I on peut changer la feuille de style sans changer le document (évolution
du « look »)
I on peut avoir plusieurs feuilles de style pour un document
I sélection selon le « media »
I accessibilité
I l’homogénéité visuelle d’un site est facilitée
I plusieurs pages peuvent partager la même feuille de style

Université Lille 1 - Licence 1 SESI Technologies du Web 1 5


CSS Cascade Sélecteurs

Principe

I le langage CSS définit un ensemble de propriétés qui ont une influence


sur l’affichage des éléments d’une page
I à chaque propriété correspond un ensemble de valeurs possibles
I il est possible de fixer ces propriétés pour chacun des éléments d’un
document HTML
I les propriétés définissent l’apparence de la boı̂te d’un élément
I les propriétés concernent
I l’apparence du contenu (fonte, style, couleur, ...)
I la taille de la boı̂te (largeur, marges, ...)
I le positionnement de la boı̂te (absolu ou relatif, visibilité)
I ...

Université Lille 1 - Licence 1 SESI Technologies du Web 1 6


CSS Cascade Sélecteurs

Règle CSS

Règle CSS
Une règle CSS définit pour un sélecteur une propriété CSS et sa valeur.

selecteur : { propriete : valeur }

Le sélecteur détermine les éléments sur lesquels s’applique la règle.

Université Lille 1 - Licence 1 SESI Technologies du Web 1 7


CSS Cascade Sélecteurs

I une feuille de style CSS contient un ensemble de règles CSS

I il est possible de regrouper plusieurs règles d’un même sélecteur


les définitions sont alors séparées par des points-virgules
h1 { « tous les éléments <h1> auront
color : blue ;
font - size : 12 px ;
leur texte en bleu et une taille
} de police de 12px »

I on peut factoriser les règles partagées par des sélecteurs


les sélecteurs sont alors séparés par des virgules
h1 , h2 { « les éléments <h1> et les
color : blue ; éléments <h2> auront leur texte
font - size : 12 px ; en bleu et une taille de police de
}
12px »

Université Lille 1 - Licence 1 SESI Technologies du Web 1 8


CSS Cascade Sélecteurs

Intégration des règles CSS à l’HTML

Différentes possibilités :
I sans CSS
I CSS dans le code HTML (beurk) : à proscrire !
I règles CSS “en dur” : bof, limitant
I feuille de style externe : la solution à adopter
I style 1 – la feuille css
I style 2 – la feuille css

Dans l’entête (<head>) du document HTML :

<link type="text/css" rel="stylesheet" href="fichier.css" />

ou aussi :
<link type="text/css" rel="stylesheet" href="fichier.css" media="screen"/>

Université Lille 1 - Licence 1 SESI Technologies du Web 1 9


CSS Cascade Sélecteurs

Exemples de propriétés

I font-family : le type de police utilisée pour le contenu,


I font-size : la taille des caractères (en px, em, %, etc.)
I font-style : normal, italic, oblique
I font-weight : normal, bold, lighter, etc.
I border : la bordure autour du contenu de l’élément (couleur, style, ...)
I width : largeur du contenu (%, px, em, cm)
I color et background-color : couleurs du texte et de l’arrière-plan
(rgb(0,128,255), hexa #AAAAAA, symboles prédéfinis (navy, white,
...), hsl,)
I etc. liste exemple

validation css : http://jigsaw.w3.org/css-validator/

Université Lille 1 - Licence 1 SESI Technologies du Web 1 10


CSS Cascade Sélecteurs

Cascade

I plusieurs feuilles de style sont possibles pour un même document


I certaines règles s’appliquent selon les médias
I il peut y avoir des règles en conflit (portant sur les mêmes éléments)

Cascade
Le mécanisme de cascade détermine les règles appliquées.

3 étapes de filtre :
1 par média
2 par origine
3 par spécificité des sélecteurs

Université Lille 1 - Licence 1 SESI Technologies du Web 1 11


CSS Cascade Sélecteurs

Médias

I possibilité de préciser le media dans auquel s’applique les règles


définies dans la feuille style
I attribut media de la balise <link>

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

Université Lille 1 - Licence 1 SESI Technologies du Web 1 12


CSS Cascade Sélecteurs

Origine des styles

I 3 origines possibles pour les feuilles de style


auteur définies l’auteur de la page
utilisateur définies par celui qui consulte la page
navigateur définies par le navigateur (agent utilisateur)
En général : auteur > utilisateur > navigateur
nuancé par usage du mot-clé !important

plus de détails : http: // openweb. eu. org/ articles/ cascade_ css

Université Lille 1 - Licence 1 SESI Technologies du Web 1 13


CSS Cascade Sélecteurs

Sélecteurs

Sélecteur
Le sélecteur détermine les éléments sur lesquels s’applique la règle.

nécessité de savoir comment


I définir les sélecteurs appropriés
I sont gérées les priorités entre règles en conflit

Sélecteurs simples :
E tout élément dont la balise est <E>
* tout élément

Université Lille 1 - Licence 1 SESI Technologies du Web 1 14


CSS Cascade Sélecteurs

Sélecteurs et attributs
E[att] tout élément E dont l’attribut att est défini
ex : p[lang], img[alt], *[title]
E[att=val] tout élément E dont l’attribut att vaut val
ex : p[lang=fr]
E[att∼=val] tout élément E dont l’attribut att est une liste de mots
séparés par des espaces, l’un de ces mots vaut exactement val
E[attˆ=”prefixe”] tout élément E dont la valeur de l’attribut att se
termine exactement par prefixe
ex : a[hrefˆ="http://fil.univ-lille1.fr"]
E[att$=”suffixe”] tout élément E dont la valeur de l’attribut att
commence exactement par suffixe
ex : img[src$=".png"], a[href$=".pdf"]
E[att*=”val”] tout élément E dont la valeur de l’attribut att contient la
sous-chaı̂ne val
ex : figure[alt*="diagramme"], *[title*="timoleon"]
Université Lille 1 - Licence 1 SESI Technologies du Web 1 15
CSS Cascade Sélecteurs

Sélecteur de classe et d’id

Cas particuliers des attributs class et id :


E.c tout élément E appartenant à la classe c
équivalent à E[class∼=c]

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

E#ident tout élément E dont l’id vaut ident


équivalent à E[id=ident]

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

Université Lille 1 - Licence 1 SESI Technologies du Web 1 16


CSS Cascade Sélecteurs

Sélecteurs de pseudo-classes et pseudo-éléments

E:pseudoC tout élément E appartenant à la pseudo-classe pseudoC

ex : a:visited, a.fichier:hover
E::pseudoE tout pseudo-élément pseudoE de l’élément E

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

pseudo-classes et pseudo-éléments présentés plus loin

Université Lille 1 - Licence 1 SESI Technologies du Web 1 17


CSS Cascade Sélecteurs

Combinaison de sélecteurs

I s’appuie sur la structure arborsecente du document


si Sel1 et Sel2 sont des sélecteurs :
Sel1 Sel2 tout élément sélectionné par Sel2 emboité dans un élément
sélectionné par Sel1
Sel1 > Sel2 tout élément sélectionné par Sel2 qui est fils d’un élément
sélectionné par Sel1
Sel1 + Sel2 tout élément sélectionné par Sel2 qui suit immédiatement
un élément sélectionné par Sel1
Sel1 ∼ Sel2 tout élément sélectionné par Sel2 qui suit un élément
sélectionné par Sel1

Université Lille 1 - Licence 1 SESI Technologies du Web 1 18


CSS Cascade Sélecteurs

Exemples
body body

h1 p div h1 h1 p div h1

em h1 div p em h1 div p

em em em em

h1 ou body h1 div h1
body body

h1 p div h1 h1 p div h1

em h1 div p em h1 div p

em em em em

body>h1 div+h1
Crédits figures Bruno Bogaert
Université Lille 1 - Licence 1 SESI Technologies du Web 1 19
CSS Cascade Sélecteurs

Exemples
body body

h1 p div h1 h1 p div h1

em h1 div p em h1 div p

em em em em

div em div>em
body body

h1 p div h1 h1 p div h1

em h1 div p em h1 div p

em em em em

div p em body>p em
Crédits figures Bruno Bogaert
Université Lille 1 - Licence 1 SESI Technologies du Web 1 20
CSS Cascade Sélecteurs

Conflit entre règles

Calcul de priorité
On compte pour chaque sélecteur :
a nombre de sélecteurs d’id (= nombre de #)
b nombre de classes, pseudo-classes ou d’attributs
c nombre d’éléments ou de pseudo-éléments
Le sélecteur reçoit la priorité a b c.
Le sélecteur avec la plus grande priorité l’emporte.

En cas d’égalité, la dernière déclaration l’emporte.

Université Lille 1 - Licence 1 SESI Technologies du Web 1 21


CSS Cascade Sélecteurs

Exemples

sélecteur a b c
* {...} 0 0 0
h1 {...} 0 0 1
div.reponse {...} 0 1 1
#joconde {...} 1 0 0
div a {...} 0 0 2
div a:visited {...} 0 1 2
p span.fichier {...} 0 1 2
p a[href$=”.pdf”] {...} 0 1 2
p.enonce a[href$=”.pdf”] {...} 0 2 2
ol.exercice li.question {...} 0 2 2
div#diaporama img.gauche {...} 1 1 2
article p::first-letter {...} 0 0 3
article#special p::first-letter {...} 1 0 3

Université Lille 1 - Licence 1 SESI Technologies du Web 1 22


CSS Cascade Sélecteurs

<p > zero </ p >


< h1 > Titre </ h1 >
<p > premier </ p >
<p > second </ p > b-g = background-color
<p > troisième </ p > p { b - g : pink }
<p lang = " en " > fourth </ p > h1 + p { b - g : red ; }
<p class = " bleu " > cinquième </ p > div > p { b - g : yellow ; }
<p class = " bleu " > sixième </ p > p # special { b - g : gold ; }
<p class = " bleu " id = " special " > septième </ p > p [ lang = en ] {b - g : green ;}
<p > huitième </ p > p . bleu { b - g : lightblue ; }
< div > p + p { b - g : lightgreen ; }
<p > neuvième </ p >
<p lang = " en " > tenth </ p >
</ div >
<p > onzième </ p > ex-selecteur.html
< h1 > Second titre </ h2 >
<p > douzième </ p >

Université Lille 1 - Licence 1 SESI Technologies du Web 1 23


CSS Cascade Sélecteurs

Héritage

Héritage
I lorsque pour un élément aucune règle ne définit de valeur pour une
propriété, c’est la valeur de cette propriété pour son parent qui
s’applique

I toutes les propriétés ne s’héritent pas


ex : margin, padding, etc
I la propriété inherit permet d’agir sur l’héritage

Université Lille 1 - Licence 1 SESI Technologies du Web 1 24


CSS Cascade Sélecteurs

Pseudo-classes

non exhaustif

Structurelles
:empty un élement E sans descendant (y compris nœud texte)
:first-child un élément qui est premier fils d’un autre élément
ex : div.exercice:first-child
:last-child élément dernier fils d’un autre élément
:nth-child(an + b) élément (an + b)-ème fils d’un autre élément
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 élément du type sélectionné et qui ont
le même père

Université Lille 1 - Licence 1 SESI Technologies du Web 1 25


CSS Cascade Sélecteurs

Pseudo-classes (suite) et Pseudo-éléments

non exhaustif

Dynamiques
:hover est « sous » le pointeur de la souris
:visited (<a> uniquement) lien déjà visité
:link (<a> uniquement) lien non encore visité

Pseudo-éléments
::first-line la première ligne « formatée » d’un élément
::first-letter le première lettre « formatée » d’un élément
::before insertion de contenu avant l’élément
::after insertion de contenu après l’élément

Université Lille 1 - Licence 1 SESI Technologies du Web 1 26


CSS Cascade Sélecteurs

Exemples
body body

h1 p div h1 h1 p div h1

em h1 div p em h1 div p

em em em em

:first-child h1:first-child
body body

h1 p div h1 h1 p div h1

em h1 div p em h1 div p

em em em em

div>h1:first-child h1:first-child+*
Crédits figures Bruno Bogaert

Université Lille 1 - Licence 1 SESI Technologies du Web 1 27


CSS Cascade Sélecteurs

Exemple

Crédits figures Bruno Bogaert


Université Lille 1 - Licence 1 SESI Technologies du Web 1 28