Feuilles de style CSSroutier/enseignement/licence/tw1/cours/CSS.pdf · CSS Cascade S´electeurs...
Transcript of Feuilles de style CSSroutier/enseignement/licence/tw1/cours/CSS.pdf · CSS Cascade S´electeurs...
CSS Cascade Selecteurs
Feuilles de style CSS
Technologies du Web 1
Jean-Christophe RoutierLicence 1 SESI
Universite Lille 1
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 1
CSS Cascade Selecteurs
Tout cela manque quand meme de style
Chaque element HTML est affiche par le navigateur avec un style pardefaut.
sansCSS.html �
I les elements <h1> apparaissent avec une police de taille 2em et « engras »
I les elements <code> sont affiches avec une police a chaque fixe.I les elements <p> forment des blocs qui s’affichent les uns en dessous
des autres avec une marge haute et basse de 1em et leur texte estaffiche avec la police par defaut du navigateur
I les elements <q> sont encadres par des guillemetsI les elements <strong> sont en grasI etc.
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 2
CSS Cascade Selecteurs
CSS
Cascading Style SheetsIl est possible de modifier ce style grace aux CSS
CSS = Cascading Style Sheets = Feuilles de style « en cascade »
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 3
CSS Cascade Selecteurs
Un concept important
ConceptLa separation de la forme et du contenu.
I la structure d’un document (et son contenu) est decrite en HTMLI sa presentation est geree par les CSS
1 on cree le document (contenu et structure) sans se preoccuper de samise en forme
2 on concoit la (les !) mise(s) en formepuis eventuellement on les modifie/adapte
« CSS Zen garden »http://www.csszengarden.com/
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 4
CSS Cascade Selecteurs
Avantages
I document HTML et feuille CSS peuvent etre definis dans des fichierssepares
I construction du document (HTML) sans se preoccuper de son renduvisuel
I creation plus efficaceI code HTML plus simple et plus lisibleI on peut changer la feuille de style sans changer le document (evolution
du « look »)I on peut avoir plusieurs feuilles de style pour un document
I selection selon le « media »I accessibilite
I l’homogeneite visuelle d’un site est faciliteeI plusieurs pages peuvent partager la meme feuille de style
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 5
CSS Cascade Selecteurs
Principe
I le langage CSS definit un ensemble de proprietes qui ont une influencesur l’affichage des elements d’une page
I a chaque propriete correspond un ensemble de valeurs possiblesI il est possible de fixer ces proprietes pour chacun des elements d’un
document HTMLI les proprietes definissent l’apparence de la boıte d’un elementI les proprietes 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, visibilite)I ...
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 6
CSS Cascade Selecteurs
Regle CSS
Regle CSSUne regle CSS definit pour un selecteur une propriete CSS et sa valeur.
selecteur : { propriete : valeur }
Le selecteur determine les elements sur lesquels s’applique la regle.
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 7
CSS Cascade Selecteurs
I une feuille de style CSS contient un ensemble de regles CSS
I il est possible de regrouper plusieurs regles d’un meme selecteurles definitions sont alors separees par des points-virgulesh1 {
color : blue;font -size : 12px;
}
« tous les elements <h1> aurontleur texte en bleu et une taillede police de 12px »
I on peut factoriser les regles partagees par des selecteursles selecteurs sont alors separes par des virgulesh1, h2 {
color : blue;font -size : 12px;
}
« les elements <h1> et leselements <h2> auront leur texteen bleu et une taille de police de12px »
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 8
CSS Cascade Selecteurs
Integration des regles CSS a l’HTML
Differentes possibilites :I sans CSS �I CSS dans le code HTML (beurk) � : a proscrire !I regles CSS “en dur” � : bof, limitantI feuille de style externe : la solution a adopter
I style 1 � – la feuille css �I style 2 � – la feuille css �
Dans l’entete (<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"/>
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 9
CSS Cascade Selecteurs
Exemples de proprietes
I font-family : le type de police utilisee pour le contenu,I font-size : la taille des caracteres (en px, em, %, etc.)I font-style : normal, italic, obliqueI font-weight : normal, bold, lighter, etc.I border : la bordure autour du contenu de l’element (couleur, style, ...)I width : largeur du contenu (%, px, em, cm)I color et background-color : couleurs du texte et de l’arriere-plan
(rgb(0,128,255), hexa #AAAAAA, symboles predefinis (navy, white,...), hsl,)
I etc. liste � exemple �
validation css : http://jigsaw.w3.org/css-validator/
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 10
CSS Cascade Selecteurs
Cascade
I plusieurs feuilles de style sont possibles pour un meme documentI certaines regles s’appliquent selon les mediasI il peut y avoir des regles en conflit (portant sur les memes elements)
CascadeLe mecanisme de cascade determine les regles appliquees.
3 etapes de filtre :1 par media2 par origine3 par specificite des selecteurs
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 11
CSS Cascade Selecteurs
Medias
I possibilite de preciser le media dans auquel s’applique les reglesdefinies dans la feuille style
I attribut media de la balise <link>
ex : media="screen" – media="print"
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 12
CSS Cascade Selecteurs
Origine des styles
I 3 origines possibles pour les feuilles de styleauteur definies l’auteur de la page
utilisateur definies par celui qui consulte la pagenavigateur definies par le navigateur (agent utilisateur)
En general : auteur > utilisateur > navigateurnuance par usage du mot-cle !important
plus de details : http: // openweb. eu. org/ articles/ cascade_ css
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 13
CSS Cascade Selecteurs
Selecteurs
SelecteurLe selecteur determine les elements sur lesquels s’applique la regle.
necessite de savoir commentI definir les selecteurs appropriesI sont gerees les priorites entre regles en conflit
Selecteurs simples :E tout element dont la balise est <E>
* tout element
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 14
CSS Cascade Selecteurs
Selecteurs et attributs
E[att] tout element E dont l’attribut att est definiex : p[lang], img[alt], *[title]
E[att=val] tout element E dont l’attribut att vaut valex : p[lang=fr]
E[att∼=val] tout element E dont l’attribut att est une liste de motssepares par des espaces, l’un de ces mots vaut exactement val
E[attˆ=”prefixe”] tout element E dont la valeur de l’attribut att setermine exactement par prefixeex : a[hrefˆ="http://fil.univ-lille1.fr"]
E[att$=”suffixe”] tout element E dont la valeur de l’attribut attcommence exactement par suffixeex : img[src$=".png"], a[href$=".pdf"]
E[att*=”val”] tout element E dont la valeur de l’attribut att contient lasous-chaıne valex : figure[alt*="diagramme"], *[title*="timoleon"]
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 15
CSS Cascade Selecteurs
Selecteur de classe et d’id
Cas particuliers des attributs class et id :
E.c tout element E appartenant a la classe cequivalent a E[class∼=c]
ex : div.exercice, *.solution, div.rmq[titleˆ="NB"]
E#ident tout element E dont l’id vaut identequivalent a E[id=ident]
ex : img#joconde, *#joconde, #unique
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 16
CSS Cascade Selecteurs
Selecteurs de pseudo-classes et pseudo-elements
E:pseudoC tout element E appartenant a la pseudo-classe pseudoC
ex : a:visited, a.fichier:hover
E::pseudoE tout pseudo-element pseudoE de l’element E
ex : h1::first-letter, p[lang=fr]::first-line
pseudo-classes et pseudo-elements presentes plus loin
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 17
CSS Cascade Selecteurs
Combinaison de selecteurs
I s’appuie sur la structure arborsecente du document
si Sel1 et Sel2 sont des selecteurs :
Sel1 Sel2 tout element selectionne par Sel2 emboite dans un elementselectionne par Sel1
Sel1 > Sel2 tout element selectionne par Sel2 qui est fils d’un elementselectionne par Sel1
Sel1 + Sel2 tout element selectionne par Sel2 qui suit immediatementun element selectionne par Sel1
Sel1 ∼ Sel2 tout element selectionne par Sel2 qui suit un elementselectionne par Sel1
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 18
CSS Cascade Selecteurs
Exemples
body h1h1 ou
body
p divh1
em h1
h1
div
em
p
em
p
em
div h1
body
p divh1
em h1
h1
div
em
p
em
p
em
body>h1
body
p divh1
em h1
h1
div
em
p
em
p
em
div+h1
body
p divh1
em h1
h1
div
em
p
em
p
em
Credits figures Bruno BogaertUniversite Lille 1 - Licence 1 SESI Technologies du Web 1 19
CSS Cascade Selecteurs
Exemples
div em
body
p divh1
em h1
h1
div
em
p
em
p
em
div>em
body
p divh1
em h1
h1
div
em
p
em
p
em
div p em
body
p divh1
em h1
h1
div
em
p
em
p
em
body>p em
body
p divh1
em h1
h1
div
em
p
em
p
em
Credits figures Bruno BogaertUniversite Lille 1 - Licence 1 SESI Technologies du Web 1 20
CSS Cascade Selecteurs
Conflit entre regles
Calcul de prioriteOn compte pour chaque selecteur :
a nombre de selecteurs d’id (= nombre de #)b nombre de classes, pseudo-classes ou d’attributsc nombre d’elements ou de pseudo-elements
Le selecteur recoit la priorite a b c.Le selecteur avec la plus grande priorite l’emporte.
En cas d’egalite, la derniere declaration l’emporte.
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 21
CSS Cascade Selecteurs
Exemples
selecteur a b c* {...} 0 0 0h1 {...} 0 0 1div.reponse {...} 0 1 1#joconde {...} 1 0 0div a {...} 0 0 2div a:visited {...} 0 1 2p span.fichier {...} 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::first-letter {...} 0 0 3article#special p::first-letter {...} 1 0 3
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 22
CSS Cascade Selecteurs
<p>zero</p><h1>Titre </h1><p>premier </p><p>second </p><p>troisieme </p><p lang="en">fourth </p><p class="bleu">cinquieme </p><p class="bleu">sixieme </p><p class="bleu" id="special">septieme </p><p>huitieme </p><div>
<p>neuvieme </p><p lang="en">tenth</p>
</div><p>onzieme </p><h1>Second titre </h2><p>douzieme </p>
b-g = background-colorp { b-g:pink}h1+p { b-g : red; }div >p { b-g : yellow; }p#special { b-g: gold; }p[lang=en] {b-g : green;}p.bleu { b-g: lightblue; }p+p { b-g: lightgreen; }
ex-selecteur.html
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 23
CSS Cascade Selecteurs
Heritage
HeritageI lorsque pour un element aucune regle ne definit de valeur pour une
propriete, c’est la valeur de cette propriete pour son parent quis’applique
I toutes les proprietes ne s’heritent pasex : margin, padding, etc
I la propriete inherit permet d’agir sur l’heritage
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 24
CSS Cascade Selecteurs
Pseudo-classes
non exhaustif
Structurelles:empty un element E sans descendant (y compris nœud texte)
:first-child un element qui est premier fils d’un autre elementex : div.exercice:first-child
:last-child element dernier fils d’un autre element:nth-child(an + b) element (an + b)-eme fils d’un autre element
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)-eme fils en partant de la fin:nth-of-type(an + b) (an + b)neme element du type selectionne et qui ont
le meme pere
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 25
CSS Cascade Selecteurs
Pseudo-classes (suite) et Pseudo-elements
non exhaustif
Dynamiques:hover est « sous » le pointeur de la souris
:visited (<a> uniquement) lien deja visite:link (<a> uniquement) lien non encore visite
Pseudo-elements::first-line la premiere ligne « formatee » d’un element
::first-letter le premiere lettre « formatee » d’un element::before insertion de contenu avant l’element
::after insertion de contenu apres l’element
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 26
CSS Cascade Selecteurs
Exemples
:first-child
body
p divh1
em h1
h1
div
em
p
em
p
em
h1:first-child
body
p divh1
em h1
h1
div
em
p
em
p
em
div>h1:first-child
body
p divh1
em h1
h1
div
em
p
em
p
em
h1:first-child+*
body
p divh1
em h1
h1
div
em
p
em
p
em
Credits figures Bruno Bogaert
Universite Lille 1 - Licence 1 SESI Technologies du Web 1 27