Post on 03-Apr-2015
Styles CSS
Feuilles de styles en cascadeCascading Style Sheets
Florence Petit 24 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/
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
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>
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
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>
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
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;
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
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 ;
}
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
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]-->
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
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
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
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>
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>...
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>
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; }
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>
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 :*
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;}
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;}
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.
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>
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]
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;}
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 ;}
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>
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 !
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
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;}
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
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
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
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
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%
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)
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
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,
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
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
44
Background-repeat
no-repeatpar défaut
repeat
repeat-yrepeat-x
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
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>
...................................
…………………………………
........................................
..
………………………………….......
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
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
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
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
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
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
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
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
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; ...}
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)
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;
}
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; }
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
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" />
61
Structure de page : noms usuels des zones
• aa• bb• ccc• dd
header
footer
container
navbarnavmai
n
footer
navbar2
menu
main
columnaside
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…)
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
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 }
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
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
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é)
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>
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 }
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
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.
74
Arbre syntaxique : exemple (fichier exercice)
html
head body
title h1 p p p p ul
li li liem em