71
Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit 24 novembre 2009

Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

Embed Size (px)

Citation preview

Page 1: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

Styles CSS

Feuilles de styles en cascadeCascading Style Sheets

Florence Petit 24 novembre 2009

Page 2: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

2

Sitographie sur le CSS

Site de démonstration de la puissance du CCS http://www.csszengarden.com/tr/francais/

Site de référence du langage CSS http://www.W3.org

Traduction française du W3C : http://www.yoyodesign.org/doc/w3c/css2/selector.html

Didacticiels http://www.w3schools.com/Css/ http://www.alsacreations.com/tutoriels/ http://www.siteduzero.com http://www.aidenet.com/css/ http://fr.selfhtml.org/css/ http://edu.ca.edu/cours-web/

Page 3: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

3

Le CSS et ses versions (niveaux)

Feuilles de styles en cascade (Cascading Style Sheets => CSS)

Langage permettant la mise en forme de documents structurés écrits en langage HTML, XHTML, XML

Succession de différentes versions CSS-1 ou CSS level 1 (1996) CSS-P (CSS Positioning) CSS-2 ou CSS level 2 (1998) CSS-2.1 (révision 2006) CSS-3 : brouillons (drafts) CSS Mobile Profile 1.0 CSS Print Profile CSS TV Profile 1.0

Page 4: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

4

Exemple de HTML 3.2 avant l'usage du CSS

<body bgcolor="white"><h1 align="center">Titre 1</h1> <p> <font face="Arial" color="red" size="2"> <i><b>Mon texte 1</b></i></font></p> <p><font face="Arial" color="red" size="2"> <i><b>Mon texte 2</b></i></font></p><h1 align="center">Titre 2</h1> <p><font face="Arial" color="red" size="2"> <i><b>Mon texte 3</b></i></font></p><h1 align="center">Titre 3</h1></body>

Page 5: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

5

Exemple de code (X)HTML et de code CSS

body {background-color: white;}

h1 {text-align: center;}

p {color:red; font: italic bold 10pt Arial;}

<body>

<h1>Titre 1</h1>

<p>Mon texte 1</p>

<p>Mon texte 2</p>

<h1>Titre 2</h1>

<p>Mon texte 3</p>

<h1>Titre 3</h1>

</body>

partie CSS

partie

(X)HTML

Page 6: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

6

Dépréciation de balises et attributs du HTML

A partir du HTML4, des balises et attributs du HTML3.2 sont dépréciées et remplacées par des styles

Balises dépréciées <center> </center>

Attributs dépréciés bgcolor="…" align="…"

Balises et attributs dépréciés <font color="…" face="…" size="…">...</font>

Balises logiques (sémantique) préférables aux balises physiques : <strong>...</strong> préférable à <b>...</b> <em>...</em> préférable à <i>...</i>

Page 7: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

7

Le CSS : avantages et inconvénients

Avantages Séparation contenu/mise en forme Code plus lisible Code du fichier html allégé -> Diminution du temps de chargement Présentation homogène du site web Maintenance facilitée : répercussion automatique des modifications Nouvelles possibilités de mise en forme des documents html Compatible avec divers langages (HTML, XHTML, DHTML, XML…)

Inconvénients Pas/peu reconnu par les anciens navigateurs (Netscape 4, IE3) Mieux reconnu depuis Nescape 6, IE 6 Modèle de boîte différent pour IE 5 (mode Quirks) Subsistance de quelques incompatibilités

Page 8: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

8

Déclaration de style CSS : syntaxe

Syntaxe généralepropriété: valeur;

Exemplescolor: blue;

background-color: #ff0000;

border-width: 1px;

border-style: solid;

border-color: black;

Raccourci pour plusieurs propriétés voisinesborder: 1px solid black;

Page 9: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

9

h2 {color: red; text-align: center ;}

Règle CSS : syntaxe

déclaration valeuridentificateurde propriété

sélecteur bloc de déclarations

règleCSS

; séparateur

entre déclarations

;facultatifà la fin

accolades

Page 10: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

10

Règle CSS : présentation du code

Présentation possible :h2 {color: red; text-align: center ; }

Présentation conseillée (avec indentation et passage à la ligne) :h2 {

color: red;text-align: center ;

}

Page 11: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

11

/* Utilisation des commentaires en CSS */

/* Auteur : Florence PETIT */

a {color:#333; /* gris sombre */

}

/* Feuille de style du site truc.org Version modifiée le 12 juin 2009*/

/* -----------------------------------Typographie et couleurs-------------------------------------- */p {

font-size:12px;}#menu li {

color:#ff0000; }/* -----------------------------------Structure du site-------------------------------------- */div {…}

Commentaire sur une portion de ligne

Commentaire sur une ligne

Commentaire sur plusieurs lignes

Commentaires permettant d'organiser la feuille de style

en rubriques facilement repérables

Page 12: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

12

Commentaire conditionnel

Si le navigateur est inférieur (lt pour less than) à la version d'IE, alors on ajoute un style…

<!--[if lt IE 7]>

<style type="text/css">

div {

width:expression(document.body.clientWidth >= 1000? "1000px": "auto" ); }

</style>

<![endif]-->

Page 13: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

13

Codage des couleurs en CSS

Propriétés de couleurs color: red -> couleur de texte border-color: red -> couleur de bordure background-color: red -> couleur de fond

Une couleur peut être exprimée sous différentes formes : Nom de couleur reconnu par W3C red, blue black, white , gray, silver…

(17 couleurs) Nom de couleur non reconnu par W3C darkolivegreen, lightskyblue, tomato Codage hexadécimal classique

de type #rrvvbb #cc0088 Codage hexadécimal abrégé

de type #rvb #c08 Codage décimal de type rgb(x, y, z)

avec nombre de 0 à 255: rgb(255, 0, 122) Codage décimal de type rgb(x%, y%, z%)

en pourcentage : rgb(100%, 0%, 50%)

Sites sur la couleur Noms de couleur : http://www.5axe.com/5axe2/inc/pgeditor/popups/color_help.php?lng

=fr Codes de couleur : http://www.code-couleur.com Théorie sur la couleur : http://www.profil-couleur.com Couleur et harmonie : http://www.colorsontheweb.com/colorwizard.asp

Page 14: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

14

Unités de taille (polices, dimensions d'élément...)

Unité absolue Exemples Millimètre 12mm Centimètre 1.2cm Pouce ou Inch (1 inch = 2,54 cm) 0.2in Point (1 pt = 1/72 inch) 15pt Pica (1 pc = 12 pt = 1/6 inch) 2pc

Unité relative Pixel (/résolution) 15px Pourcentage (/ parent) 150% Taille (largeur d'un M) 1.5em Taille (hauteur d'un x) 1.5ex

Remarques Inutile de préciser l'unité pour la valeur nulle : 0 L'abréviation de l'unité doit être collée à la valeur, sans espace La taille de police est exprimée le plus souvent en pt, en em, en % Largeur et hauteur d'une image sont exprimées en général en px Les tailles pour l'impression (marges…) sont exprimées en cm, ou en in

Page 15: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

15

Méthodes pour appliquer des styles en (X)HTML

Feuille de style interne au document liste des règles CSS dans balise <style…></style> placée dans la partie <head>

Feuille de style externe liée liste des règles CSS dans un fichier externe .css appel à ce fichier externe avec une balise <link … />

Feuille de style externe importée liste des règles CSS dans un fichier externe .css appel à un fichier externe avec @import

Style en ligne (intra-ligne ou incorporé) attribut style="…" dans la balise d'un élément

Page 16: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

16

Feuille de style interne au document

Balise <style type="text/css"></style> placée dans l'en-tête du document Liste de règles CSS placée dans cette balise ouvrante et fermante Règle appliquée à tous les sélecteurs correspondant du document Utilisation pour un document isolé,

éventuellement pour une page particulière d'un site Utilisation ne convenant pas pour mettre en forme un site entier Exemple :

<head> <style type="text/css">

body {background-color: silver; color: maroon;} h1 {text-align: center; font-size: 1.5em; color: black;}

</style></head><body>

<h1>Titre A</h1><p>Texte 1</p>

<p>Texte 2</p></body>

Page 17: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

17

Feuille de style CSS externe liée

Liste de règles CSS placée dans un fichier CSS externe (extension css) Balise link à ajouter dans l'en-tête du document html permettant de faire un

"lien" vers ce fichier css Utilisation bien adaptée à un site web dont toutes les pages HTML comporteront

la balise <link> Règle appliquée à tous les sélecteurs correspondant dans les documents liés Exemples

1) Code CSS : contenu d'un fichier CSS nommé monstyle.css body { background-color: white ; color: blue;} h1 { text-align: center; font-size: 1.5em ;color: black;}

2a) Code HTML (extrait du fichier)…<head><title>...</title><link rel="stylesheet" type="text/css" href="chemin/monstyle.css"></head>…

2b) Code XHTML (extrait du fichier)…<head><title>...</title><link rel="stylesheet" type="text/css" href="chemin/monstyle.css" /></head>...

Page 18: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

18

Feuille de style CSS importée

Liste de règles CSS dans un fichier CSS externe Règle @import à ajouter dans la feuille de style (interne ou externe) Se place avant tout autre déclaration de style Règle appliquée à tous les sélecteurs correspondant dans les documents liés Utilisation adaptée à un site web, notamment pour "cascader les styles" Syntaxe

@import "fichier.css"@import url("fichier.css")

Exemple (dans une feuille interne)

<style type="text/css"> @import url("fichier.css") p {color:red;}</style>

Page 19: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

19

Style en ligne, dans une balise (X)HTML

Bloc de déclarations CSS incorporé dans la balise introduit par l'attribut style

Exemple :<p style="text-align: center; background-color:#ccc;">Texte</p>

S'applique à une balise précise du document Intéressant pour un essai lors du développement Déconseillé actuellement :

à remplacer plutôt par l'utilisation d'un identifiant

(X)HTML : <element id="truc">

CSS : #truc {text-align: center; background-color:#ccc; }

Page 20: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

20

4 manières d'appliquer un style : exemple

<html><head> <title>…</title><link rel="stylesheet" type="text/css" href="fichier1.css" /><style type="text/css"> @import url("fichier2.css");

h1 { color: blue } </style></head> <body>

<h1>Ce texte est en bleu à cause du style interne</h1> <p style="color: green" >Ce paragraphe est en vert.</p>

</body></html>

Page 21: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

21

Les principaux sélecteurs : exemples

Nom d'élément : h1

Sélecteur multiple (regroupement de sélecteurs) : h1, h2, p

Sélecteur contextuel (combinaison d'éléments imbriqués ) : h1 a

Identifiant : p#intro1#intro1

Classe : p.intro .intro

Pseudo-classe : a:hover

Sélecteur universel :*

Page 22: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

22

Nom d'élément (Sélecteur de type)

La règle css s'applique à toutes les balises HTML indiquées Exemples :

h1 {color: red;font-size: 2em;

}h2 {

color: red;font-size: 1.5em;

}p {

color: black;}

Page 23: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

23

Regroupement de sélecteurs (avec virgule)

h1 {color:red; font-size:2em}h2 {color:red;}p {color:red;}

h1, h2, p {color:red;}h1 {font-size:2em;}

h1 h2 p {color:red;}h1 {font-size:2em;}

h1 {color:red; font-size:2em}h2 {color:red;}p {color:red;}

Page 24: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

24

Sélecteur universel *

* remplace tout élément du document Se met dans la partie style CSS, par exemple :

* {margin: 0}

Tous les éléments du document (h1, h2, p, div, ul…) auront une marge de 0.

Page 25: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

25

Sélecteurs contextuels (sélecteurs descendants)

Exemple : h1 emh1 est un ancêtre de em, même lointain.em est un descendant de h1, même lointain.

Dans la partie CSSh1 {color: blue;}h1 em {color: red;}p {color: black;}em {color: green;}

--------------------------------------- Dans le body

<h1>Titre A1</h1><p>Texte A </p><h1>Titre B1 <em> Titre C1</em>Titre D1 </h1><p>Texte B <em> Texte C</em> Texte D </p><p>Texte E <span>Texte F<em> Texte G</em></span> Texte H </p>

Page 26: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

26

Autres sélecteurs contextuels

Sélecteur parent descendant (au sens large : enfant, petit-enfant, etc.)div a (a descendant de div)

Sélecteur d'enfants (au sens strict, enfant direct)body > p (p enfant direct de body)

Sélecteur adjacent (ou consécutif) ul + li (li suivant immédiatement un ul)a + a (a suivant immédiatement un a)

Sélecteur d'attributh1[title] (h1 qui possède un attribut title)

Sélecteur de valeur d'attributinput[type=text]

Page 27: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

27

L'identifiant id du (X)HTML

id est un attribut "générique" qui s'applique à toutes sortes d'éléments.

Il sert à identifier une balise précise. Il doit être unique dans un document. Il s'ajoute dans une balise du document html :

<p id="intro">texte d'introduction</p>

Il peut être utilisé dans une règle CSS :

#intro {font-style: italic; text-align: center;}

identique à :

p#intro {font-style: italic; text-align: center;}

Page 28: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

28

La classe "class" du (X)HTML

Class est un attribut "générique" qui s'applique à toutes sortes d'éléments.

Une classe permet de définir un sous-ensemble. Elle peut s'appliquer à plusieurs éléments. Elle s'ajoute dans une balise du document html :

<h1 class="intro">titre 1</p><p class="intro">texte 2</p><p class="intro">texte 3</p><img class="logo">.....</p>

Utilisation dans une règle CSS :.intro {font-style: italic;}h1.intro {text-align: center;}.logo {border: 1px solid red ;}

Page 29: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

29

Eléments div et span (éléments neutres) du (X)HTML

div et span sont en général associés à un id ou une class. div : balise de bloc, délimite souvent un ensemble de balises

<div id="menu1"> <ul><li>……</li>...</ul></div><div id="piedpage"> <p>……</p> <p>……</p></div>

span ("petite étendue") : balise en-ligne, délimite une partie de texte <p>Il pris un pot de <span id="rouge">peinture rouge</span> et un pinceau.</p><p>Il pris aussi un pot de <span class="vert">peinture vert clair</span>, un

pot de <span class="vert">peinture vert foncé</span>, et un autre pinceau.</p>

Page 30: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

30

Les pseudo-classes et les pseudo-éléments

Différencie différents états d'un élément Pseudo-classes d'ancre (élément a) pour les états des liens

a:link --> lien standarda:visited --> lien visité (cliqué)a:hover --> lien pointé a:active --> lien pendant le clic

Exemple :a:link {color: red;}a:hover, a:active {text-decoration:underline ; color: gray;}

Pseudo-éléments (ici appliqués à l'élément p) p:first-line {font-variant: small-caps;} 1re ligne des paragraphes p:first-letter {font-size:2em;color:red;} 1re lettre des paragraphes

Pseudo-classe first-child (1er élément enfant d'un autre élément) a:first-child {font-variant: small-caps;} si a est un 1er enfant p:first-child em { font-weight : bold } si em est dans un p est un 1er enfant

Respecter cet ordre dans les

règles de style !

Page 31: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

31

Autres pseudo-éléments :before et :after

:before permet d'insérer un texte avant:after permet d'insérer un texte après

Exemples

td:before { content:"Prix: "; }td:after { content:" euros"; }

th:before { content:url(carre.gif)" "; }

h1:before {content: counter(nomcompteur, upper-roman) ". "}

h1:before { content:counter(niv1); counter-increment(niv1); counter-reset(niv2); }

h2:before { content:counter(niv1) ". "; counter(niv2); counter-increment(niv2);

Prix: 12,50 euros

12,50

I. titre

Produits vendus

1 Europe1.1 France…1.2 Italie…2 Asie2.1 Chine

Page 32: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

32

Combinaisons de sélecteurs

Exemples :#menu1 li {line-height: 2em;}#menu1 li a:link {color: black;}#menu1 li a:hover {color: red;}#menu1 li a:active {color: red;}p.intro {font-style: italic;}

Page 33: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

33

Propriétés de police de caractères

color background-color font-style: normal | italic | oblique font-variant: normal | small-caps font-weight : normal | bold | bolder | lighter | 100 | 700 | 900 font-size : n | p% | xx-small | small | smaller | large | larger | xx-large line-height: n p% (interligne entre 2 lignes) font-family: police1, police2, police3

Exemple de propriété raccourcie (ordre important) :font: italic small-caps bold 10pt/14pt Times

Page 34: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

34

Propriété font-family

Liste de polices (pour différents OS + police générique en dernier )font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-family: Georgia, "Bookman Old Style", serif;

5 familles de police génériques serif (ex. Times, Times new roman, Palatino, Georgia) sans-serif (ex. Geneva, Arial, Helvetica, Tahoma, Verdana) cursive (ex. Zapf-Chancery, Comic Sans MS) fantasy (ex. Western, Impact) monospace ou à taille fixe (ex. Courier)

Nom de police avec espacefont-family: Times, "Times New Roman", seriffont-family: Times, 'Times New Roman', serif

Sans-serifserif

fixe

Cursive

Page 35: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

35

Propriétés de texte

word-spacing: n | -n letter-spacing: n | -n text-decoration: none | underline | overline | blink | line-through text-transform: uppercase | lowercase | capitalize text-align: left | right | center | justify text-indent (retrait de première ligne) : n p% white-space : normal | pre | nowrap

UPPERCASE lowercase

Capitalize

Page 36: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

36

Modèle de boîte et propriétés

margin (marge

externe)

border(bordure)

padding(marge interne,

remplissage) contenu de la boîte :

texte, images…

width

height

Page 37: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

38

Propriétés de blocs (body, p, hn,…) : marge

margin-top: margin-right: margin-bottom margin-left Exemples de propriété raccourcie :On part d'en haut, on tourne dans le sens des aiguilles d'une montremargin: 5em 10em 5em 10emmargin: 5em --> 5 pour toutes les margesmargin: 5em 10em --> 5 haut/bas 10 droit/gauchemargin: 5em 3em 2em --> 5 haut 3 droit 2 bas 3 gauche

(=droit)

valeurs possibles :

n p% -n -n% auto

exemples :

5pt -12px 2em 10%

Page 38: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

39

Propriétés de boîtes : remplissage

padding-top: n p% padding-right padding-bottom padding-left padding Exemples de propriété raccourcie :on part d'en haut, on tourne dans le sens des aiguilles d'une montrepadding: 5em 10em 5em 10empadding: 5em --> 5 pour toutes padding: 5em 10em --> 5 haut/bas 10 droit/gauchepadding: 5em 3em 2em --> 5 haut 3 droit 2 bas 3 gauche

(=droit)

Page 39: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

40

Propriétés : border

border-top-width: n| thin |medium|thick (idem avec bottom) border-left-width: n| thin |medium|thick (idem avec right) border-width: 2pt 9pt 9pt 2pt border-color: red blue green black pas de couleur précisée : color de l'élément border-style: none|solid|dotted|dashed|… border-style: double solid border-top: 2px dashed red border: 2px dotted red --> 4 bordures identiques

Page 40: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

41

Utilisation de marges automatiques pour centrer un bloc

Dans la partie CSS#conteneur {

width: 600px;background-color:cyan;margin-left: auto; margin-right: auto;padding: 1em;text-align:right;

} en HTML

<body><div id="conteneur">……</div></body>

TITRE

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Sed luctus, tortor vitae elementum

dignissim, elit erat cursus felis, ut tristique velit

mauris vitae velit. In sed pede ut purus lobortis scelerisque. Nunc vel

turpis. Vestibulum fringilla nunc a libero.

Mauris molestie dolor at lectus. Proin erat quam,

feugiat a, auctor ac, tempor quis,

Page 41: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

42

Propriétés d'arrière-plan

Background-attachment: scroll | fixed Background-position: 50% 50% (ou 20px 10px)

d'abord verticale puis horizontale Background-color: #ccc Background-image: url(logo.gif) Background-repeat: repeat | repeat-x | repeat-y | no-repeat

Propriété raccourcie : Background: scroll 50% 50 % #ccc url(logo.gif) no-repeat

Page 42: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

43

Background-attachment

ligne 1ligne 2ligne 3

…ligne 7ligne 8

fixedpar défaut :

scroll

haut de l'écran

bas de l'écranaprès

défilement

…ligne 7ligne 8

Page 43: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

44

Background-repeat

no-repeatpar défaut

repeat

repeat-yrepeat-x

Page 44: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

45

Background-position

 0% 0%top leftleft top

  50% 0%

top centercenter top

top 

  100% 0%top rightright top

         

 0% 50%left centercenter left

left

  50% 50%

center center 

center

  100% 50%right centercenter right

right         

 0% 100%bottom leftleft bottom

 

  50% 100%bottom centercenter bottom

bottom

  100% 100%bottom rightright bottom

background-position: x y (valeur négative possible)

par défaut

Page 45: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

46

Propriété Float (valeur : right | left )

img {float: left;} img {float: right;}

Texte1 .......... …………………......................

Texte1 … ………………………………………………

float: left | right Utilisation : image, menu, bloc de textes,

lettrine… ex : <p>Texte1… <img .... /></p>

...................................

…………………………………

........................................

..

………………………………….......

Page 46: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

47

Mise en page d'images et de blocs avec "Float"

Galerie d'images img {float:left}

<img src="i1.gif" alt=""><img src="i2.gif" alt="">…

Blocs avec image et légendediv {float:left; width:100px;}

<div><img src="i1.gif" alt=""><p>legende 1</p></div><div><img src="i2.gif" alt=""><p>legende 2</p></div>…

Plus facile à gérer qu'en tableau

Echecs Golf Voile Peinture

Informatique

Architecture

Page 47: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

48

Propriété clear (valeur left | right | both )

code html :<p><img .... /></p><p>Texte A…</p><p id="textB">Texte B</p>

code CSS exemple 1 :img {float : right;}

code CSS exemple 2 :img {float : right;}#textB {clear: right;}

Clear permet qu'un élément se place tel qu'il n'ait rien à sa droite, à sa gauche ou ni l'un , ni l'autre.

Texte B …………………………………

Texte A …………………………

Texte B ………………….…….……….……

Texte A …………………………

Texte B ………………

Texte A …… ……………………

……………………………………………

initial

ex 1

ex 2

Page 48: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

49

Propriétés de listes

list-style-type : none | disc | circle | square | decimal | lower-roman| upper-roman | lower-alpha | upper-alpha

list-style-image : url("chemin/fichier.gif") list-style-position : outside | inside

list-style : list-style-type list-style-image list-style-position

exemples : list-style-image : url(carrebleu1.gif) list-style-type : nonelist-style : square inside

• liste avec inside

• liste avec outside

Page 49: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

50

Propriété Display

exemple 1 :<ul><li>item1</li><li>item2</li></ul>

en CSS :li {display:inline;}

exemple 2 :<a href="…">item1</a><a href="…">item2</a>

en CSS :a {display:block;}item1

item2

• item1

• item2

• item3

item1

item2

item1 item2

Display : none | inline | block | list-item

Page 50: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

51

Le positionnement

Type de positionnement : static | relative | absolute | fixed- static (statique) : flux normal du code html- relative : décalage par rapport à la position statique- absolute (absolue) : position par rapport au parent- fixed (fixe) : position par rapport à la zone de visualisation

Emplacementtop : n | p % | -n | -p % bottom : n | p % | -n | -p % right : n | p % | -n | -p % left : n | p % | -n | -p %

Superposition z-index : n | -n plus n est grand, plus l'élément est au-dessus des autres

Page 51: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

52

Le positionnement relatif

Statique : flux normal du code html

Relatif (relative)- élément dans le flux du code html - décalé par rapport à sa position statique- décalé par rapport à un bord vertical ou/et horizontal- pas de changement de position des autres éléments

Exemple :div#bloc1 {

position: relative; top: 10px; left: -30px;

}

left

top

right

bottom

10px

-30px

Page 52: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

53

Le positionnement absolu

Statique : flux normal du code html

Absolue (absolute) - élément indépendant du flux normal- perd son ancienne position dans le flux - les autres éléments peuvent prendre sa position dans le flux- positionné verticalement ou/et horizontalement (top | bottom, left | right) par rapport à l'origine de son parent- largeur et hauteur sont reportées à partir de cette nouvelle origine

Exemple 1div#bloc1 {

position: absolute; top: 10px;left: -30px;

} Exemple 2

div#bloc2 { position: absolute; top: 10px; left: -30px;width: 150px;height:75px;

}

-30px

10px

-30px

10px

Page 53: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

54

Le positionnement fixe

Statique : flux normal du code html

Fixe (fixe)- élément dans le flux du code html - décalé par rapport à sa position statique- décalé par rapport à un bord vertical ou/et horizontal- pas de changement de position des autres éléments

Exemple :div#bloc1 {

position: relative; top: 10px; left: -30px;

}

left

top

right

bottom

10px

-30px

Page 54: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

55

Le positionnement : superposition d’élément

SuperpositionL’élément de z-index supérieur est au-dessus des autres.

div#cercle {z-index: -2; ...}div#carre{z-index: 1; ...}div#triangle {z-index: 2; ...}

Page 55: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

56

Propriétés de page pour l'impression

Pages imprimées@page {

size: landscape; margin: 2cm;

} Pseudo-classes de pages imprimées

@page:first 1ère page du document@page:left pages de gauche du document@page:right pages de droite du document

propriétés de taille (size) : portrait | lanscape (paysage)

Page 56: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

57

Apparition d'une image au survol dans un menu

Partie html<div id="menu"><p>

<a href="">menu 1</a><br /> <a href="">menu 2</a><br /> <a href="">menu 3</a> </p><div>

Partie css#menu a:hover {

background-image:url(images/guillemet.png); background-repeat:no-repeat; background-position:1% 50%; padding-left:15px;

}

Page 57: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

58

Application css : bouton avec relief

Partie html<input class="bouton" type="submit'' value="Envoyer" />

Partie css (pas avec ie6) input.bouton {

border:2px outset red; font-weight:bold; cursor:pointer; }

input.bouton:hover { border:2px outset white; background-color:white; color:red; }

input.bouton:active { border:2px inset red; background-color:red; color:white; }

Page 58: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

59

Propriété content

h1:before {content:’’Rubrique ’’;}

-> ajoute l’expression avant l’élément h1 h2:after {

content:url(haut.gif) ;}

-> ajoute l’image après l’élément

Ne fonctionne pas avec IE6

Page 59: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

60

Feuille de style CSS externe liée: link

Pour tous périphériques de sortie<link rel="stylesheet" type="text/css" href="nomdufichier1.css" />

Pour différents périphériques de sortie<link rel="stylesheet" type="text/css" href="nomdufichier1.css" media="screen" /> <link rel="stylesheet" type="text/css" href="nomdufichier2.css" media="print" /><link rel="stylesheet" type="text/css" href="nomdufichier2.css" media="braille" /> <link rel="stylesheet" type="text/css" href="nomdufichier2.css" media="handheld" />

Page 60: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

61

Structure de page : noms usuels des zones

• aa• bb• ccc• dd

header

footer

container

navbarnavmai

n

footer

navbar2

menu

main

columnaside

Page 61: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

62

Structuration de la feuille de style : exemple d'ordre

Reset global (ex: marge à 0…) Base typographique (H1, H2…) Formulaire Structure de page (container, header, main, footer) Structure des templates (colonne 1, colonne 2…) Éléments de contenu Éléments de navigation Eléments-outils ou toolbox (.clearer, .floatleft) Variantes par gabarit Surcharges pour autres medias (print, handled…)

Page 62: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

63

Structuration en n feuilles de style

Disposition de la pagelayout.css

Typographie de la pagestyle.css

Typographie de la partie principale de la pagemain.css

Page 63: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

64

Héritage de propriété

Certaines propriétés héritent de la valeur de propriété du parent.

Si on applique une couleur (color) au body, tous les éléments du body héritent de cette couleur.

Attention à l'héritage de la taille de police en % et en em… Certaines propriétés n'héritent pas de la valeur de propriété

du parent. Pas d'héritage de margin et padding. On peut forcer l'héritage d'une propriété par défaut non

héritable avec la valeur inherit.{margin: inherit }

Page 64: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

65

Feuilles de style en cascades

h1.cs {color: blue; text-align:center}

@import "styl1.css"; p.cs {color: green}

<link href="styl2.css" rel="stylesheet"><h1 class="cs">texte h1.cs bleu</h1><p class="cs">texte p.cs vert</p><p>texte</>texte p normal</p>

styl1. css

styl2. css

toto.htm

à mettre en premier

même poids en cas de conflit

Page 65: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

66

Conflits de règles : priorité à la dernière

Dans un même emplacement (fichier .css, <style>), la dernière règle annule la règle antérieure.

p {font-family:arial}p {font-size: 10 pt}--> p {font-family:arial ; font-size: 10 pt ;}

p {font-family:arial ; font-size: 10 pt}p {font-size: 12 pt}--> p {font-family:arial; font-size: 12 pt ;}

Règle postérieure > Règle antérieure

Page 66: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

67

Conflits de style : priorité à la forme la plus proche

<style>p {text-align: center; font-size:10pt;}</style>…<body><p align="right">Texte 1</p><p style="text-align:left">Texte 2</p><p>Texte 3</p></body>

Style intra-ligne > Style interne > Style externe (lié ou importé)

Page 67: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

68

Conflits de style : sélecteur contextuel

h1, p { color: blue } em { color: red } h1 em { color: red }

exemples d'utilisationul li { list-style-type: disc } ul ul li {list-style-type: square ; font-size: 10pt }#menu ol a:hover {color: red; }

<h1>Chapitre I</h1><p>Texte avec <em>point important</em></p><h1>Chapitre II avec <em>appui sur un thème</em></h1>

Page 68: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

69

Rendre prioritaire avec ! important

L'ajout de !important rend prioritaire la déclaration quel que soit son emplacement.

h2 {color: maroon !important}h2 {color: yellow}

h1 { color: black ! important; background: white ! important } p { font-size: 12pt ! important; font-style: italic }

Page 69: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

71

Priorité en fonction des types de sélecteurs

sélecteur déclaration ID classe élément totala b c abc

li {...} a=0 b=0 c=1 = 001ul li {...} a=0 b=0 c=2 = 002ul ol li {...} a=0 b=0 c=3 = 003.titi {...} a=0 b=1 c=0 = 010li.titi {...} a=0 b=1 c=1 = 011ul ol li.titi {...} a=0 b=1 c=3 = 013#toto {...} a=1 b=0 c=0 = 100

Sélecteur avec identifiant > Sélecteur avec classe ou pseudo-classe > Sélecteur contextuel > Sélecteur simple

Page 70: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

73

Pour déboguer une page HTML/CSS

Ajoutez la DTD (H)HTML. Passez le code (X)HTML au validateur HTML. Passez le code CSS au validateur CSS. Ajoutez au début du CSS la règle :

* { margin : 0;padding : 0;

} Appliquez une couleur de fond aux éléments posant

problème. Placez en commentaires (/* …*/) les propriétés susceptibles

de poser problème. Essayez dans différents navigateurs et différentes versions. Recherchez sur le web ou dans des ouvrages si le problème

est connu.

Page 71: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009

74

Arbre syntaxique : exemple (fichier exercice)

html

head body

title h1 p p p p ul

li li liem em