Xavier Tannier [email protected] Yann Jacob [email protected] Cascading Style Sheets (CSS)

Xavier Tannier

[email protected]

Yann Jacob

[email protected]

Cascading Style Sheets(CSS)

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


Où mettre le code CSS ?

• Dans le fichier HTML :– <html>

<head> <style>  </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


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; }


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


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


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"


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


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)


"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>


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>


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;

}


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


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...





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.contenu {


}

CSSHTML





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.contenu {


}

CSSHTML


Marges

16


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 !


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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 *


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


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

Documents

Xavier Tannier [email protected] Yann Jacob [email protected] Cascading Style Sheets (CSS)