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

Xavier [email protected]

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


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


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


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"


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


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




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


}

CSSHTML

Programmation Web

CSSXavier Tannier




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


}

CSSHTML


CSS

Marges

17


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 !


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


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


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


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


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

http://www.meyerweb.com/eric/tools/color-blend/

http://www.colorschemer.com/online.html

http://pourpre.com/colorbox/index.php

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


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

http://www.w3.org/TR/REC-CSS1

http://www.w3.org/TR/REC-CSS2/

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

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


• 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


• Transitions, animations :– Changements chronométrés de valeurs d’attributs

• Multi-colonnes :– Texte sur plusieurs colonnes

• Interface utilisateur :– Éléments redimensionnables– etc.

Documents

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