CSS
Thierry Lecroq
e
Universit´ de Rouen
FRANCE
Thierry Lecroq (Univ. Rouen) CSS 1 / 50
Plan
1 e e e
G´n´ralit´s sur les CSS
2 e
Les s´lecteurs
3 ee
Les propri´t´s
4 le dimensionnement et le positionnement
Thierry Lecroq (Univ. Rouen) CSS 2 / 50
Cascading Style Sheet
Mise en forme
e
S´paration de la forme et du fond
e
HTML d´crit le fond
e
CSS d´crit la forme
Centralisation de l’aspect visuel
Validation automatique : http://jigsaw.w3.org/css-validator
e
On ins`re du CSS entre :
Ou on lie un fichier CSS avec :
Commentaires : entre /* et */
Thierry Lecroq (Univ. Rouen) CSS 3 / 50
Format d’une classe CSS
e e
Le CSS est form´ d’un ensemble de classes. Une classe s’´crit de cette
c
fa¸on :
selecteur {
propriete1 : valeur1 ;
propriete2 : valeur2 ;
.
.
.
}
Thierry Lecroq (Univ. Rouen) CSS 4 / 50
Format d’une classe CSS
e
selecteur peut ˆtre :
ee a
un nom de balise : les propri´t´s s’appliquent ` toutes ces balises
e e c
un nom g´n´rique (commen¸ant par un point) : les attributs
s’appliquent aux balises utilisant class="selecteur" (sans le point)
e e e
un m´lange des deux, s´par´s par des virgules : les attributs
e e
s’appliquent suivant les deux points pr´c´dents
ee e ee e
Les propri´t´s d´signent les ´l´ments modifi´s (couleur, bordure, fond,
marges...)
e e ee
Les valeurs d´signent par quelles valeurs sont remplac´es les propri´t´s
e e
d´sign´es.
Thierry Lecroq (Univ. Rouen) CSS 5 / 50
Exemple de CSS
style.css
body { font-family : Arial ; }
p { background-color : #F0C0C0 ; border : thin solid black ; }
.titre { color : yellow ; }
Thierry Lecroq (Univ. Rouen) CSS 6 / 50
Exemple de CSS
index.xhtml
Exemple CSS
Titre en jaune
Un paragraphe avec bordure et couleur de fond
Thierry Lecroq (Univ. Rouen) CSS 7 / 50
e
Les unit´s de longueur
px : pixel
em : m-length
ex : x-height
in : pouce (inch) soit 25, 4 mm
e
cm : centim`tre
e
mm : millim`tre
pt : point soit 1/72 de pouce
pc : pica soit 12 points donc 1/6 de pouce
Thierry Lecroq (Univ. Rouen) CSS 8 / 50
Les couleurs
e
mot-cl´ : black, blue, brown, cyan, gray, green, pink, purple,
red, ...
e
code hexad´cimal : #999999, composantes RGB
fonction rgb() : rgb(r,v,b) avec 0 ≤ r, v, b ≤ 255
Thierry Lecroq (Univ. Rouen) CSS 9 / 50
Plan
1 e e e
G´n´ralit´s sur les CSS
2 e
Les s´lecteurs
3 ee
Les propri´t´s
4 le dimensionnement et le positionnement
Thierry Lecroq (Univ. Rouen) CSS 10 / 50
e
Les s´lecteurs
ee
Un seul ´l´ment
p { color : yellow ; background-color : blue ; }
ee
Plusieurs ´l´ments
h1, div, p { color : yellow ; background-color : blue ; }
div { margin : 20px ; }
e
Le s´lecteur universel
* { background-color : blue ; }
p { background-color : gray ; }
Thierry Lecroq (Univ. Rouen) CSS 11 / 50
Les classes
.rouge { color : red ; }
.rouge { color : red ; }
div.rouge { color : yellow ; }
.rouge { color : red ; }
div.rouge { background-color : blue ; }
Thierry Lecroq (Univ. Rouen) CSS 12 / 50
e ee
Plusieurs classes au mˆme ´l´ment
*.jaune { color : yellow ; }
div.jaune { color : green ; }
.classe1 { color : red ; }
.classe2 { font-style : italic ; }
.classe3 { background-color : blue ; }
Thierry Lecroq (Univ. Rouen) CSS 13 / 50
e ee
Plusieurs classes au mˆme ´l´ment
Exemple
Titre en jaune
Texte en rouge
Texte en rouge et en italique
Texte en rouge sur fond bleu
Texte en vert et en italique sur fond bleu
Thierry Lecroq (Univ. Rouen) CSS 14 / 50
e
S´lecteur d’identifiant id
div { color : black ; }
#bleu { color : white ; background-color : blue ; }
Texte en noir
Texte en blanc sur fond bleu
a
Attention ` la casse ! !
Thierry Lecroq (Univ. Rouen) CSS 15 / 50
e
Les s´lecteurs d’attributs
acronym [title] { color : red ; background-color : gray ; }
* [title] { background-color : yellow ; }
h2 [title] [id] { background-color : yellow ; }
Thierry Lecroq (Univ. Rouen) CSS 16 / 50
e
Les s´lecteurs de valeur d’attribut
element [attribut1 = "valeur1"] [attribut2 = "valeur2"] ... {
element [attribut ~= "valeur"] { definition du style ; }
Thierry Lecroq (Univ. Rouen) CSS 17 / 50
e
Les s´lecteurs contextuels parent-descendant
element-parent element-descendant { definition du style ; }
ul li ol li { background-color : red ; color : blue ; }
element-parent > element-enfant { definition du style ; }
On peut combiner
Thierry Lecroq (Univ. Rouen) CSS 18 / 50
e ee
Les s´lecteurs d’´l´ments adjacents
element1 + element2 { definition du style ; }
Thierry Lecroq (Univ. Rouen) CSS 19 / 50
Les pseudo-classes applicables aux liens
a:link
a:visited
Thierry Lecroq (Univ. Rouen) CSS 20 / 50
Les pseudo-classes dynamiques
:focus
:hover
:active
Thierry Lecroq (Univ. Rouen) CSS 21 / 50
Pseudo-classes diverses
:first-child
:lang (code) (ex : xml:lang = "code")
Thierry Lecroq (Univ. Rouen) CSS 22 / 50
ee
Les pseudo-´l´ments
:first-letter
:first-line
:before { content : "avant" ; definition du style ; }
:after { content : "apres" ; definition du style ; }
Thierry Lecroq (Univ. Rouen) CSS 23 / 50
e
La d´calaration !important
Gestion des conflits
* {color : black !important ; background-color : yellow ; }
div {color : blue ; background-color : white ; }
Thierry Lecroq (Univ. Rouen) CSS 24 / 50
Plan
1 e e e
G´n´ralit´s sur les CSS
2 e
Les s´lecteurs
3 ee
Les propri´t´s
4 le dimensionnement et le positionnement
Thierry Lecroq (Univ. Rouen) CSS 25 / 50
ee
Les propri´t´s (1)
color : valeur ; : couleur d’avant-plan
background-color : valeur ; : couleur de fond
background-image : url(URL) ; : image de fond
Thierry Lecroq (Univ. Rouen) CSS 26 / 50
ee
Les propri´t´s (2)
border-style : style{1,4} ; :
style peut prendre les valeurs suivantes :
none : pas de bordure
hidden : idem sauf cellule de tableau
e
dotted : pointill´s courts
dashed : tirets longs
solid : pleine continue
e
double : 2 tarits parall`les continus
groove : bordure en creux
ridge : bordure en relief
oe
inset : bordure en creux dont chaque cˆt´ n’a qu’une seule couleur
oe
outset : bordure en relief dont chaque cˆt´ n’a qu’une seule couleur
Thierry Lecroq (Univ. Rouen) CSS 27 / 50
ee
Les propri´t´s (3)
e
On peut sp´cifier 1, 2 ou 4 valeurs
oe
1 : 4 cˆt´s
e oe e
2 : la premi`re s’applique aux cˆt´s haut et bas, la deuxi`me
oe
s’applique aux cˆt´s droit et gauche
e oe e
3 : la premi`re s’applique aux cˆt´s haut, la deuxi`me s’applique aux
oe e oe
cˆt´s droit et gauche, la troisi`me s’applique aux cˆt´s bas
4 : haut, droit, bas, gauche
Thierry Lecroq (Univ. Rouen) CSS 28 / 50
ee
Les propri´t´s (4)
border-width : width{1,4} ; :
width peut prendre les valeurs suivantes :
thin : fin
medium : moyen
e
thick : ´pais
e
valeur num´rique
e
On peut sp´cifier 1, 2 ou 4 valeurs
oe
1 : 4 cˆt´s
e oe e
2 : la premi`re s’applique aux cˆt´s haut et bas, la deuxi`me s’applique
oe
aux cˆt´s droit et gauche
e oe e
3 : la premi`re s’applique aux cˆt´s haut, la deuxi`me s’applique aux
oe e oe
cˆt´s droit et gauche, la troisi`me s’applique aux cˆt´s bas
4 : haut, droit, bas, gauche
border-color : couleur{1,4} ; :
Thierry Lecroq (Univ. Rouen) CSS 29 / 50
ee
Les propri´t´s (5)
border : width style couleur ; :
h1 { border : 5px double blue ; }
e a
est ´quivalent `
h1 { border-width : 5px ; border-style : double ; border-c
Thierry Lecroq (Univ. Rouen) CSS 30 / 50
ee
Les propri´t´s (6)
margin : valeur {1,4} ; : marge (top, right, bottom, left)
padding : valeur {1,4} ; : marge
Thierry Lecroq (Univ. Rouen) CSS 31 / 50
ee
Les propri´t´s (7)
outline-style : valeur {1,4} ; : style de contour
outline-width : valeur {1,4} ; : largeur de contour
outline-color : valeur {1,4} ; : couleur de contour
outline : width color style ; : contour
Thierry Lecroq (Univ. Rouen) CSS 32 / 50
ee
Les propri´t´s (8)
font-family : "valeur" ; : police
font-size : taille-absolue | taille-relative | taille | pourcent
taille
taille-absolue : xx-small, x-small, small, medium, large, x-large,
xx-large
taille-relative : smaller, larger
font-weight : normal | bold | bolder | lighter | x00 ; :
graisse
avec x entier tel que 1 ≤ x ≤ 9
font-style : normal | italic | oblique ; : style
font-variant : normal | small-caps ; : petites capitales
Thierry Lecroq (Univ. Rouen) CSS 33 / 50
ee
Les propri´t´s (9)
text-transform : none | uppercase | lowercase | capitalize
casse
text-decoration : none | underline | overline | line-throu
e
mise en ´vidence
line-height : normal | valeur | pourcent ; : interligne
font : style variant weight [size/line-height family] ;
Thierry Lecroq (Univ. Rouen) CSS 34 / 50
ee
Les propri´t´s (10)
text-align : left | center | right | justify ; :
alignement horizontal
letter-spacing : normal | valeur ; : espacement entre les
e
caract`res
word-spacing : normal | valeur ; : espacement entre les mots
Thierry Lecroq (Univ. Rouen) CSS 35 / 50
Plan
1 e e e
G´n´ralit´s sur les CSS
2 e
Les s´lecteurs
3 ee
Les propri´t´s
4 le dimensionnement et le positionnement
Thierry Lecroq (Univ. Rouen) CSS 36 / 50
e
Cr´er des cadres
permet la division de la page en diff´rents cadres
e
dont les dimensions sont d´finies par les attributs rows et cols :
rows : permet de diviser la page en cadres horizontaux et contient
e e
une suite de dimensions s´par´es par des virgules (pixels,
pourcentages ou proportions)
e
cols : idem pour un d´coupage vertical
ee ee
L’´l´ment contient les ´l´ments et
Thierry Lecroq (Univ. Rouen) CSS 38 / 50
ee
Les ´l´ments frame et noframe
ee
L’´l´ment frame
e e e
poss`de l’attribut src pour sp´cifier l’URL d´crivant le contenu du cadre
ee
L’´l´ment noframes
e u e
d´crit un contenu alternatif au cas o` le navigateur client ne g`re pas les
cadres
Thierry Lecroq (Univ. Rouen) CSS 39 / 50
Exemple
Votre navigateur ne supporte pas les cadres.
rows="100,400,200"
rows="100,*,200"
rows="15%,75%,10%"
rows="2,5,1"
Thierry Lecroq (Univ. Rouen) CSS 40 / 50
Communication entre cadres
Exemple
Thierry Lecroq (Univ. Rouen) CSS 41 / 50
Communication entre cadres
Exemple
cadre4.xhtml
Thierry Lecroq (Univ. Rouen) CSS 42 / 50
e
Cr´er une mise en page : le dimensionnement et le
positionnement
ee
Le dimensionenement des ´l´ments
width : | pourcent | auto | inherit ;
height : | pourcent | auto | inherit ;
overflow : visible | hidden | scroll | auto | inherit ;
e
visible : le contenu d´bordant est affich´ e
e e
hidden : le contenu d´bordant est cach´ donc invisible
e e
scroll : ascenseurs droit et bas syst´matiques mˆme sans
e
d´bordement
e
auto : ascenseurs en cas de d´bordement
min-heigth : | | inherit ;
max-heigth : | | none | inherit ;
min-width : | | inherit ;
max-width : | | none | inherit ;
Thierry Lecroq (Univ. Rouen) CSS 43 / 50
ee
Le rendu des ´l´ments
display : none | inline | block | list-item | table | inli
none : pas d’affichage
inline : sur une ligne
block : bloc (comme , , , ...)
list-item : liste (comme )
Exemple
li { display : inline ; border : solid 1px black ; }
Point 1
Point 2
Point 3
Thierry Lecroq (Univ. Rouen) CSS 44 / 50
ee
Le positionnement des ´l´ments
Le flottement
float : left | right | none | inherit
e
Empˆcher le flottement
ee
pour les ´l´ments de bloc
clear : none | left | right | both | inherit
e
none : flottement autoris´
left : flottement gauche interdit
right : flottement droit interdit
both : flottements gauche et droit interdits
Thierry Lecroq (Univ. Rouen) CSS 45 / 50
Le positionnement relatif
position : relative
avec
left : | | auto | inherit
top : | | auto | inherit
right : | | auto | inherit
bottom : | | auto | inherit
u e
o` est positive ou n´gative
Thierry Lecroq (Univ. Rouen) CSS 46 / 50
Le positionnement absolu
position : absolu
Thierry Lecroq (Univ. Rouen) CSS 47 / 50
Exemple
div.cadre1 { position : absolute ;
border : thin solid black ;
left : 0px ;
top : 0px ;
width : 100% ;
height : 20% ; }
div.cadre2 { position : absolute ;
border : thin solid black ;
left : 0px ;
top : 20% ;
width : 20% ;
height : 100% ; }
div.cadre3 { position : absolute ;
border : thin solid black ;
left : 20% ;
top : 20% ;
width : 80% ;
height : 80% ; }
Thierry Lecroq (Univ. Rouen) CSS 48 / 50
Le positionnement fixe
position : fixed
cas particulier du positionnement absolu
ee e
le conteneur n’est pas l´l´ment parent mais la fenˆtre du navigateur
Thierry Lecroq (Univ. Rouen) CSS 49 / 50
e
Visibilit´ et ordre d’empilement
visibility : visible | hidden | collapse | inherit
collapse : idem hidden pour les cellules de tableaux
z-index : auto | | inherit
Thierry Lecroq (Univ. Rouen) CSS 50 / 50