CSS! Cascading!Style!Sheetsimss-atenciam/ITW/3-css.pdf · CSS! Cascading!Style!Sheets!...

!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'


•  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'


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'


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'


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'



CSS!

•  2ème''soluRon'uRliser'la'structure'arborescente'

20'



tous'les'éléments'<a>'descendants'd'un'élément'<ul>'

SélecRon'en'foncRon'd'une'relaRon'parent'descendant.''

CSS!

21'


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é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é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'


Combinaisons!de!sélecteurs!' idenRficateur' descendant' enfant'

CSS!

25'


Combinaisons!de!sélecteurs!' idenRficateur' descendant' enfant'

CSS!

26'


Combinaisons!de!sélecteurs!' idenRficateur'

descendant'

enfant'descendant'enfant'

CSS!

27'


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é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!

!


myStyles.css'



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!

!


<!DOCTYPE html> <html> ... <h2 id="main" class="navigation" style="color: yellow">Navigate :</h2> ... </html>

myPage.html'

myStyles.css'



Avec'quelle'couleur'"Navigate:'"'va't'il'être'affiché'?'

CSS!Conflits!

!


<!DOCTYPE html> <html> ... <h2 id="main" class="navigation" style="color: yellow">Navigate :</h2> ... </html>

myPage.html'

myStyles.css'



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'


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'


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ânt!

•  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ânt!

posi:onnement!floânt!(right)!

CSS!

63'


p3!p2!

p4!

p5!

p1!

•  possibilité'de'placer'des'blocs'flo>ants'côte'à'côte'

CSS!

64'


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'


(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'


p3!

p2!

p4!p5!

p1!

•  possibilité'de'faire'flo>er'des'éléments'en'ligne.'

+!

?!

CSS!

67'


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'


•  posiRonnement'flo>ant'–  autre'exemple.'

posiRonnement'en'flux' posiRonnement'en'flo>ant'

CSS! Cascading!Style!Sheetsimss-atenciam/ITW/3-css.pdf · CSS! Cascading!Style!Sheets!...

Documents

Transcript of CSS! Cascading!Style!Sheetsimss-atenciam/ITW/3-css.pdf · CSS! Cascading!Style!Sheets!...