!CSS!
Cascading!Style!Sheets!!
Philippe'Genoud,'UFR'IM2AG,'UGA'Manuel'Atencia'Arcas,'UFR'SHS,'UGA'
1'
CSS!!!
2'
Comportement!(JavaScript)!
Présenta:on!(CSS)!
Contenu!structuré!(HTML!5)!
CSS!
3'
h>p://www.csszengarden.com/''Un!même!document!HTML!des!feuilles!CSS!différentes!
Cascading'Style'Sheets'séparer!contenu!de!la!présenta:on!
CSS!E!Historique!
4'
HTML'1.0'1989'
1991' HTML'2.0'
1995'HTML'3'
HTML'3.2'
1998! HTML'4.0'CSS'HTML'4.01'1999'
CSS1!:!1ère!recommanda:on!officielle!du!W3C!
2000' XHTML'1.0'
2012' HTML'5'
1996!
CSS2!:!extension!du!concept!des!feuilles!de!style!
2002! CSS2.1!:!quelques!ajustements!
CSS3!:!anima:ons,!effets!textuels,!transforma:ons!2D/3D….!
h2 { }
CSS!• définiRon'd'un'style'
– Forme'générale'
5'
Défini:on!d'un!style!!forme!générale!
sélecteur { } déclaration déclaration... style ::=
déclaration ::= propriété : valeur
• exemple'sélecteur'idenRfie'les'éléments'de'la'page'web'à'laquelle'le'style'est'appliqué'
propriété'désigne'au'navigateur'ce'qu'il'faut'modifier'
valeur'désigne'au'navigateur'le'changement'à'effectuer'
;'
font-size color background-color
: 120%; :red; :#FFCC6;
CSS!
6'
Défini:on!d'un!style!!forme!générale!
.monStyle { font: bold 12pt Tekton; color: red; }
Possibilité'de'regrouper'plusieurs'propriétés'sous'une'seule'
#titreSpecial { color:red; background-color:yellow; text-transform:capitalize; border:double medium green; font-weight:900; padding:0.5em; }
Certaines'propriétés'ne'sont'accessibles'qu’au'travers'des'styles'CSS'
• 'autres'exemples'
.monStyle { font-size: 12pt; font-weight: bold; font-family: Tekton; color: red; }
CSS!• Plusieurs'moyens'd'associer'styles'CSS'à'un'document'HTML'
– Style'défini'directement'dans'une'balise'(style'in#line)'
7'
Associa:on!style!CSS!–!!document!HTML!
<h2 style="color:red; background:yellow; text-transform:capitalize; border:double medium green; font-weight:900; padding:0.5em"> Ceci est un titre de niveau 2. Le style défini pour ce titre ne peut s'être qu'avec les styles CSS. </h2>
<html>
<head>
<title>Les styles c'est bien!</title>
<meta charset="utf-8">
</head>
<body>
<h1>VIVENT LES STYLES CSS !!</h1>
…
– Styles'définis'dans''l’en`tête'du'document'
• applicables'dans''tout'le'document'
'
• inconvénients':''mélange'structure'et'présentaRon,'ne's'applique'qu'à'une'seule'balise'
<style type="text/css">
h1 {font: bold 18pt "Arial", "Helvetica"}
#resume {color:red; background:yellow; text-transform:capitalize;
border:double medium green; font-weight:900; padding:0.5em}
</style>
CSS!'– Styles'définis'dans'un'fichier'externe'au'document'HTML'
• Possibilité'de'partager'les'styles'entre'plusieurs'documents'
Associa:on!style!CSS!–!!document!HTML!
<html>
<head>
<title>Les styles c'est bien!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="maFeuilleStyle.css" type="text/css">
</head>
<body>
<h1>VIVE LES STYLES CSS</h1>
…
maPage.html
<html>
<head>
<title>Les styles c'est super bien!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
@import url("maFeuilleStyle.css");
</style>
</head>
<body>
<h1>J'AIME LES STYLES CSS</h1>
… 8'
/* mes styles */ h1 {font: bold 18pt "Arial"} p {font: 10pt/15pt "Verdana"} h2 {color:red; background:yellow; text-transform:capitalize; border:double medium green; font-weight:900; padding:0.5em; }
maFeuilleStyle.css
monAutrePage.html
CSS!• plusieurs'possibilités'pour'définir'un'style'
– style's'appliquant'à'tous'les'éléments'correspondant'à'une'balise'HTML'donnée''!sélecteur'de'balise'
''– style'nommé'pouvant'être'associé'à'n'importe'quel'élément'
!sélecteur'de'classe''
'– style'associé'à'un'élément'idenRfié'
!sélecteur'd'idenRficateur'
9'
Sélecteurs!de!style!
balise { } déclaration ; déclaration...
.nomDeClasse { } déclaration ; déclaration...
#identificateur { } déclaration ; déclaration...
CSS!• sélecRon'de'balise'
10'
Sélecteurs!de!styles!balise!
balise { } déclaration ; déclaration...
styleBase.css
CSS!• associer'un'nom'à'un'comportement'
11'
Sélecteurs!de!style!classe!
.nomDeClasse { } déclaration ; déclaration...
styleArticle.css
CSS!
• associaRon'mulRple'– possibilité'd'appliquer'plusieurs'classes'de'
style'à'un'même'élément'
12'
Sélecteurs!de!style!classe!
• a>ribut'class'peut'être'porté'par'toute'balise'– possibilité'd'appliquer'une'même'classe'de'style'à'des'éléments'de'balises'différentes'
styleArticleBis.css
Le'nom'de'la'classe'doit'refléter'la'sémanRque'et'non'pas'la'présentaRon'choisie.'
.rouge
CSS!• possibilité'de'restreindre'une'classe'à'un'type'd'élément'
– le'nom'de'la'classe'est'préfixé'par'le'nom'de'la'balise'
13'
Sélecteurs!de!style!classe!
CSS!• comportement'desRné'à'un'seul'élément'
14'
Sélecteurs!de!style!iden:ficateur!
#identificateur { } déclaration ; déclaration...
` 'a>ribut'id'désignant'l'élément'et'défini'dans'sa'balise'ouvrante'` 'doit'être'unique'dans'le'document'HTML''
` 'renforcement':'uRlisable'par'plusieurs'éléments'!'classe'` 'résumé':'un'seul'résumé'par'arRcle'!'idenRficateur'
CSS!• perme>ent'de'styler'un'élément'en'foncRon'd’un'a>ribut'de'la'balise'et/ou'de'sa'valeur'
15'
Sélecteurs!de!style!sélecteurs!d'a^ributs!
http://www.petit-kiwi.com/css3-selecteurs-pseudo-classes-pseudo-elements
CSS!• l'imbricaRon'des'éléments'forme'une'hiérarchie'(arbre)'
16'
Sélecteurs!de!style!sélecteurs!et!arborescence!
<div> <h1>titre</h1> <h2>un sous titre</h2> <p>un paragraphe avec <em>des mots importants</em> pour terminer avec une image <img src="logo.gif" alt="un logo"/>. </div>
div(
h1( h2( p(
em(
div(h1(h2(p(em(
img( img(
racine!
feuille!
noeud!
p''est'père'de'em'et'de'img p'est'parent'de'em'et'img'em'et'img sont'les'enfants'de'p''em'est'un'fils'de'p''img est'frère'de'em''div'est'un'ancêtre'de'em''em'est'un'descendant'de'div
CSS!• propagaRon'des'propriétés'd'un'élément'aux'éléments'descendants'(héritage)'
17'
Sélecteurs!de!style!sélecteurs!et!arborescence!
body(
div( div(
racine!
p(div(
classe!=!"azure"!
pas'toutes'les'propriétés'sont'héritées'(par'ex.'margin)'h>ps://www.w3.org/TR/CSS21/propidx.html'
le'héritage'peut'être'forcé'en'uRlisant'inherit'(par'ex.'#monId{margin:inherit;})''
CSS!• problème':'comment'donner'une'présentaRon'spécifique'à'des'éléments'en'
foncRon'de'leur'situaRon'dans'l'arborescence'?'
18'
Sélecteurs!de!style!sélecteurs!et!arborescence!
ex':'parRculariser'les'éléments'<a> situés'dans'une'liste'(balise'<ul>)'en'leur''associant'un'fond'cyan'
CSS!
• 1ère'soluRon'créer'une'classe'de'style'correspondante'
19'
Sélecteurs!de!style!sélecteurs!et!arborescence!
ex':'parRculariser'les'éléments'<a> situés'dans'une'liste'(balise'<ul>)'en'leur''associant'un'fond'cyan'
CSS!
• 2ème''soluRon'uRliser'la'structure'arborescente'
20'
Sélecteurs!de!style!sélecteurs!et!arborescence!
ex':'parRculariser'les'éléments'<a> situés'dans'une'liste'(balise'<ul>)'en'leur''associant'un'fond'cyan'
tous'les'éléments'<a>'descendants'd'un'élément'<ul>'
SélecRon'en'foncRon'd'une'relaRon'parent'descendant.''
CSS!
21'
Sélecteurs!de!style!sélecteurs!et!arborescence!
Sélecteur!de!nœuds!descendants!'
s'applique'à'tout'élément'désigné'par'sélecteurn'qui'descend'(directement'ou'indirectement)'d'un'élément'désigné'par'sélecteurn#1'…'qui'descend'd'un'élément'désigné''sélecteur2'qui'descend'd'un'élément'désigné'par'sélecteur1''''
sélecteur1 sélecteur2 … sélecteurn { déclaration ; déclaration }
CSS!
22'
Sélecteurs!de!style!sélecteurs!et!arborescence!
Sélecteur!de!nœuds!enfants!' sélecteur1 > sélecteur2 { déclaration ; déclaration }
s'applique'à'tout'élément'désigné'par'sélecteur2'dont'le'parent'direct'est'un'élément'désigné'par'sélecteur1'
CSS!
23'
Sélecteurs!de!style!sélecteurs!et!arborescence!
Sélecteur!de!nœuds!enfants!' sélecteur1 > sélecteur2 { déclaration ; déclaration }
s'applique'à'tout'élément'désigné'par'sélecteur2'dont'le'parent'direct'est'un'élément'désigné'par'sélecteur1'
CSS!
24'
Sélecteurs!de!style!sélecteurs!et!arborescence!
Combinaisons!de!sélecteurs!' idenRficateur' descendant' enfant'
CSS!
25'
Sélecteurs!de!style!sélecteurs!et!arborescence!
Combinaisons!de!sélecteurs!' idenRficateur' descendant' enfant'
CSS!
26'
Sélecteurs!de!style!sélecteurs!et!arborescence!
Combinaisons!de!sélecteurs!' idenRficateur'
descendant'
enfant'descendant'enfant'
CSS!
27'
Sélecteurs!de!style!sélecteurs!et!arborescence!
Sélecteur!de!nœuds!adjacents!' sélecteur1 + sélecteur2 { déclaration ; déclaration }
s'applique'à'tout'élément'désigné'par'sélecteur2'dont'le!frère!directement!précédent'dans'le'flux'du'balisage'de'la'page'HTML'est'un'élément'désigné'par'sélecteur1(
CSS!
28'
Sélecteurs!de!style!sélecteurs!et!arborescence!
Sélecteur!de!nœuds!frères!' sélecteur1 ~ sélecteur2 { déclaration ; déclaration }
s'applique'à'tout'élément'désigné'par'sélecteur2'dont'un!frère!précédent!dans'le'flux'du'balisage'de'la'page'HTML'est'un'élément'désigné'par'sélecteur1(
CSS!• pseudo`classes'
– portent'sur'des'éléments'existants'dans'le'code'source'du'document'et'auxquels'on'peut'accéder'par'des'caractérisRques'autres'que'leur'nom,'a>ribut'ou'contenu.''
29'
Sélecteurs!de!style!pseudo!classes!
sélecteur:pseudoClasse { } déclaration ; déclaration...
– d’ancres':link!et':visited!– dynamiques':hover,':ac:ve!et':focus!– structurelles':':firstEchild,':lastEchild,'':nthEchild(n)!
CSS!• pseudo`éléments'
– perme>ent'de'donner'un'style'à'un'contenu'n’apparaissant'pas'dans'le'code'source'du'document'comme'étant'un'élément.'
Sélecteurs!de!style!pseudo!classes!–!pseudo!éléments!
sélecteur::pseudoEltOuClasse { } déclaration ; déclaration...
– !::firstEline!– !::firstEle^er!– !::before!et!::ader!– !::selec:on!!
CSS!• notées'par'abréviaRon'(2'le>res)'• pas'd'espace'entre'valeur'et'unité'• certaines'propriétés'acceptent'valeurs'négaRves'
31'
Unités!de!mesures!
Unité! Descrip:on! Valeur! Exemple!
px' pixel' enRer' 450px'
cm' cenRmètre' enRer' 7cm'
mm' millimètre' enRer' 43mm'
in' pouce'(2,54cm)' réel' 0.15in'
pt' point'(1/72'pouce)' enRer' 48pt'
pc' pica'(12'points)' réel' 4.2pc'
%' pourcentage' enRer' 14%'
em' relaRve'à'la'taille'de'la'police'de'l'élément' réel' 1.5em'
rem' relaRve'à'la'taille'de'la'police'de'l'élément'racine'(root'em)'
réel' 0.5rem'
CSS!
32'
Nota:on!des!couleurs!
green'#00FF00'#0F0'
rgb(0,255,0)''rgb(0,100%,0%)'
blue'#0000FF'#00F'
rgb(0,0,255)''rgb(0%,0%,100%)'
white'#FFFFFF'
yellow'#FFFF00'
magenta'#FF00FF'
cyan'#00FFFF'
• CSS2'– mots'réservés'– notaRon'hexadécimale'– notaRon'décimale'
• CSS3'– canal'alpha'(opacité)'
• rgba(r,g,b,a)'
– hsl'• hsl(hue,saturaRon,ligthness)'• hsla(h,s,l,a)'
http://www.w3schools.com/cssref/css_colornames.asp
http://www.w3schools.com/tags/ref_colorpicker.asp
http://hslpicker.com
http://www.workwithcolor.com/hsl-color-picker-01.htm
red'#FF0000'#F00'
rgb(255,0,0)''rgb(100%,0%,0%)'
myStyles.css'
CSS!Conflits!
!
h2 { color: green; font-size: 1.2em; padding: 10px; }
h2#main { color: red; }
h2.navigation { color: blue; }
il'y'a'un'conflit'entre''ces'styles'CSS'!'
Avec'quelle'couleur'"Navigate:'"'va't'il'être'affiché'?'
myPage.html'
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" type="text/css" href="myStyles.css" /> ... </head> <body> ... <h2 id="main" class="navigation">Navigate :</h2> ... </html>
CSS!Conflits!
!
h2 { color: green; font-size: 1.2em; padding: 10px; }
myStyles.css'
h2#main { color: red; }
h2.navigation { color: blue; }
myPage.html'
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" type="text/css" href="myStyles.css" /> ... </head> <body> ... <h2 id="main" class="navigation">Navigate :</h2> ... </html>
Navigate :
le'sélecteur'h2#main'est'plus''"spécifique"'que'les'autres'!'il'gagne'
CSS!Conflits!
!
h2 { color: green; font-size: 1.2em; padding: 10px; }
<!DOCTYPE html> <html> ... <h2 id="main" class="navigation" style="color: yellow">Navigate :</h2> ... </html>
myPage.html'
myStyles.css'
h2#main { color: red; }
h2.navigation { color: blue; }
Avec'quelle'couleur'"Navigate:'"'va't'il'être'affiché'?'
CSS!Conflits!
!
h2 { color: green; font-size: 1.2em; padding: 10px; }
<!DOCTYPE html> <html> ... <h2 id="main" class="navigation" style="color: yellow">Navigate :</h2> ... </html>
myPage.html'
myStyles.css'
h2#main { color: red; }
h2.navigation { color: blue; }
Navigate :
Les'conflits'sont'résolus'grâce'au'mécanisme'de'cascade(
Rappelez`vous'!'CSS'='Cascading'Style'Sheets'
une'déclaraRon'CSS'dans'un'a>ribut'style'est'toujours'plus'"spécifique"'que'les'autres'!'elle'gagne'
CSS!Cascade!
!• Cascade'est'le'mécanisme'qui'contrôle'le'résultat'final'lorsque'
plusieurs'déclaraRons'CSS'en'conflit's'appliquent'au'même'élément'
• Trois'concepts'principaux':'– Importance'– ParRcularité'(specificity)''– ordre'dans'la'source'
• Si'deux'déclaraRons'ont'la'même'importance,'alors'la'parRcularité'des'règles'decidera'laquelle's'appliquera.'Si'les'règles'ont'la'même'parRcularité,'l'ordre'dans'la'source'contrôlera'le'résultat'final.'
CSS!Cascade!
Importance!• L'importance'd'une'déclaraRon'CSS'dépend'de'l'endroit'où'elle'est'
spécifiée.'• Les'déclaraRons'en'conflit'seront'appliquées'dans'l'ordre'suivant'(les'
dernières'remplaceront'les'précédentes)':'1. DéclaraRons'dans'les'feuilles'de'style'de'l'agent'uRlisateur'(par'ex.'les'
styles'par'défaut'du'navigateur'si'aucun'autre'style'n'est'defini).'2. DéclaraRons'normales'des'feuilles'de'style'uRlisateur'(styles'personnalisés'
définis'par'un'uRlisateur).'3. DéclaraRons'normales'dans'les'feuilles'des'style'de'l'auteur'(styles'définis'
par'le'développeur'web).'4. DéclaraRons'"importantes"'dans'les'feuilles'de'style'de'l'auteur.'5. DéclaraRons'"importantes"'dans'les'feuilles'de'style'de'l'uRlisateur.'
• DéclaraRons'"importantes"':'déclaraRons'suivies'de'!important * { font-family: "Comic Sans MS" !important; }
CSS!Cascade!Specificity!
• Specificity:'a'measure'of'how'specific'a'rule's'selector'is.'• If'two'or'more'declaraRons'conflict'for'a'given'element,'and'all'
the'declaraRons'have'the'same'importance,'then'the'one'in'the'rule'with'the'most'specific'selector'will'"win".'
• The'specificity'is'a'number'of'4'digits'"abcd"'computed'this'way:'– "a"'is'1'for'a'declaraRon'in'a'style'a>ribute,'otherwise'0.'– "b"'is'the'number'of'id's'in'the'selector'(e.g.'#monId).'– "c"'is'the'number'of'classes'(e.g.'.maClasse)'and'pseudo`classes'
(e.g.':hover).'– "d"'is'the'number'of'tags'in'your'selector'(e.g.'div)'
• CSS'declaraRons'in'a'style'a>ribute'don’t'have'any'selector,'so'their'specificity'is'always'1000.'
• Example:'the'specificity'of'#parentid p'is'0101'and'the'specificity'of'.class p'is'0011'!'#parentid p'wins'(0101>0011)'
CSS!Cascade!Specificity!
• D'autres'exemples':'
Selector! a b c! d Specificity!h2
h2.navigation
h2#main
*
blockquote p.class
blockquote p#id
blockquote.class p#id
html>head+body ul#nav .home a:link
styles2.css'
styles1.css'
myPage.html'
@import url("styles2.css) h2 { color: red; }
CSS!Cascade!
Source!order!• if'two'declaraRons'affect'the'same'element,'have'the'same'importance'
and'the'same'specificity,'the'final'disRnguising'mark'is'the'source'order:'the'declaraRon'that'appears'later'in'the'style'sheets'will'"win"'over'those'that'come'before'it.'
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" type="text/css" href="styles1.css" /> <style> h2 { color: green; } </style> ... </head> <body> ... <h2>Navigate :</h2> ... </body> </html>
h2 { color: blue; }
3!
1!
2!
@import url("styles2.css) h2 { color: red; }
CSS!Cascade!
Source!order!• if'two'declaraRons'affect'the'same'element,'have'the'same'importance'
and'the'same'specificity,'the'final'disRnguising'mark'is'the'source'order:'the'declaraRon'that'appears'later'in'the'style'sheets'will'"win"'over'those'that'come'before'it.'
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" type="text/css" href="styles1.css" /> <style> h2 { color: green; } </style> ... </head> <body> ... <h2>Navigate :</h2> ... </body> </html>
h2 { color: blue; }
myPage.html'
styles1.css'
styles2.css'ce>e'déclaraRon'apparaît'après'les'autres'!'elle'gagne'
CSS!• chaque'élément'HTML'considéré'comme'une'boîte!rectangulaire.'• flux!du!document!:'ordre'dans'lequel'le'navigateur'affiche'ces'
boîtes.'– flux!normal!(par'défaut)'
• un'élément'père'est'un'conteneur'• un'élément'fils's'affiche'dans'son'conteneur'• élément'bloc'
– s'affiche'en'dessous'de'son'frère'précédent.''– occupe'toute'la'largeur'disponible'dans'son'conteneur.'
• élément'en'ligne'– s'affiche'à'côté'de'son'frère'précédent.'– retour'à'la'ligne'quand'il'n'y'a'plus'de'place'dans'le'conteneur.'
– flux'personnalisé'• certaines'propriétés'CSS'perme>ent'de'sor<r'des'éléments'du'flux'normal'
44'
Affichage!des!éléments!HTML!flux!du!document!
CSS!• exemple'de'flux'normal'
45'
Affichage!des!éléments!HTML!flux!du!document!
CSS!• <div>'et'<span>!éléments'génériques'sans'informaRon'
structurante'prédéfinie'– uRlisés'en'associaRon'avec'des'feuilles'de'style'CSS'ou'du'Javascript'via'les'a>ributs'id,'class'
ou'style!
46'
Affichage!des!éléments!HTML!flux!du!document!
div!:!balise'de'type'bloc''" zone'rectangulaire'qui'ne'peut'être'réparRe'sur'plusieurs'lignes'" 'peut'contenir'tous'les'autres'éléments'de'type'bloc'ou'en'ligne'
span!:!balise'de'type'en'ligne'(inline)'" 's'inscrit'dans'le'flux'du'contenu,'peut'être'réparRe'sur'plusieurs'lignes''" 'peut'contenir'tous'les'autres'éléments'en'ligne'
CSS!
47'
No:on!de!boîte!par:es!cons:tuantes!
marge!externe/
marge!interne/
bordure/
• boîte'rectangulaire'matérialisant'un'élément'composée'de'3'parRes':'– son'contenu'(contenu'de'l'élément':'texte,'image…'autres'éléments…)'– un'cadre'
• une'bordure'• une'marge'interne'(marge'entre'le'contenu'et'la'bordure)'
– une'marge'externe'• marge'entre'le'cadre'et'les'boîtes'matérialisant'les'éléments'adjacents'dans'le'flux'
contenu/
CSS!
48'
No:on!de!boîte!propriétés!CSS!
margin width height
background
• La'taille'du'contenu,'le'cadre'et'la'marge'externe'd'une'boîte'peuvent'être'contrôlés'par'des'propriétés'CSS.'
padding border-style border-width border-color
marge!externe/bordure/
largeur/et/hauteur/ épaisseur/ type,/épaisseur/
et/couleur/ épaisseur/
Contenu! Marge!interne! Bordure! Marge!externe!
Arrière!plan!couleur/image/
margin-right
height
background-color
marge!interne/
contenu/
padding-top
width
border-bottom-width
CSS!• dimensions'd'une'boîte'induites'par'son'contenu'+'trois'périmètres'
(margin,'border','padding).'• margin,'border,'padding'pas'obligatoires'
– valeurs'par'défaut'• 0'pour'éléments'en'ligne'et'<div> • border(=(0,(margin'et'padding(dépendent'du'navigateur'pour'les'éléments'bloc'
!'fixer'dans'les'feuilles'de'style'CSS'pour'rendu'indépendant'du'navigateur'
'
49'
No:on!de!boîte!dimensions!et!a^ributs!par!défaut!
marge!externe/bordure/
margin-right
height
background-color
marge!interne/
contenu/
padding-top
width
border-bottom-width
CSS!• Bordures'et'arrière'plan'
– Possibilité'd'entourer'les'éléments'et'de'les'doter'd'un'arrière`plan'(couleur,'image)'
– Propriétés'• border-style'style'• border-width'épaisseur'• border-color'couleur'• background-color'couleur'arrière'plan'• background-image'image'd'arrière'plan'
50'
Bordures!et!arrièreEplan!introduc:on!
!
applicable'à'tous'les'bords'ou'de'chaque'côté'
CSS!• border-style
51'
Bordures!et!arrièreEplan!style!
• border-style:<val> tous'les'côtés'• border-style:<val1> <val2>
• <val1>'côtés'horizontaux'• <val2>'côtés'verRcaux'
• border-style:<val1> <val2> <val3> • <val1>'côté'horizontal'haut'• <val2>'côtés'verRcaux'• <val3'>'côté'horizontal'bas'
• possibilité'de'spécifier'chaque'côté'• border-left-style • border-right-style • border-top-style • border-bottom-style
valeurs'possibles'
CSS!• border-width
– valeur'numérique'ex:'border-width:5px (5'pixels)'– mots'clés'
• border-color – valeur'numérique''
• hexadécimale':'#00ffff ou'#0ff!• rgb':'rgb(0,255,255)'ou'rgb(0,100%,100%) • mot'clé':'cyan
• même'règles'que'pour'border-style'pour'individualiser'chaque'côté.'
52'
Bordures!et!arrièreEplan!épaisseur,!couleur!
• background-color: valeur • #00ffff,'#0ff!,'rgb(0,255,255),'rgb(0,100%,100%)','cyan
• background-image: url(url de l'image) • image'locale''url(images/logo-ujf.png) –'chemin'relaRf!
• image'distante'url(http://www.monsite.org/images/logo.gif) '
– par'défaut'l'image'est'répétée'en'damier'
CSS!
53'
Bordures!et!arrièreEplan!couleur!–!image!arrièreEplan!
logo_ujf`fond.png'
• background-repeat: valeur • contrôle'répéRRon'de'l'image'd'arrière`plan
CSS!
54'
Bordures!et!arrièreEplan!image!arrièreEplan!
• background-position: valeur1 valeur2 • valeur1'posiRon'horizontale'par'rapport'au'bord'gauche'left,'center,'right'ou'pourcentage'
• valeur2'si'présente,'posiRon'verRcale'par'rapport'au'bord'supérieur'top,'center,'bottom ou'pourcentage'
• Par'défaut'image'd'arrière`plan'a>achée'à'son'élément'– se'déplace'avec'lui'lors'd'un'scroll'
• background-attachment: fixed – a>ache'l'image'à'la'fenêtre.
CSS!
55'
Bordures!et!arrièreEplan!image!arrièreEplan!
CSS!• exemple'(sans'posiRonnement)'
56'
Posi:onnement!des!éléments!!
CSS!
57'
250px!
400px!
400px'
250px' 20px!20px!
30px! 30px!
a>ribuRon'de'dimensions'aux'éléments'div1'et'p1!
ajout'de'marges'internes'(padding)'aux'éléments'div1'et'p1!
Posi:onnement!des!éléments!
CSS!
58'
Posi:onnement!des!éléments!
20px!
20px!
ajout'd'une'marge'externe'(margin)'a'l'élément'div1!
div1'sans'marge'
div1'avec'marge'
CSS!
59'
Posi:onnement!des!éléments!!posi:onnement!rela:f!
50px!
• posiRonnement'relaRf'– l'élément'est'décalé'à'l'aide'des'propriétés'top,'right,'left,'bottom par'
rapport'à'sa'posiRon'normale'dans'le'flux'courant '!'l'élément'peut'prendre'place'au'dessus'de'ses'éléments'frères.'
– n'affecte'pas'les'boites'qui'l'entourent'
40px!
CSS!
60'
Posi:onnement!des!éléments!!posi:onnement!absolu!
100px! 90px!
• posiRonnement'absolu'– sort'un'élément'du'flux'– l'élément'ne'parRcipe'plus'à'la'posiRon'de'ses'frères'– posiRonnement'à'l'aide'des'propriétés'top,'right,'left,'bottom
• expriment'des'décalages'non'plus'par'rapport'à'posiRon'théorique'(posiRonnement'relaRf)'mais'par'rapport'à'la'posiRon'd'un'bloc'conteneur'de'référence'
• boite'conteneur'de'référence':'le'premier'élément'ancêtre'posiRonné'(relaRf,'absolu'ou'fixed)'(élément'<body>'toujours'considéré'comme'posiRonné)
tout'élément'posiRonné'en'absolu'est'considéré'de'type'bloc'=>'éléments'en'ligne'peuvent'ainsi'recevoir'des'dimensions'et'bordures'''
CSS!
61'
Posi:onnement!des!éléments!!posi:onnement!fixe!
• posiRonnement'fixe'– cas'parRculier'du'posiRonnement'absolu'– l'élément'reste'fixe'dans'la'page'par'rapport'à'la'zone'de'visualisaRon'(pas'de'
scroll)'
posiRonnement'absolu'
scrolling'en'liaison'avec'l'élément'de'référence''
posiRonnement'fixe'
pas'de'scrolling'
CSS!
62'
Posi:onnement!des!éléments!!posi:onnement!flo^ant!
• posiRonnement'flo>ant'1. sort'l'élément'du'flux'2. l'élément'est'"poussé"'à'gauche'(float:!led)'
'ou'à'droite'(float:!right)'de'son'conteneur.'3. les'éléments'qui'le'suivent'dans'le'
conteneur'prennent'place'autour'de'lui.'
posi:onnement!normal!(flux)!
posi:onnement!en!flo^ant!
posi:onnement!flo^ant!(right)!
CSS!
63'
Posi:onnement!des!éléments!!posi:onnement!flo^ant!
p3!p2!
p4!
p5!
p1!
• possibilité'de'placer'des'blocs'flo>ants'côte'à'côte'
CSS!
64'
Posi:onnement!des!éléments!!posi:onnement!flo^ant!
p3!p2!
p4!
p5!
p1!
• clear'permet'd'interdire'le'voisinage'avec'un'élément'flo>ant'(à'droite,'à'gauche'ou'des'deux'côtés).'
pas!d'élement!flo^ant!à!droite!
CSS!
65'
Posi:onnement!des!éléments!!posi:onnement!flo^ant!
(c)'UJF`2011'Philippe'GENOUD'
p3!p2!
p4!
p5!
p1!
• clear'permet'd'interdire'le'voisinage'avec'un'élément'flo>ant'(à'droite,'à'gauche'ou'des'deux'côtés).'
pas!d'élement!flo^ant!ni!à!droite!ni!à!gauche!
CSS!
66'
Posi:onnement!des!éléments!!posi:onnement!flo^ant!
p3!
p2!
p4!p5!
p1!
• possibilité'de'faire'flo>er'des'éléments'en'ligne.'
+!
?!
CSS!
67'
Posi:onnement!des!éléments!!posi:onnement!flo^ant!
p3!
p2!
p4!p5!
p1!
• possibilité'de'faire'flo>er'des'éléments'en'ligne.'
+!
• 'tout'élément'flo>ant'est'considéré'de'type'bloc'• 'les'éléments'en'ligne'peuvent'alors'recevoir'bordures'et'dimensions'
CSS!
68'
Posi:onnement!des!éléments!!Afficher!et!masquer!des!éléments!
p3!
p2!
p4!p5!
p1!
• possibilité'de'rendre'invisible'des'éléments'
• 'visibility:hidden'masque'l'élément'mais'réserve'sa'posiRon'et'ses'dimensions.'L'élément'occupe'de'l'espace'sur'la'page.''• 'autres'valeurs':'visible,'collapse'(pour'tables),'inherit!
CSS!
69'
Posi:onnement!des!éléments!!Afficher!et!masquer!des!éléments!
p3!
p2!
p4!p5!
p1!
• possibilité'de'reRrer'un'élément'de'l'affichage'
• 'display:none!l'élément'n'est'plus'du'tout'affiché.'Tout'se'passe'comme'si'il'n'existait'pas'!
CSS!
70'
Posi:onnement!des!éléments!!posi:onnement!flo^ant!
• posiRonnement'flo>ant'– autre'exemple.'
posiRonnement'en'flux' posiRonnement'en'flo>ant'