Technologies de l’Internet - irit.frIulian.Ober/inet/cours/Internet-3-css.pdf · une page (X)HTML est un arbre d'éléments sélecteur → précise sur quels éléments s'applique

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, …


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


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 ;"> …


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


IUT Blagnac6

SSéélection par le typelection par le type

Exemple :

s'applique à tous les éléments <h1>

h1 { … /* propriétés */ }


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 */ }


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 */ }


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


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, …)


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


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


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


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


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


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 !


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


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


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…


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


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


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)


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


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


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>


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;

}


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!


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!


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>


IUT Blagnac30


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>


IUT Blagnac31


position fixe :marche +/- comme absolute… mais position fixe par rapport à la fenêtre de visualisation !


IUT Blagnac32


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. …


IUT Blagnac33

ModModèèle de mise en forme visuelle de mise en forme visuel

Plus de détail → Chapitre 9 de la norme CSS2 !


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>


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;


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"


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}

}


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 */


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>


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


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é


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 !

Documents

Technologies de l’Internet - irit.frIulian.Ober/inet/cours/Internet-3-css.pdf · une page (X)HTML est un arbre d'éléments sélecteur → précise sur quels éléments s'applique