xavier tannier [email protected] yann jacob [email protected] cascading style sheets (css)
TRANSCRIPT
Programmation Web / Bases de Données► CSS
Principes de base
• Séparation de la forme et du fond :– XHTML pour la structure et le contenu– CSS pour la mise en forme– Permet d'appliquer des styles différents au même document (par exemple,
visualisation à l'écran ou impression)– Permet surtout d'appliquer le même style à de nombreux documents !
• Recommandation du W3C• Support très inégal des navigateurs graphiques
(notamment IE6 et IE7)
2
Pour le projet
On n'utilisera que les fonctionnalités qui marchentbien dans les principaux navigateurs
Programmation Web / Bases de Données► CSS
Où mettre le code CSS ?
• Dans le fichier HTML :– <html>
<head> <style> <!-- Ici le code CSS --> </style> </head>
– Mot en <em style="color: red;">emphase</em>
• À l'extérieur (beaucoup mieux !)– <html>
<head> <link rel="stylesheet" type="text/css"
href="style.css" /> </head>
3
Programmation Web / Bases de Données► CSS
CSS : Syntaxe
4
<html> <body> <h1>Introduction</h1> <h1>(X)HTML</h1> <h2>Les bases</h2> <h3>Rappels de XML</h3> <h2>Les balises</h2> </body></html>
CSSHTML
/* sélecteur { attribut: valeur } */
body { background: black; font-family: Arial, Verdana;
}/* sélecteur universel */* { color: #cccccc; }/* sélecteur multiple */h1, h2, h3 { font-style: italic; font-family: Georgia, sans-serif;}/* sélecteur unique */h3 { color: red; }
Programmation Web / Bases de Données► CSS
Les sélecteurs de classe
5
body { background: #111111; color: #cccccc;
}p.citation {
text-align: center;color: white;border-style: solid;
}.normal {
font-size: 120%;}
<html> <body> <p class="normal">Comme le
disait Napoléon :</p> <p class="citation">Du haut de ces pyramides, 40 siècles vous contemplent</p> </body></html>
CSSHTML
Programmation Web / Bases de Données► CSS
Les sélecteurs d’identifiant
6
body { background: black; color: white;
}p#citation {
width: 50%;border-style: solid;background: blue;
}#normal {
font-size: 120%;}
<html> <body> <p id="normal">Comme le
disait Napoléon :</p> <p id="citation">Et il vous suffira de dire : "J'étais à Austerlitz" pour que l'on vous réponde : "Voilà un brave !" </p> </body></html>
CSSHTML
Programmation Web / Bases de Données► CSS
Les sélecteurs contextuels
7
/* Met les "em" en bleu dans les items */
li em {color: green;font-weight: bold;
}/* diminue la taille du texte des listes imbriquées */ul ol, ol ul, ul ul, ol ol {
font-size: 80%;}
<html> <body> <em>Les balises :</em> <ul> <li>de <em>titre</em></li> <li>d'emphase</li> <li>de listes : <ul><li>ordonnées</li> <li>non ordonnées</li> <li>de définition</li></ul> </li> </ul> </body></html>
CSSHTML
NB : "titre" est en vertmais pas "Les balises"
Programmation Web / Bases de Données► CSS
Les pseudo-éléments et les pseudo-classes
8
/* Met la 1ère lettre de chaque paragraphe en très gros */
p:first-letter {font-size: 250%;
}/* Colore les liens en rouge */a:link {
color: red;text-decoration: none;
}
<html> <body> <p>Comme le disait <a href="./napo.html">Napoléon</a> :</p> <p>Le doute est l'ennemi des grandes entreprises</p> </body></html>
CSSHTML
Programmation Web / Bases de Données► CSS
Les pseudo-éléments et les pseudo-classes
• Pseudo-éléments– :first-letter première lettre de l'élément– :first-line première ligne de l'élément– :before insérer un contenu avant l'élément– :after insérer un contenu après l'élément
• Pseudo-classes– :link lien– :visited lien déjà visité– :hover élément survolé– :focus élément ayant le focus– :active lien activé (cliqué)
9
à utiliser dans cet ordre !(cf règles de cascades)
Programmation Web / Bases de Données► CSS
"div" et "span"
• Balises génériques pour appliquer un style à une portion de texte qui n’a pas sémantique particulière (titre, liste, paragraphe,…)
• div définit un bloc de texte (block-level element) : boîte rectangulaire, retour à ligne à la fin.
• span définit un morceau de texte à l’intérieur d’un bloc (inline element) : boîte colle au texte, pas de div dans un span !
10
<html> <body> <div class="menu">
... </div> <div class="contenu"> Ce site répertorie des citations de
<span class="personne">Napoléon Bonaparte</span>. </div>
Programmation Web / Bases de Données► CSS
Positionnement
• Positionnement normal : static• Le navigateur positionne les éléments en fonction de leurs types
(block-level ou inline) et de leurs ordres d’apparition dans le code source de la page
11
<html> <body> <div>
Ici se trouve le menu </div> <div> Ce site répertorie des citations de <span>Napoléon
Bonaparte</span>. </div> </body></html>
Programmation Web / Bases de Données► CSS
Positionnement (relatif)
• Décalage par rapport au positionnement static
12
<html> <body> Ceci est un exemple avec
<span class="haut">du texte en haut</span> et <span class="bas">du texte en bas</span> </body></html>
CSSHTMLspan.haut {
position: relative;bottom: 8px;background-color: #ffff00;
}span.bas {
position: relative;bottom: -8px;background-color: #5555ff;
}
Programmation Web / Bases de Données► CSS
Positionnement (absolu)
• Position arbitraire. L’ordre dans le code source n’a plus d’importance
• Pour le positionnement des autres éléments : comme s’il n’existait pas
13
<html> <body> <div class="menu">
Ici se trouve le menu </div> <div class="contenu"> Ce site répertorie des citations de Napoléon Bonaparte. </div> </body></html>
div.menu {position: absolute;top: 10px;left: 10px;border-style: dotted;
}div.contenu {
position: absolute;bottom: 10px;right: 10px;border-style: dashed;border-color: red;
}
CSSHTML
en pourcentage, c'est encore mieux...
Programmation Web / Bases de Données► CSS
Positionnement (absolu)
• Position arbitraire. L’ordre dans le code source n’a plus d’importance
• Pour le positionnement des autres éléments : comme s’il n’existait pas
14
<html> <body> <div class="contenu"> Ce site répertorie des citations de Napoléon Bonaparte. </div> <div class="menu"> Ici se trouve le menu </div></body></html>
div.menu {position: absolute;top: 10px;left: 10px;border-style: dotted;
}div.contenu {
position: absolute;bottom: 10px;right: 10px;border-style: dashed;border-color: red;
}
CSSHTML
Programmation Web / Bases de Données► CSS
Positionnement (absolu)
• Position arbitraire. L’ordre dans le code source n’a plus d’importance
• Pour le positionnement des autres éléments : comme s’il n’existait pas
15
<html> <body> <div class="contenu"> Ce site répertorie des citations de Napoléon Bonaparte. </div> <div class="menu"> Ici se trouve le menu </div> <div> Lorem ipsum... </div></body></html>
div.menu {position: absolute;top: 10px;left: 10px;border-style: dotted;
}div.contenu {
position: absolute;bottom: 10px;right: 10px;border-style: dashed;border-color: red;
}
CSSHTML
Programmation Web / Bases de Données► CSS
Marges
16
<html> <body> <div class="menu">
Ici se trouve le menu </div> <div class="contenu"> Ce site répertorie des citations de Napoléon Bonaparte. </div> </body></html>
div.menu {position: absolute;top: 0px; left: 0px;width: 10%;padding-top: 30px;padding-left: 2px;border-style: solid;
}div.contenu {
position: absolute;margin-left: 15%;border-style: solid;border-color: red;
}
CSSHTML
marge par défaut du navigateur !
Programmation Web / Bases de Données► CSS
Marges et bordures
17
contenu
padding (marge interne)
margin (marge externe)
border (bordure)• Bordures :
– border– border-left, border-right,
border-top, border-bottom
• Marges externes:– margin– margin-left, margin-right,
margin-top, margin-bottom
• Marges internes :– padding– padding-left,
padding-right, padding-top, padding-bottom
width
height
• Tailles :– Height width– min-height min-width– max-height max-width
Programmation Web / Bases de Données► CSS
Bordures
18
<html> <body> <span class="i1"> Peu important </span><br /><br /> <span class="i2"> Important </span><br /><br /> <span class="i3"> Vital </span> </body></html>
span.i1 {border-style: dotted;border-color: #888888;border-width: thin;
}span.i2 {
border-style: dashed;border-color: blue;border-width: medium;
}span.i3 {
border-style: solid;border-color: red;border-width: thick;
}
HTML
ou une valeur numérique
CSS
none, solid, dotted, dashed,
double, groove, ridge, inset, outset
Programmation Web / Bases de Données► CSS
Bordures des tableaux
19
<html> <body> <table class="fusion"> <tr><td>A</td><td>1</td></tr> <tr><td>B</td><td>2</td></tr> </table><br /> <table class="fission"> <tr><td>A</td><td>1</td></tr> <tr><td>B</td><td></td></tr> </table> </body></html>
* {font-size: xx-large;
}tr, td, table {
border: 1px solid black;}.fusion {
border-collapse: collapse;}.fission {
border-collapse: separate;border-spacing: 2px;empty-cells: show;
}
CSSHTML
factorisation...
CSS
par défaut : hide
Programmation Web / Bases de Données► CSS
Tableaux
20
<html> <body> <table class="tab1"> <caption>Légende en haut </caption> <tr><td>A</td><td>1</td></tr> <tr><td>B</td><td></td></tr> </table><br /> <table class="tab2"> <caption>Légende en bas </caption> <tr><td>A</td><td>1</td></tr> <tr><td>B</td><td></td></tr> </table> </body></html>
tr, td, table {border: 1px solid black;
}.tab1 {
caption-side:top;}.tab1 tr td {
width: 100px; height: 50px;}.tab2 {
caption-side:bottom;}.tab1 tr td {
width: 200px; height: 100px;}
CSSHTML
Programmation Web / Bases de Données► CSS
Propriétés de longueur
• Les valeurs sous forme de pourcentage (par rapport à la valeur courante)Mais attention, tous les navigateurs ne réagissent pas de la même façon
• Les valeurs relatives en fonction de la police :– em : largeur du caractère 'm' pour la police courante– ex : hauteur du caractère 'x'
• Les valeurs relatives à l'écran– px : le nombre de pixels
• Les valeurs absolues :– mm, cm, in (= 2.54 cm), pt (= 1/72 in), pc (= 12 pt)– à utiliser pour un mode impression, mais pas pour l'écran !
21
Programmation Web / Bases de Données► CSS
Polices
• font-family. Police ou famille de police (serif, sans-serif, cursive, fantasy, monospace). Attention, les polices supportées dépendent fortement du navigateur ! Déclarez une famille générique après la police (séparées par une virgule) pour substituer une police non trouvée par une autre.
• font-size. Taille de la police : valeur numérique ou xx-small, x-small, small, medium, large, x-large, xx-large.
• font-style. Style de la police : italic, oblique, normal.• font-variant. Casse des caractères : normal, small-caps.• font-weight. Graisse des caractères : normal, bold, bolder, lighter.• line-height. Espace interligne (ex. : 150% ou 1.5em).• text-decoration. Ornement du texte : none, underline. (souligné),
overline (surligné), blink (clignotant), line-through (barré).
22
Programmation Web / Bases de Données► CSS
Espacement, alignement, indentation
• letter-spacing. Espacement des lettres (peut être négatif !).• word-spacing. Espacement des mots.
• text-align. Justification et alignement : left, right, center, justify.
• vertical-align. Alignement vertical : baseline (défaut), top, bottom, middle, super (exposant), sub (indice), etc.
• text-indent. Indentation de la première ligne du texte (longueur).
23
Programmation Web / Bases de Données► CSS
Couleurs et fond
24
<html> <body> <div class="contenu"> Contenu </div> <div class="pub"> Partez au soleil ! </div> </body></html>
body { background-color: purple;}.contenu { color: rgb(200, 250, 0); height: 400px; background-image:url("piece.gif"); background-repeat: repeat;}.pub { float: right; width: 470px;
height: 300px; color: white; background-image:url("plage.jpg"); background-repeat: no-repeat; background-position: right top;}
CSSHTML
no-repeat, repeat,repeat-x, repeat-y
CSS
ou des valeurs numériques
Programmation Web / Bases de Données► CSS
Couleurs
• Couleurs prédéfinies
• Code RGB : rgb(150, 150, 150) ou rbg(10%, 25%, 100%)• Valeur hexadécimale• Outils pour faciliter la définition de nouvelles couleurs :
– ColorBlender http://www.meyerweb.com/eric/tools/color-blend/– Color Schemer http://www.colorschemer.com/online.html– La boîte à couleurs http://pourpre.com/colorbox/index.php
– et beaucoup d'autres...
25
Programmation Web / Bases de Données► CSS
Plus sur les blocs… débordement
• Si la hauteur d'un bloc est contrainte, le contenu peut déborder...• Propriété overflow :
– visible, rend visible tout ce qui dépasse. – hidden, cache tout ce qui dépasse. – scroll, met toujours une barre de défilement horizontale et verticale. – auto, met une barre de défilement horizontale ou verticale si besoin.
• Voir aussi :– overflow-x, overflow-y– clip (pour définir la zone visible d'un élément)– scrollbar-face-color, scrollbar-track-color, scrollbar-arrow-color,
etc. (mais attention à la compatilité avec les navigateurs)
26
Programmation Web / Bases de Données► CSS
Plus sur les blocs… flottement
Un objet flottant est positionné à un endroit précis et le reste du contenu s'écoule autour de lui. Le flottement est défini par la propriété float :– left : l'écoulement se fera par la droite– right : l'écoulement se fera par la gauche– none
– La propriété clear (none, left, right, both) empêche que l'élément ne se colle au précédent de son côté gauche, droit ou les deux.
27
Programmation Web / Bases de Données► CSS
Plus sur les blocs… flottement
28
<html> <body> <img id="img1" src="chamois.jpg" /> <img id="img2" src="mouflon.jpg" /> <img id="img3" src="bouquetin.jpg" /> <img id="img4" src="marmotte.jpg" /> <img id="img5" src="ours.jpg" /> Les Alpes connaissent une faune sauvage diverse et variée qui a su s'adapter aux reliefs accidentés et aux altitudes extrêmes. Du pied des Alpes à son sommet le plus haut qu'est le Mont-Blanc, la faune varie suivant l'altitude.
</body></html>
#img1 { float:left;}#img2 { float:right;}#img3 { float:left;}#img4 { float:left; clear: left;}#img5 { float:left; clear: left;}
CSSHTML CSS
img1
img2
img3
img4
img5
Programmation Web / Bases de Données► CSS
Plus sur les blocs… positionnement
Le positionnement est défini par la propriété position (couplée avec left, right, bottom et top)– static : left, right, bottom et top ne s'appliquent pas– relative : positionnement relatif (voir les exemples au début du cours)– absolute : positionnement absolu (voir les exemples au début du cours)– fixed : positionnement absolu par rapport à la fenêtre d'affichage (ne
bouge pas si on fait défiler la page).
– La propriété visibility (visible, hidden, collapse) permet de cacher totalement l'élément
29
Programmation Web / Bases de Données► CSS
Règles de cascades
• Plusieurs sources– Vos règles CSS (CSS auteur)– Les règles CSS de l’utilisateur– Les règles par défaut du navigateur
• Plusieurs méthodes– Pour chaque élément XHTML : attribut style="..."– Intégré dans le XHTML : balise <style>...</style>– Fichiers externes + balises <link rel="stylesheet"/>
30
Plus prioritaire
Moins prioritaire
Programmation Web / Bases de Données► CSS
Règles de cascades
• Plusieurs règles pour un élément– id– class– sélecteur contextuel– nom de balise
• S’il y a encore des conflits : ordre de déclaration dans le code source
.contenu {
border-style: solid;
border-color: red !important;
}
31
Plus prioritaire
Moins prioritaire
Pseudo-classes pour les liensSélecteur universel *
Programmation Web / Bases de Données► CSS
Note sur le style des formulaires
• Traditionnellement, on utilisait des tables pour mettre en page un formulaire. Interdit en XHTML !
• On utilise CSS pour la mise en page, comme pour le reste.
• Il est parfois utile de considérer certains éléments comme des blocs (pour les faire flotter par exemple) :
label {
display: block;
}
32
Programmation Web / Bases de Données► CSS
Références
• Les spécifications de CSS :– http://www.w3.org/TR/REC-CSS1– http://www.w3.org/TR/REC-CSS2/
• Des livres :– HTML et XHTML : La Référence , O’Reilly– CSS : La Référence , O’Reilly
33