Vous êtes sur la page 1sur 6

Plan

Programmation Internet Cours 5


Kim Nguyn http://www.lri.fr/~kn

1. Systme d'exploitation  2. Rseau et Internet  3. Web  4. CSS


4.1 4.1 4.2 4.3 Introduction Bo tes Autres proprits Slecteurs

3 dcembre 2012

1 / 23

2 / 23

Cascading Style Sheets (CSS)

L'attribut style

CSS : format permettant de dcrire le style graphique des lments contenu dans une page HTML. On peut appliquer un style CSS :

<a href="..." style="color:red;" >Un lien</a> Appercu : Un lien Inconvnients :


On doit recopier l'attribut pour tous les <a > de la page. Di

un lment, en utilisant l'attribut style une page, en utilisant l'lment <style> dans la section <head> un ensemble de pages en rfrencant un chier .css contenant les informations de style.

Exemple : mettre les liens hypertextes en rouge

cile modi er.

3 / 23

4 / 23

L'lment <style>
<html> <head> <style> a { color: red; } </style> </head> <body> <a href="...">Lien 1</a> <a href="...">Lien 2</a> </body> </html> Fichier HTML

Fichier CSS

<html> <head> <link href="style.css" type="text/css" rel="stylesheet"/> </head> ... </html> Fichier style.css a { color: red; }

Appercu : Lien 1 Lien 2 Inconvnient : ne concerne que la page contenant <style>


On peut appliquer le mme style

plusieurs pages

On peut tester facilement un autre style (en changeant le chier

style.css)

5 / 23

6 / 23

Syntaxe
Une proprit CSS est d nie en utilisant la syntaxe : nom_prop : val_prop;
si on utilise l'attribut style d'un lment :

Plan

1. Systme d'exploitation  2. Rseau et Internet  3. Web  4. CSS


4.1 4.2 4.2 4.3 Introduction Bo tes Autres proprits Slecteurs

<a style="color:red;border:2pt;background:blue;" >Un lien</a>


si on utilise l'lment style ou un chier .css :

a { color: red; border: 2pt; /* Un commentaire */ background: blue; } h1 { color: green; text-decoration: underline; }
7 / 23

8 / 23

Longueurs
CSS permet de spci er des longueurs (position, taille des lments,. . . ). Les longueurs doivent comporter une unit. Les units rconnues sont : px : pixel in : un pouce (2.54cm) cm : centimtre mm : millimtre pt : point (1/72me de pouce pc : pica (12 points) em : 1em est la taille de la police courante ex : 1ex est la hauteur du caractre x dans la police courante (environ 0.5em) % : pourcentage de la taille totale Exemple : p { width: 20%; }
9 / 23

Bo tes
Chaque lment de la page HTML possde une bo te rectangulaire qui encadre le contenu de l'lment : marge (margin) bordure (boder) ajustement (padding)

Lien 2
10 / 23

Margin, Border et Padding


On peut spci er une, deux, trois ou quatres longueurs pour chaque proprit :
a { padding: 10pt 20pt 5pt 0pt; /* haut, droit, bas, gauche */ margin: 5pt 10pt; /* haut + bas, droite + gauche */ border: 1pt; /* tout gal */ border-color:red blue green; /* haut, droite + gauche, bas */ } Cest le<a href="...">Lien 2</a>.

Display

La proprit display contrle le type d'a

chage d'un lment :

none : l'lment n'est pas dessin et il n'occupe pas d'espace inline : l'lment est intgr la ligne courante. Ses dimensions sont celles du contenu. Exemple : <a ...>, <b>, <i> sont des lments avec display:inline par dfaut. block : l'lment est dessin sur sa propre ligne. Ses dimensions sont calcules partir de la bo te qui le contient. Exemple : <p>, <body> sont des lments avec display:block par dfaut.

11 / 23

12 / 23

Display (exemple)
Le <a href="...">Lien 1</a>, le <a href="...">Lien 2</a> et le <a href="...">Lien 3</a>

Positionnement

Le type de positionnement est donn par la proprit position : static : positionnement automatique xed : positionnement par rapport la fentre du navigateur (la bo te est supprime du ot) relative : positionnement relatif la position normale absolute : positionnement absolu par rapport au n ud anctre le plus proche tant fixed Pour fixed, relative et absolute, on peut prciser les proprits : top, bottom, left, right.

a { display: inline; ... } a { display: block; ... }

13 / 23

14 / 23

Positionnement (exemple)
a { ... position:static; } a { ... position:fixed; top:20pt; right:20pt; } a { ... position:relative; left:10pt; bottom:-5pt; } a { ... position:absolute; bottom:0pt; right:0pt; }

Plan

1. Systme d'exploitation  2. Rseau et Internet  3. Web  4. CSS


4.1 4.2 4.3 4.3 Introduction Bo tes Autres proprits Slecteurs

15 / 23

16 / 23

Couleurs

Styles

Les couleurs peuvent tre donnes :


par nom : red, purple, green, blue, . . . par composantes : rgb(x ,y ,z ) avec 0 x , y , z 255 en hexadcimal : #xxyyzz avec 00 xx , yy , zz FF

Certains lments graphiques peuvent avoir un style : border-style : none, solid, dashed, dotted, double, . . . overflow : un lment est plus grand que la surface de la fentre. On dessine son contenu (visible), on ne dessine pas le contenu en dehors (hidden), on a che toujours des barres de d lement (scroll) ou on les a che seulement en cas de besoin (auto) list-style : square, circle, disc, decimal, . . .

Les proprits faisant intervenir les couleurs sont : background : couleur d'arrire plan

color : couleur d'avant-plan (souvent celle du texte) border-color : couleur de la bordure (accepte jusqu' 4 couleurs)

17 / 23

18 / 23

Proprits du texte

Proprits de la police

Les proprits suivantes s'applique au texte contenu dans l'lment : direction : ltr ou rtl (de gauche droite ou de droite gauche) text-transform : capitalize, lowercase, uppercase text-decoration : underline, overline, line-through,. . . text-align : left, right, center, justify text-ident : longueur qui donne le dcalage de la premire ligne de texte (retrait de dbut de paragraphe)

Les proprits suivantes s'applique au texte contenu dans l'lment : font-family : liste de noms de police spares par des virgules (ex : Helvetia, Dolly, sans-serif) font-style : normal, italic font-weight : normal, lighter, bold, bolder font-size : soit une longueur, soit : xx-small, x-small, small, medium, large, x-large, xx-large

19 / 23

20 / 23

Plan

Slecteurs
On peut slectionner nement les lments auxquels s'appliquent un style : X { ... } : tous les lments X X.foo { ... } : tous les lments X pour lesquels l'attribut class vaut foo X#foo { ... } : l'lment X dont l'id vaut foo X Y { ... } : les lments X qui sont n'importe quel niveau d'imbrication sous un X X > Y { ... } : les lments Y qui juste en dessous d'un X X:link { ... }: un lien non encore visit X:visited { ... }: un lien dj visit X:hover { ... }: lment survol par le pointeur

1. Systme d'exploitation  2. Rseau et Internet  3. Web  4. CSS


4.1 4.2 4.3 4.4 Introduction Bo tes Autres proprits Slecteurs

21 / 23

22 / 23

<div> et <span>
Pour appliquer un style un ensemble d'lments ou du texte, on peut les regrouper sous un lment <div> (de type block) ou <span> (de type inline). On peut utilise l'attribut class ou id pour choisir le style appliquer :
div.par1 { background: #eeeeee; width: 200pt; } div.par2 { position:fixed; background: #aaaaff; width: 150pt; } span.cap { text-transform: uppercase; color:red; } span.coin { position: absolute; right: 0pt; bottom: 0pt; }

23 / 23