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