Technologies de l’Internet - irit.frIulian.Ober/inet/cours/Internet-3-css.pdf · une page (X)HTML...
Transcript of Technologies de l’Internet - irit.frIulian.Ober/inet/cours/Internet-3-css.pdf · une page (X)HTML...
Technologies de Technologies de ll’’InternetInternet
Partie 3 : CSSIulian [email protected]
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac2
Introduction au langage CSSIntroduction au langage CSS
permet de changer la mise en forme d'une page (X)HTML sans modifier son contenugain de temps, de simplicité de création et de maintenance
e.g., charte graphique CSS, appliquée à toutes les pages d'un site
capacités de CSS :spécifie l'apparence des blocs de texte ou imagespécifie les bordures, les marges, le recouvrement de chaque élémentpeut aussi contrôler de manière très précise le positionnement des objets, …
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac3
Principe du langagePrincipe du langage
une feuille de style est une suite de règlescomposants d'une règle:
sélecteur {propriété1 : valeur1 ;propriété2 : valeur2 ;…
}
une page (X)HTML est un arbre d'élémentssélecteur → précise sur quels éléments s'applique la règlepropriété : valeur → précise la mise en forme des éléments sélectionnés
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac4
OOùù mettre les styles et mettre les styles et les feuilles de styleles feuilles de style
feuille de style interne à un document HTMLdans l'entête, dans un élément <style>:<style type="text/css">...</style>
feuille de style externe, dans un fichier séparélien dans l'entête :<link rel="stylesheet" type="text/css" href="fichier.css"/>on peut donner plusieurs feuilles de style pour une page ⇒ application "en cascade"
styles définis en-ligne (pas besoin de sélecteur)attribut style, applicable à tous les éléments HTML :<p style="font-family:sans-serif; color:red ;"> …
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac5
Les sLes séélecteurslecteurs
Peuvent sélectionner un élément sur la base de:son type (h1, p, img, …)sa position relative dans l'arbre d'éléments (fils de, frère de…)son identifiant (attribut id)sa classe (attribut class)la valeur d'un attribut quelconque(e.g., src, href,…)une combinaison de ça
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac6
SSéélection par le typelection par le type
Exemple :
s'applique à tous les éléments <h1>
h1 { … /* propriétés */ }
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac7
SSéélection par la position hilection par la position hiéérarchiquerarchique
élément E1 contenu directement ou indirectement dans E2 (héritier de) :
élément E1 contenu directement dans E2 (fils de) :
élément E1 situé directement après E2 (frère suivant de) :
E2 E1 { … /* propriétés */ }
E2 > E1 { … /* propriétés */ }
E2 + E1 { … /* propriétés */ }
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac8
SSéélection par les attributs lection par les attributs élément ayant un identifiant donné(e.g., <h1 id="i1" >…</h1>):
éléments ayant une classe donnée(e.g., <h1 class="c1">…<h1> … <p class="c1">…</p>) :
éléments ayant un attribut égal à une valeur donnée (e.g., <img src="toto.gif"…/> ) :
#i1 { … /* propriétés */ }
.c1 { … /* propriétés */ }
[src="toto.gif"] { … /* propriétés */ }
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac9
SSéélections complexeslections complexes
on peut combiner les opérateurs de sélection
div#leftmenu ol>li em { … }⇒ sélection d'un <em> inclus dans un <li> …
restriction : on peut sélectionner un élément en fonction de ses supérieurs, mais pas des ses subordonnés
sélection d'un <em> dans un <td> :td em {…}
sélection d'un <td> contenant un <em> : ?!?
td
em
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac10
Les classes d'Les classes d'éélléémentsments
attribut class associable à tous les éléments HTMLexemple: <p class="exemple">texte</p>
par défaut, pas de changement du rendu visuel
sert à faire le lien avec les stylesp.exemple {/* style applicable aux paragraphes
"exemple" */}.exemple {/* style applicable à tous les éléments
"exemple" (paragraphe, div, …)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac11
Class vs. IDClass vs. ID
Si on veut modifier l'apparence :
de plusieurs éléments ⇒ utiliser attribut class="toto" et sélecteur.toto
d'un seul élément ⇒ utiliser attribut id="toto" et sélecteur#toto
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac12
PseudoPseudo--classesclasses
Sélectionner un élément en fonction de son état (déterminé par le navigateur)
Exemple : états des liens (<a>)lien non-visité: a:linklien visité: a:visitedlien pointé actuellement par la souris: a:hover
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac13
PseudoPseudo--éélléémentsments
Sélectionner une partie d'un élément
Exemples :première ligne d'un paragraphe: p:first-linepremière lettre d'un paragraphe: p:first-letter
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac14
Plus sur les sPlus sur les séélecteurslecteurs
sélecteur universel, s'applique àtous les éléments: *
* { color : blue }plusieurs sélecteurs pour une règle :
h1,h2,h3 { color : green }règles de résolution de conflits: voir plus loin
ici, h1, h2, h3 seront verts car sélecteur plus spécifique
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac15
divdiv & & spanspan
éléments HTML dont la seule utilité et de se voir appliquer un stylediv – élément de type bloc
saut de ligne avant et après (en flux normal)
span – élément de type en-lignepas de saut de ligne
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac16
Bien choisir les noms de classeBien choisir les noms de classe
CSS est fait pour séparer le style du contenu⇒ les noms de classe doivent décrire le contenu, par le style
Exemple:on utilise une classe span.enorme {font-size: 30pt} pour du texte importantplus tard on découvre que c'est plus agréable de mettre le texte important simplement en rouge⇒ on redéfinit span.enorme {color:red}mais le nom n'est plus adéquat, que faire?⇒ on aurait dû appeler la classe span.important dès le départ !
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac17
PropriPropriééttéés de mise en formes de mise en forme
Principales catégories:
texte et policescouleur/image de fond des élémentsborduresmarges, espacementdimensionnementpositionnementcaractéristiques des listes et tableaux
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac18
Couleurs et unitCouleurs et unitéés de mesures de mesure
Couleurs:par le nom: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white(d'autres noms existent mais sont spécifiques aux navigateurs!)par les composants RGB:
#rrggbb – où r,g,b sont des chiffres héxargb(r,g,b) – où r,g,b sont des nombres de 0 à 255
Unités de mesure:relatives:
em, ex – spécifiques aux policespx – pixels% – pourcentage de a valeur héritée
absolues: mm, cm, in, pt, pc
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac19
Quelques propriQuelques propriééttéés du textes du texte
text-align : left | right | center | justifytext-decoration : none | underline | overline | line-throughtext-transform : none | capitalize | uppercase | lowercasetext-indent : length | 10%white-space : normal | pre | nowrapcolor : rgb(255,0,0)direction : ltr | rtl…
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac20
PropriPropriééttéés de polices de police
font-family : courier,seriffont-size : xx-small | x-small | small | medium | …font-weight : normal | bold | bolder | …font-style : normal | italic | oblique…
Raccourci pour combiner plusieurs propriétés de polic en une:
font : courier small italic
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac21
Quelques propriQuelques propriééttéés du fonds du fond
background-color : rgb(255,0,0)background-image : url("titi.gif")background-repeat : repeat | no-repeat | repeat-x | repeat-ybackground-attachment : scroll | fixed…
Raccourci pour combiner plusieurs propriétés de background en une:
background : url("titi.gif") fixed no-repeat
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac22
ModModèèle des bole des boîîtestes
tout élément HTML est contenu dans une boîte invisible (peut être rendue visible)
(top)
bordure (border) – peut être colorée
espacement (padding) - invisible
contenu
marge (margin) – invisible
(left) (right)
(bottom)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac23
Marge et espacement Marge et espacement
margemargin-top : auto | taillemargin-right : auto | taillemargin-bottom : auto | taillemargin-left : auto | tailleraccourci : marge : 1px 2px 3px 2px
espacementpadding-top : taillepadding-right : taillepadding-bottom : taillepadding-left : tailleraccourci : marge : 1px 2px 3px 2px
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac24
BorduresBordures
border-width: thin | medium | thick | sizeborder-style: none | hidden | dotted | dashed | solid | double |
groove | ridge | inset | outsetborder-color: color…
Raccourci pour combiner plusieurs propriétés de polic en une:
border : solid 1px blue
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac25
Interactions entre marges, Interactions entre marges, espacements, borduresespacements, bordures
Exemple HTML:<ul> <li>Premier élément de
liste</li><li
class="withborder">Second élément de liste</li>
</ul>
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac26
Cas particulier: marge autoCas particulier: marge auto
par défaut : auto = 0si 2 marges opposés sont "auto", elles divisent l'espace disponible en 2utile pour centrer les éléments de type bloc dans leur container:
div > table {margin-left : auto;margin-right : auto;
}
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac27
ModModèèle de mise en forme visuelle de mise en forme visueldicte comment les boîtes correspondantes aux éléments sont assemblées
2 contextes de mise en formecontexte de type blocexemple : dans <body> ou dans un <div> (un <div> peut contenir des blocs – en fait il en contient toujours) règle (simplifiée) : les boîtes sont empilées de haut en bascontexte de type en-ligneexemple : dans un <p> (un <p> ne contient pas de blocs)règle (simplifiée) : les boîtes sont alignées de gauche àdroite avec retour à la ligne⇒ peut générer des boîtes pas rectangulaires!
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac28
Changer la taille des boChanger la taille des boîîtestes
chaque boîte a une taille "naturelle"changer la taille des éléments bloc:
width : sizeheight : sizeles tailles relatives (en %) sont par rapport au bloc conteneur
<p><img src="toto.gif" alt="toto" style="width:60%/>
</p>
de la largeur du paragraphe!
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac29
Changer la position des boChanger la position des boîîtes (1)tes (1)
chaque boîte a une position "naturelle", qui peut être changée
déplacement relatif ( position : relative ):décalage sur x ou y par rapport à la position naturelle, avec top, bottom, left, right (: size)ne change pas la position des autres boîtes(comme si la boîte n'était pas déplacée)
<p> image <img src="portrait.gif" alt="p"
style="position:relative; bottom:20px/>
déplacée</p>
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac30
Changer la position des boChanger la position des boîîtes (2)tes (2)
position absolue :position : absoluteposition par rapport aux marges :top, bottom, left, right (: size)l'élément est enlevé du flux normal, les autres boîtes sont positionnées comme si l'élément n'existait pas !on peut superposer des éléments (⇒ z-index)
<div style="…position:absolute…">image <img src="portrait.gif" alt="p"
style="position:absolute; bottom:40px"/>déplacée</div>
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac31
Changer la position des boChanger la position des boîîtes (3)tes (3)
position fixe :marche +/- comme absolute… mais position fixe par rapport à la fenêtre de visualisation !
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac32
Changer la position des boChanger la position des boîîtes (4)tes (4)
boîtes flottantes :la boîte est déplacée vers la gauche / droite sur la ligne courantele reste du contenu (en mode en-ligne) ou les autres boîtes (en mode bloc) s'écoulent le long des flancs de la boîte "flottante"la boîte est enlevée du flux normal
<p><img src=img.gif alt="img"
style="float:left"/> Un échantillon de texte. Un échantillon de texte. …
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac33
ModModèèle de mise en forme visuelle de mise en forme visuel
Plus de détail → Chapitre 9 de la norme CSS2 !
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac34
Directive ImportDirective Import
CSS2 permet d'importer une feuille de style au début d'une autre:
<style type="text/css">
@import url("loudvoice.css");
</style>
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac35
Types de mTypes de méédiadia
CSS2 permet de spécifier des règles ≠applicables à des médias ≠
screen, print, projection, handheld, braille, aural…
Variantes:
@media print {
color : black;
}
@import url("loudvoice.css") aural;
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac36
RRèègles de cascade et dgles de cascade et d’’hhééritage ritage
Les propriétés peuvent se combiner:
Il peut y avoir des ambiguïtés:propriétés définies plusieurs fois
propriétés pas définies
* { color : blue; }p { font-weight : bold}
un paragraphe sera bleu et gras
* { color : blue; }h1 { color : green}
règles "de cascade"
body { color : blue; }h1 { }
règles "d'héritage"
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac37
RRèègles de cascadegles de cascade⇒ résoudre les conflits quand plusieurs affectations
sont possibles pour une propriété1. Prise en compte du média
2. sinon, priorité selon l'origine de la feuille de style:i. feuille de style par défaut du navigateur (utilisateur)ii. feuille de style externe (auteur)
iii. feuille de style interne (élément <style>) (auteur)iv. style inline (attribut style) (auteur)
@media print {body {font-size: 10pt}
}
@media screen {body {font-size: 12pt}
}
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac38
RRèègles de cascadegles de cascade3. sinon, spécificité du sélecteur : le sélecteur le
plus spécifique l'emporte
4. sinon, ordre d'apparition: la dernière règle rencontrée l'emporte
* {} /* a=0 b=0 c=0 -> specificity = 0 */ li {} /* a=0 b=0 c=1 -> specificity = 1 */ ul li {} /* a=0 b=0 c=2 -> specificity = 2 */ ul ol>li {} /* a=0 b=0 c=3 -> specificity = 3 */ h1 + *[rl=up] {} /* a=0 b=1 c=1 -> specificity = 11 */ ul ol li.red {} /* a=0 b=1 c=3 -> specificity = 13 */ #x34y {} /* a=1 b=0 c=0 -> specificity = 100 */
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac39
RRèègles d'hgles d'hééritageritage
⇒ calculer une affectation de propriété par défaut quand elle n’est pas spécifiée
il existe des propriétés héritables et non-héritables !l'héritage s'entend "dans l'arbre du document"
<body>
<div>
<p>
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac40
HHééritageritage
Ordre de priorité dans l'affectation des propriétés:
1. valeur calculée (en cascade)2. sinon, valeur héritée (du parent)3. sinon, valeur par défaut (du navigateur)
Exemple:<body>
<div>
<p>
+body { color: blue; } <p> sera bleu
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac41
RRèègles !importantgles !important
permettent à l'utilisateur de prendre la priorité
feuille de style utilisateur:
body { color: black !important; background: white !important;
}
* { color: inherit !important; background: transparent;
}
texte noir sur fond blanc partout !⇒ accessibilité
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac42
CSS : mot de finCSS : mot de fin
permet de changer la mise en forme d'une page HTML sans modifier son contenupermet de partager la mise en forme de plusieurs pagescontrôle de manière très fine la mise en page: positionnement des éléments, bordures, marges,…(impossible sans CSS)applicable aussi aux documents XML !