Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009.
-
Upload
ygraine-bru -
Category
Documents
-
view
113 -
download
1
Transcript of Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009.
![Page 1: Styles CSS Feuilles de styles en cascade Cascading Style Sheets Florence Petit24 novembre 2009.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/1.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/2.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/3.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/4.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/5.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/6.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/7.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/8.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/9.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/10.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/11.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/12.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/13.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/14.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/15.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/16.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/17.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/18.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/19.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/20.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/21.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/22.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/23.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/24.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/25.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/26.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/27.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/28.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/29.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/30.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/31.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/32.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/33.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/34.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/35.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/36.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/37.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/38.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/39.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/40.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/41.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/42.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/43.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/44.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/45.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/46.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/47.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/48.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/49.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/50.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/51.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/52.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/53.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/54.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/55.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/56.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/57.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/58.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/59.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/60.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/61.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/62.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/63.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/64.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/65.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/66.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/67.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/68.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/69.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/70.jpg)
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.](https://reader035.fdocument.pub/reader035/viewer/2022062307/551d9d8f497959293b8c4f1d/html5/thumbnails/71.jpg)
74
Arbre syntaxique : exemple (fichier exercice)
html
head body
title h1 p p p p ul
li li liem em