View
123
Download
1
Category
Preview:
Citation preview
Xavier Tannierxavier.tannier@limsi.fr
Cascading Style Sheets(CSS)
Programmation Web
CSSXavier Tannier
Objectifs
• Pré-requis :– (X)HTML
• Contenu :– Les bases de CSS– Un condensé rapide de CSS 3
2
Programmation Web
CSSXavier Tannier
Principes de base
• Séparation de la forme et du fond :– (X)HTML 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
Pour le projetOn n'utilisera que les fonctionnalités qui marchent
bien dans les principaux navigateurs
3
Programmation Web
CSSXavier Tannier
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>
4
Programmation WebXavier Tannier
CSS
CSS : Syntaxe
5
<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 WebXavier Tannier
CSS
Les sélecteurs de classe
6
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 WebXavier Tannier
CSS
Les sélecteurs d’identifiant
7
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 WebXavier Tannier
CSS
Les sélecteurs contextuels
8
/* 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 WebXavier Tannier
CSS
Les pseudo-éléments et les pseudo-classes
9
/* 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
CSSXavier Tannier
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é)
10
à utiliser dans cet ordre !(cf règles de cascades)
Programmation Web
CSSXavier Tannier
"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 !
11
<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
CSSXavier Tannier
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
12
<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
CSSXavier Tannier
Positionnement (relatif)
• Décalage par rapport au positionnement static
13
<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
CSSXavier Tannier
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="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
CSSXavier Tannier
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></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
CSSXavier Tannier
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
16
<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 WebXavier Tannier
CSS
Marges
17
<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 WebXavier Tannier
CSS
Marges et bordures
18
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 WebXavier Tannier
CSS
Bordures
19
<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 WebXavier Tannier
CSS
Bordures des tableaux
20
<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 WebXavier Tannier
CSS
Tableaux
21
<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
CSSXavier Tannier
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 !
22
Programmation Web
CSSXavier Tannier
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é).
23
Programmation Web
CSSXavier Tannier
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).
24
Programmation WebXavier Tannier
CSS
Couleurs et fond
25
<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
CSSXavier Tannier
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...
26
Programmation Web
CSSXavier Tannier
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)
27
Programmation Web
CSSXavier Tannier
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.
28
Programmation WebXavier Tannier
CSS
Plus sur les blocs… flottement
29
<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
CSSXavier Tannier
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
30
Programmation Web
CSSXavier Tannier
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"/>
31
Plus prioritaire
Moins prioritaire
Programmation Web
CSSXavier Tannier
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;
}
32
Plus prioritaire
Moins prioritaire
Pseudo-classes pour les liensSélecteur universel *
Programmation Web
CSSXavier Tannier
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;}
33
Programmation Web
CSSXavier Tannier
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
34
CSS 3
35
Programmation Web
CSSXavier Tannier
CSS 3
• De nouvelles fonctionnalités et de nouveaux attributs• Souvent spécifique à un navigateur
– -moz-transform (pour les navigateurs Mozilla : Firefox)– -webkit-transform (pour les navigateurs WebKit : Safari et Chrome)– -o-transform (pour Opéra)– -ms-transform (pour Internet Explorer)
• Des prises en compte très variables selon les navigateurs– Implémentations réalisées ou pas– Interprétations parfois variables
• À manipuler avec précautions• Tous les détails : http://www.w3schools.com/css3/default.asp
Programmation Web
CSSXavier Tannier
CSS 3 : quoi de neuf ?
• Bordures :– Coins arrondis– Ombres– Bordures avec une image
• Fonds :– Taille modifiable– Fonds multiples
• Effets textuels :– Ombres– Césures de mots
Programmation Web
CSSXavier Tannier
CSS 3 : quoi de neuf ?
• Polices de caractères :– Utiliser n’importe quelle police True Type, OpenType (tous sauf IE) ou
Embedded OpenType (IE seulement)– À utiliser avec précaution et bien vérifier le rendu sur tous les navigateurs
• Transformations 2D :– Translation– Rotation– Taille– Torsion– Etc.
• Transformations 3D :– Mêmes effets mais sur 3 dimensions
Programmation Web
CSSXavier Tannier
CSS 3 : quoi de neuf ?
• Transitions, animations :– Changements chronométrés de valeurs d’attributs
• Multi-colonnes :– Texte sur plusieurs colonnes
• Interface utilisateur :– Éléments redimensionnables– etc.
Recommended