Feuilles de style (CSS)

v1.0

Cours CSS v1.0

SOMMAIRE :
QU'EST-CE QUE LES CSS ? .......................................................................................... 4 VERSIONS DE CSS..........................................................................................................4 QU'EST CE QU'UN STYLE ? .................................................................................................4 PROPRIETES DES CSS ......................................................................................................4 DEFINITION DES REGLES CSS .................................................................................... 5 IL Y A 4 TYPES DE REGLES .................................................................................................5 OU PLACER LES REGLES CSS? ............................................................................................5 CREATION DE LA FEUILLE EXTERNE........................................................................................6 SYNTAXE DES REGLES CSS ......................................................................................... 6 CASSE ........................................................................................................................6 CREER UNE CLASSE PERSONNALISEE ......................................................................................7 COMMENTAIRES .............................................................................................................7 CLASS ET ID ............................................................................................................... 8 DIFFERENCE ENTRE CLASS ET ID ..........................................................................................8 CASCADE, CONFLITS ET HERITAGES........................................................................... 9 CONFLITS.....................................................................................................................9 HERITAGE ....................................................................................................................9 UNITES DE LONGUEUR ............................................................................................. 10 UNITES DE LONGUEUR ABSOLUES - (A EVITER) .......................................................................10 UNITES DE LONGUEUR RELATIVES - ( RECOMMANDEES) ..............................................................11 PROPRIETES............................................................................................................. 12 PROPRIETES DU TEXTE ....................................................................................................12 PROPRIETES DES LISTES ..................................................................................................13 LES RACCOURCIS ..................................................................................................... 14 POUR LE TEXTE ............................................................................................................14 POUR LES LARGEURS DE MARGES ET REMPLISSAGE ...................................................................14 LES BORDURES ............................................................................................................15
LES COULEURS .............................................................................................................15

LES BOITES : REMPLISSAGE ET MARGES .................................................................. 16 LES MARGES ...............................................................................................................16 LE REMPLISSAGE (PADDING).............................................................................................16
Page 2/30

Cours CSS v1.0

LES BOITES .............................................................................................................. 17 DEFINITION ................................................................................................................17 LE POSITIONNEMENT DES BOITES : STATIQUE, RELATIF, ABSOLU ..................................................18 Notion de flux .......................................................................................................18 Statique (par dfaut) .............................................................................................18 Relatif (dans le flux) = position : relative..................................................................18 Absolu (hors du flux) = position : absolute ...............................................................18 LE POSITIONNEMENT DES BOITES : LE FLOTTEMENT ..................................................................19 Comprendre le flottement .......................................................................................19 Faire des colonnes .................................................................................................20 Sortir du flottement = clear : left, right ou both ........................................................20 LA NOTION DE DEBORDEMENT : OVERFLOW ...........................................................................21 ARRIERE-PLAN : IMAGES ......................................................................................... 22 REPETITION ................................................................................................................22 REPETITION HORIZONTALE ...............................................................................................22 REPETITION VERTICALE ...................................................................................................23 PAS DE REPETITION .......................................................................................................23 REMPLACEMENT DE LA PUCE DE LISTE ..................................................................................23 PSEUDO CLASSES DE LIENS ..................................................................................... 24 "DECORATION" DU TEXTE ................................................................................................24 ELEMENTS DE TYPE : BLOCK ..................................................................................... 25 ELEMENTS DE TYPE : INLINE .................................................................................... 26 ELEMENTS NON AFFICHES ........................................................................................ 26 AFFICHAGE DE TYPE TABLEAU ................................................................................. 27 AUTRES TYPES D'AFFICHAGE ................................................................................... 27
DISPLAY: INLINE-BLOCK ..................................................................................................27 DISPLAY: LIST-ITEM

......................................................................................................27

STYLES DIVERS ........................................................................................................ 28 CURSEUR ...................................................................................................................28 UNE FEUILLE PAR MEDIA ......................................................................................... 29 LIENS : .....................................................................................................................30 LIVRES :....................................................................................................................30

Page 3/30

Cours CSS v1.0

Qu'est-ce que les CSS ?

Pourquoi utiliser des feuilles de style ? Cascading Style Sheet (CSS) Le principe de base est le suivant : il faut sparer le contenu de la page, de son apparence. La page html contient l'information, et non la faon dont l'information est affiche. Pour un unique contenu : plusieurs affichages sont possibles. On peut penser des affichages monochrome, sur de petits crans, oral (le contenu de la page web est lu), une impression papier, impression sur des transparents, impression en braille VERSIONS DE CSS CSS1 publi en 1996 . CSS-P (CSS positioning) permet le positionnement d'lments. CSS2 est une recommandation de mai 1998 qui inclut les attributs des deux prcdentes versions. L'accent a t mis sur l'accessibilit et la capacit avoir un style diffrent selon les media. CSS3 : encore en cours de construction. Nouveauts : multicolonnage, SVG, styles sur les polices (embossage...), arrondir les coins des botes, utiliser des images de fond dans les bordures, des ombres portes... QU'EST CE QU'UN STYLE ? Les styles regroupent diffrents attributs, tels que les choix de police, de taille, de couleur appliquer des titres, des sous-titres C'est ce que va faire le CSS : permettre de dfinir ces attributs dans la page html l'aide d'un code spar. Par exemple, les balises html comme <h1></h1> qui par dfaut possdent une taille ou une graisse non modifiable en html, verront ces caractristiques compltement redfinissables en CSS. PROPRIETES DES CSS Police : taille, style, couleur. Texte : alignement, casse, interlignage, espace entre les mots et les lettres. Arrire-plans : couleur ou images. Bords et marges : marges, remplissages, largeur, hauteur. Bordures : style, paisseurs, couleurs. Interface : puces, indentation, curseur. Positionnement : emplacement exact sur l'cran. Affichage et visibilit : si un lment apparat et comment. Impression : comment dfinir l'aspect de la page l'impression.

Page 4/30

Cours CSS v1.0

Dfinition des rgles CSS

IL Y A 4 TYPES DE REGLES Les slecteurs html. Il est possible de redfinir les balises html en CSS. Les classes. Il s'agit de rgles librement choisies qu'on peut appliquer n'importe quelle balise html. les pseudo-classes de lien. Les ID. peu prs le mme principe que les classes, mais ne peuvent s'appliquer qu'une seule fois dans une page. Toutes les rgles ont la mme structure :

Slecteur (balise html, classe, pseudo-classe ou ID) Proprits qui identifient ce qui est dfini. Valeurs donnes la proprit.

La paire proprit-valeur est appele "dfinition" selecteur { proprit : valeur ;}

h1 { font-size: 11px; }

OU PLACER LES REGLES CSS? Il y a 3 faons d'insrer les CSS : - dans une balise html dans le corps du document. - dans l'en-tte du document (balise <head>). - reli au document html l'aide d'une balise <link ..> galement dans l'en-tte. Le navigateur lit la page, tlcharge la feuille de style et l'utilise pour afficher le reste de la page. Dans la balise html
<h1 style="font-size: 15px; color: #555;">Titre</h1>

Dans l'en-tte
<style type="text/css"> h1 { font-size: 20px; } </style>

Page 5/30

Cours CSS v1.0

Dans un fichier externe reli au document :

<link rel="stylesheet" type="text/css" href="style/style.css" />

rel="stylesheet" dit que c'est un lien externe du type feuille de style type="text/css". Le " />" est utilis si vous choisissez le XHTML 1.0. CREATION DE LA FEUILLE EXTERNE. l'aide d'un logiciel de texte basique (Notepad, NotePad++ sur PC ou TextEdit, TextMate, TextWrangler sur Mac), crer un fichier enregistr au format texte seul, portant l'extension .css. Aucune balise html avec les signes < > ne doit figurer dans ce fichier !

Syntaxe des rgles CSS

Contrairement au HTML qui n'tait pas trs standardis, les CSS ne laissent pas de place aux erreurs de syntaxe. Les navigateurs ne sont pas indulgents comme pour les fautes de html. Chaque rgle doit contenir un slecteur et une dclaration. Les proprits de la dclaration doivent tres spares par des points-virgules. Lorsque la valeur d'une proprit est une unit de mesure et sa valeur, il ne doit pas y avoir d'espace entre les deux : ex:
font-size: 12px ; font-family: Verdana, sans-serif;

Redfinir une balise html :

body { background: #fff; font-family: Verdana, Times, sans-serif; }

CASSE Les CSS ne sont pas sensibles la casse mais par convention, on met tout en minuscules. Le W3C recommande en outre d'crire les codes hexadcimaux en minuscules galement.

Page 6/30

Cours CSS v1.0

CREER UNE CLASSE PERSONNALISEE Une classe personnalise va tre utilise ponctuellement dans les pages du site. Le nom de la classe doit tre prcd d'un point, ne doit pas commencer par un chiffre et ne doit contenir ni espaces, ni accent, ni caractre de ponctuation, ni tiret. Exemple pour une classe qui met du texte en rouge sur un paragraphe : CSS :
.txtrouge { color: red; }

HTML :
<p class="txtrouge"> mon paragraphe en rouge</p>

La valeur de la proprit de couleur peut tre un mot-clef (red, green, transparent, ), un code Hexadcimal (ex: #ff56de) ou des valeurs RVB (Rouge, Vert, Bleu) entre 0 et 255 (ex: color: rgb(255,125,32); ). NOTE : L'indication hexadcimale d'une couleur peut parfois tre raccourcie en regroupant par paire les lettres et chiffres. Ainsi, "#ff00ee" pourra s'crire "#f0e". Mais "#ff00de" ne pourra pas tre raccourcie. Les classes personnalises peuvent s'appliquer toutes les balises html. Pour appliquer plusieurs classes une mme balise : CSS :
.txtrouge {color: red;} .italique {font-style:italic}

HTML :
<p class="txtrouge italique">mon paragraphe en rouge</p>

Les deux classes sont spares par un espace, l'attribut "class" n'est indiqu qu'une seule fois. COMMENTAIRES
/* Ceci est un commentaire de feuille de style */

Ils peuvent tre multi-lignes

/* Ceci est un commentaire de feuille de style un commentaire sur plusieurs lignes */

Page 7/30

Cours CSS v1.0

Class et id
DIFFERENCE ENTRE CLASS ET ID Ce sont tous les deux des slecteurs qui permettent d'appliquer des rgles un lment. "id" dfinit un lment de manire unique, alors que "class" peut tre utilis plusieurs fois dans la page. Nous allons donc privilgier "id" pour les botes positionner, car deux lments ne devraient logiquement pas avoir la mme position dans l'interface. De plus on peut ainsi donner des paramtres propres chaque lment (typo, taille, couleur, positionnement, arrire-plan, bordure ...) avec un seul id. Il est possible de cumuler id et class. Alors l'id est plus fort que la classe en cas de conflit. De plus JavaScript peut manipuler les balises avec un id. Rappelons pour terminer qu'au sein de la CSS, les id sont dfinis avec le signe dise (#nom) et les class avec un point (.nom). Exemple de CSS :
/* Dfinition des balises HTML */ body { background-color: silver; } p { color: #000; font-family: Verdana, Arial, sans-serif; font-size: 12px; }

/* Dfinition des ID */ #container { width: 950px; background-color: #fff; margin: 0 auto; }

/* Dfinition des classes */ .txtImportant { color: red; font-style: italic; }

Page 8/30

Cours CSS v1.0

Cascade, conflits et hritages

Les ID l'emportent sur les "class". Les "class" l'emportent sur les slecteurs contextuels, pseudo-class et pseudo lments. La feuille interne l'emporte sur la feuille externe si elle est place aprs dans l'ordre du code. C'est toujours le dernier appel qui l'emporte. CONFLITS
p { color : red; } p { color : green; }

c'est le vert qui l'emporte. Il crase la valeur "red" prcdemment dfinie. HERITAGE C'est le mcanisme par lequel les styles s'appliquent un lment, mais aussi ses descendants. Structure d'une page html : en haut de la hirarchie : le html qui contient body qui contient d'autres lments. HTML est l'ascendant de tout (aussi appel lment racine). BODY est l'ascendant de tout ce que montre le navigateur. Souvent les lments hritent des proprits de leur parent : la couleur d'arrire-plan du body sera la mme pour toutes les couleurs d'arrire-plan de la page, par dfaut. Quelques proprits ne sont pas hrites, en gnral il s'agit de bon sens (comme border par exemple).

Page 9/30

Cours CSS v1.0

Units de longueur
UNITES DE LONGUEUR ABSOLUES - (A EVITER)

cm (centimtre = 1cm = 10 mm) Risque d'affichage diffrent sur plusieurs crans. mm (millimtre) Mme remarque. pc (pica = 1pc = 12pt) Un autre terme de typographie, donc mme remarque. pt (point = 1pt = 1/72 in) Le point est une mesure typographique utilise par les imprimeurs (d'o les "points par pouce" de certaines rsolutions) et les traitements de texte. NOTE : Il ne peut y avoir d'espace l'intrieur de cette valeur et pour les nombres dcimaux, la virgule est imprativement remplace par un point.

En accessibilit, ces valeurs ne sont pas recommandes, car elles empchent l'internaute de redimensionner la taille d'affichage des caractres. Ces valeurs sont donc viter ct web ! (Mais restent ventuellement utilisables pour une CSS ddie l'impression).

Page 10/30

Cours CSS v1.0

UNITES DE LONGUEUR RELATIVES - (RECOMMANDEES)

px (pixel) em (largeur de la letttre m, 1 em correspond 100% de la taille en cours de la police, 1.2 em 120 %, 0.8 em 80% Son usage est donc limit aux polices.) ex(hauteur de la lettre x. Assez pauvrement implmente, donc viter.). % L'lment dfini prendra un pourcentage donn de la taille de son lment parent. small x-small xx-small large x-large NOTE : L encore, il ne peut y avoir d'espace l'intrieur de cette valeur et pour les nombres dcimaux, la virgule est imprativement remplace par un point. xx-large medium larger smaller

En accessibilit, ces valeurs sont recommandes, car elles permettent l'internaute de redimensionner la taille d'affichage des caractres. Il est conseill de se cantonner aux units % et em pour un affichage fluide ou pour du texte, et px quand on a besoin de placer les lments au pixel prs Les autres valeurs seront le plus souvent vites. NOTE : Il existe 2 coles sur l'utilisation de ces valeurs. Certains intgrateurs prfreront le "em" et en mettront partout, d'autres prfrent les "px" et n'utilisent que a.

Page 11/30

Cours CSS v1.0

Proprits
PROPRIETES DU TEXTE
font-family: type de la police Nom(s) de(s) la police(s) (faire une liste, noms spars par une virgule) font-weight: graisse normal, bold, bolder, lighter, ou 100,200,300,400,500,600,700,800,900 color: font-size: couleurs tailles valeurs hexadcimales ou nommes : red

xx-small = xx-small x-small = trs petit small =

petit.

medium =

large = . smaller = plus petit que normal. larger =

grand

moyen.

plus grand que normal.

x-large =

trs grand

xx-large =

gant

Donner des valeurs en point (pt), pica (pc), pouce (in), millimtre (mm), centimtre (cm), pixel (px), em : en relation avec la largeur de la lettre M de la police, ex : en relation avec la largeur de la lettre x % : pour pourcentage par rapport la norme de l'lment font-style: font-variant: line-height: text-align: texttransform: wordspacing: letterspacing : text-indent: indentation ligne de la 1e longueur (en cm ou en px) | pourcentage positif ou ngatif (signe -) Effet d'un alina. espacement des lettres normal | i c i : 0 , 5 c m style normal ou petite cap interlignage alignement Normal, nom propre, normal, italic, oblique normal | small-caps en points (pt), pixels (px), em ou en % left | right | center | justify None | Capitalize | UPPERCASE | lowercase

majuscules, minuscules espacement des mots normal | ici 0,5cm entre les mots

Page 12/30

Cours CSS v1.0

PROPRIETES DES LISTES Par dfaut les listes simples (non numrotes) sont prcdes d'une "puce" : Il est possible de les remplacer avec la proprit list-style-type:

Page 13/30

Cours CSS v1.0

Les raccourcis
Dans le but d'allger vos pages CSS, il est intressant d'utiliser des raccourcis (shorthand en anglais) Les valeurs "raccourcies" sont spares par des espaces ! POUR LE TEXTE
font-size-adjust: none; font-stretch: normal; font-weight: normal; font-style: normal; font-variant: normal; font-size: 16px; line-height: normal; font-family: sans-serif 1em/1.2em donne la taille puis l'interlignage font: 16px Verdana, sans-serif; ou font: bold 1em/1.2em Verdana, sans-serif;

POUR LES LARGEURS DE MARGES ET REMPLISSAGE Pour une mme valeur en haut, droite, en bas et gauche, dans cet ordre prcis (Top, Right, Bottom, Left - moyen mnmotechnique pour ceux qui parlent anglais TRBL, trouble ;-))

padding : 2px margin : 2px

Deux valeurs diffrentes seront pour haut et bas, gauche et droite margin-top : 2px; margin-right : 5px; margin-bottom : 2px; margin-left : 5px; Trois valeurs diffrentes seront pour haut , gauche et droite puis bas margin-top : 5px; margin-right : 2px; margin-bottom : 7px; margin-left : 2px; Enfin il est possible d'indiquer la suite les 4 valeurs pour haut, droite, bas et gauche margin-top : 5px; margin-right : 2px; margin-bottom : 3px; margin-left : 6px; margin: 5px 2px 3px 6px; margin: 5px 2px 7px; margin: 2px 5px;

Page 14/30

Cours CSS v1.0

LES BORDURES Les bordures doivent obligatoirement avoir 3 paramtres : style, largeur et couleur. L'ordre n'importe pas. border-width: 2px; border-style : solid; border-color : #f00; Les styles disponibles sont les suivants :

border: 2px solid #f00;

solid (trait plein) dotted (pointills) dashed (tirets) double (double trait plein) groove (bordure en relief s'enfonant) ridge (bordure en relief sortant) inset (effet de relief s'enfonant) outset (effet de relief sortant)

On peut trs bien dfinir une bordure diffrente par ct de la boite ! LES COULEURS Les couleurs peuvent tre raccourcies condition que les chiffres/lettres soient doubls. On peut donc avoir 3 ou 6 caractres dans le code hexadcimal. color: #ffffff; color: #00ffcc; color: #ee11ff; color: #fff; color: #0fc; color: #e1f;

Page 15/30

Cours CSS v1.0

Les botes : remplissage et marges

LES MARGES Les marges sont l'extrieur d'un lment (bote ou autre) Il s'agit de l'espace qui se trouve autour de la bote ou d'un autre lment (paragraphe, h1, listes ...) L'arrire-plan des marges est toujours transparent. Les rgles d'hrdit ne sont pas applicables. Valeurs :

La longueur pour dfinir une largeur fixe. Le pourcentage qui est calcul par rapport la largeur du bloc conteneur de la bote gnre. Auto qui correspond une valeur dfinie par le navigateur.: La bote verte a une marge de 10 pixels tout le tour, de son conteneur (bords noirs). Le contenu colle aux bords

La bote verte a une marge de : 10 pixels en haut 20 pixels droite 5 pixels en bas 15 pixels gauche

LE REMPLISSAGE (PADDING) Le remplissage (padding) est l'intrieur de la bote. Valeurs possibles : pixels ou pourcentage. Ici le contenu commence 10 pixels, la bote prend toute la largeur. Attention : le remplissage fait partie de la bote et augmente donc sa largeur. Ici la bote prend 250 pixels de large, mais dans le code on a : 230px + 10px de remplissage gauche + 10px de remplissage droit ! (10px tout autour) Les marges peuvent galement prendre une valeur ngative.

Page 16/30

Cours CSS v1.0

Les boites
DEFINITION Une bote est un morceau de la page, une "division" qui est appele avec la balise <div>. Chaque bote tant un conteneur, on peut y mettre tous les autres lments HTML, listes, enttes, images, flash, paragraphes, etc Dans le CSS, cette balise est appele avec un "#" si c'est un id, et si c'est une classe, avec un ".". Exemple de code html <div id="page">....</div> Exemple de code CSS correspondant #page { width: 200px; font: 11px Verdana, sans-serif; } <div class="titre">...</div> .titre { font-size: 20px; } Il y a deux modles de botes : le modle standard w3c et le modle Microsoft Internet Explorer. Les affichages peuvent donc diffrer de beaucoup. Cependant si vous utilisez un doctype, cela forcera en partie IE se comporter selon les normes du W3C. Une bote est compose de

Son contenu Son remplissage (marge interne) Sa bordure

La marge externe est l'extrieur de la bote, mais pousse donc les lments qui seraient adjacents.

Page 17/30

Cours CSS v1.0

LE POSITIONNEMENT DES BOITES : STATIQUE, RELATIF, ABSOLU NOTION DE FLUX Les navigateurs "lisent" le code et l'interprtent de faon linaire. Les botes viennent naturellement les unes en dessous des autres, comme les paragraphes, les balises d'en-ttes et les listes, et d'autres lments au contraire, comme les images ou les liens se placent naturellement dans le flux du document. STATIQUE (PAR DEFAUT) Ici il y a une bote verte insre dans la page, avec les marges de la page par dfaut. Puis une texte. Par dfaut les botes font 100% de leur conteneur et prennent la hauteur de leur contenu. deuxime bote rouge, qui se place par dfaut en dessous. Elles contiennent une ligne de

RELATIF (DANS LE FLUX) = POSITION : RELATIVE Il est possible de dcaler horizontalement et/ou verticalement les lments. Ceci peut gnrer des chevauchements ! Ici la bote rouge a t "pousse" de 20pixels plus bas que l'lment prcdent :
#rouge { background: red; position:relative; top:20px; }

ABSOLU (HORS DU FLUX) = POSITION : ABSOLUTE Il est possible de retirer les botes du flux normal de la page. Celles-ci n'auront alors aucun effet sur les autres lments de la page. Elles se placent par rapport l'lment parent. Si rien n'est prcis, ce sera par rapport la fentre. Les botes positionnes en absolu prennent la largeur et la hauteur de leur contenu, sauf si on leur donne des paramtres diffrents. Attention cela peut provoquer des chevauchements, comme dans l'exemple ci-dessous. La bote rouge "ignore" la bote verte et se positionne 20 pixels du haut de la fentre. Ici on a simplement chang la position "relative" de la bote rouge, en "absolute" :
#rouge { background: red; position: absolute; top: 20px; }

Page 18/30

Cours CSS v1.0

LE POSITIONNEMENT DES BOITES : LE FLOTTEMENT Une bote flottante est retire du flux normal, et place le plus droite (float: right) ou le plus gauche (float: left) possible de son conteneur (par dfaut la fentre).

COMPRENDRE LE FLOTTEMENT L'lment flottant se met le plus droite ou gauche possible de son conteneur, donc l'lment suivant se positionne ct. Les lments flottants doivent OBLIGATOIREMENT avoir une LARGEUR DEFINIE. Une image et du texte ct par dfaut donnent ceci :

Le texte se positionne ct de l'image, en bas et va en dessous la fin du conteneur

Ici, l'image a le paramtre : float: left L'image se place le plus gauche possible et le texte l'habille donc droite.

Ici, l'image a le paramtre : float: right L'image se place le plus droite possible et le texte l'habille donc gauche.

Page 19/30

Cours CSS v1.0

FAIRE DES COLONNES

Attention les lments flottants se placent les uns ct des autres tant qu'ils ont la place, ensuite ils vont en dessous. Ci-dessous les deux botes sont float: right, elles partent donc de la droite du conteneur.

Il est recommand de mettre toutes les botes qui doivent tre les unes ct des autres en float, mme la dernire ! tous les navigateurs ne ragiraient pas de la mme faon. SORTIR DU FLOTTEMENT = CLEAR : LEFT, RIGHT OU BOTH Puisque tous les lments qui se positionnent les uns ct des autres doivent avoir la proprit "float" y compris le dernier, il faut ensuite "forcer" le retour la ligne. Revenir la ligne aprs des colonnes : clear (left, right, both) :

Il est ncessaire d'avoir un lment qui permet de revenir la ligne. S'il y a eu du flottement gauche, il faut : clear: left S'il y a eu du flottement droite, il faut : clear:right S'il y a eu du flottement gauche et droite, il faut : clear:both - Exemple de code html :
<div <div <div <div id="leftcol">colonne de gauche</div> id="midcol">colonne du milieu</div> id="rightcol">colonne de droite</div> id="footer">pied de page</div>

- La CSS sera :
#leftcol #midcol #rightcol #footer { { { { width: width: width: width: 100px; 400px; 100px; 600px; float: left; } float: left; } float: left; } clear: left; }

Page 20/30

Cours CSS v1.0

LA NOTION DE DEBORDEMENT : OVERFLOW Il s'agit de la proprit "overflow" qui prend 4 valeurs : auto, visible, hidden, scroll. Par dfaut le contenu dbordera de la bote et sera visible (overflow: visible).

La bote grise fait 100px de haut, mais le contenu a forc sa hauteur, le texte dpasse de la bote.

La bote grise fait 100px de haut, mais nous avons ajout la proprit : overflow: auto, cela a gnr une barre de dfilement de faon automatique dans le sens o il y en a besoin (verticalement et/ou horizontalement selon le contenu). La bote grise fait 100px de haut. Nous avons ajout la proprit : overflow: hidden, cela a masqu le contenu qui dbordait.

La bote grise fait 100px de haut nous avons ajout la proprit : overflow: scroll Barres de dfilement dans les deux sens (actives ou non) !

Attention ! Selon les navigateurs (Mozilla), des lments flottant l'intrieur d'un autre lment ne forcent pas la hauteur de celui-ci. Si vous donnez une couleur d'arrire-plan une bote qui contient des lments flottants, il est recommand de donner celle-ci la proprit : overflow :auto, pour la forcer suivre son contenu. - Exemples de code : html :
<div id="conteneur"> <div id="col_g">colonne de gauche</div> <div id="col_d">colonne de droite</div> </div>

CSS :
#conteneur #col_g #col_d { width: 700px; overflow : auto; background: #099; } { width: 300px; float: left;} { width: 400px; float: left;}

Page 21/30

Cours CSS v1.0

Arrire-plan : images
Les images d'arrire-plan sont des images (gif ou jpg) qui par dfaut se rptent en mosaque (effet papier peint). En CSS il est possible de ne pas les rpter, de les rpter horizontalement ou verticalement, et si on ne les rpte pas, on peut les positionner dans leur lment. Ces images peuvent s'appliquer aux balises html, que ce soit <body> pour toute la page, ou <div>, <p>, <hn> etc ... Il est recommand d'utiliser des images les plus lgres possibles et profiter ainsi de l'effet de rptition pour des effets graphiques. Voici quelques exemples avec les codes : - Rptition, - Rptition horizontale, - Rptition verticale, - Pas de rptition, - Remplacement de la puce de liste. REPETITION Avec cette petite image : 4px sur 2px, qui se rpte par dfaut
#fondrouge { background: url(fondrouge.gif); height: 100px; width: 240px; color: #fff; text-align: center; }

REPETITION HORIZONTALE Avec cette petite image : (poids: 1ko) qui se rpte verticalement (cette image aurait

pu ne faire qu'un pixel de haut, mais pour les besoins de lisibilit sur cette page, elle est plus grande !) De plus ici on a ajout une couleur d'arrire-plan = #E6E7E8 :
#ombre-droite { background: #e6e7e8 url(ombre_portee_droite.gif) repeat-y right top; height: 100px; width: 240px; color: #333; text-align: center; }

Page 22/30

Cours CSS v1.0

REPETITION VERTICALE Avec cette petite image : 11px sur 13px, qui se rpte horizontalement :
#symboleh { background: url(symbole_h.gif) repeat-x ; height: 130px; width: 240px; color: #333; text-align: center; padding-top:10px; border:1px solid green; }

PAS DE REPETITION

Avec cette image :

#lys { background: url(lys.gif) no-repeat right bottom; height: 230px; width: 240px; color: #333; text-align: center; float: left; padding-top:10px; border:1px solid gray; }

REMPLACEMENT DE LA PUCE DE LISTE Avec cette image : on peut remplacer facilement des puces de liste par une image, et la

placer exactement o l'on veut par rapport aux lments de la liste :

#puces li { background: url(../img/puce.gif) no-repeat left center; padding-left: 20px; list-style: none; }

Les possibilits de positionnement : background-position background-position : top, center, left, bottom, right, ou avec des valeurs en pixels ou en pourcentage. Image d'arrire-plan : background-attachment scroll : l'image dfile en mme temps que la page fixed : l'image reste fixe et la page dfile par dessus.

Page 23/30

Cours CSS v1.0

Pseudo Classes de liens

Par dfaut les liens sont bleus et souligns, les liens visits sont violets et souligns et les liens actifs, rouges et souligns. Si vous avez paramtr une typo et une taille de texte dans votre CSS, ils vont en hriter, mais garderont les paramtres qui leur sont propres : couleur et soulignement. Il est impratif de respecter l'ordre dans lequel ils sont appels dans le CSS et de ne pas mettre d'espace de chaque ct des deux points. a:link pour le lien tel qu'il apparat sur la page avant d'avoir t cliqu. a:visited pour le lien tel qu'il apparat sur la page aprs avoir t visit. a:hover pour le lien tel qu'il apparat sur la page lorsqu'on passe le curseur au-dessus. a:active pour le lien tel qu'il apparat sur la page au moment o on clique dessus. Pour changer la couleur : voir le chapitre sur les couleurs. "DECORATION" DU TEXTE Proprit text-decoration : pour la "dcoration". les possibiilts sont : underline (soulign = par dfaut) overline (un trait au-dessus) line-through (barr) none (pas de soulignement) blink (clignotant, mais ne fonctionne pas dans Internet explorer)

Le code serait donc pour un lien non visit de couleur noire et non soulign:
a:link { color: #000; text-decoration: none; }

Page 24/30

Cours CSS v1.0

Elments de type : block

Certains lments se mettent les uns en dessous des autres, d'autres les uns ct des autres. Les lments qui se placent les uns en dessous des autres sont des lments dits de type : block les botes : <div> les paragraphes : <p> les balises d'en-ttes : <h1> <h6> les listes :<ul> et <ol> les lments de liste : <li> les formulaires : <form> les tableaux : <table> Il sera toutefois possible de faire afficher certains de ces lments les uns ct des autres grce la proprit : display. Le plus couramment utilis sera de faire afficher des lments de liste les uns ct des autres. Une liste ci-dessous : cinma thtre danse opra

Peut s'afficher comme ceci : cinma thtre danse opra

Nous disons la balise <li> de cette liste de s'afficher en ligne. La liste a t identifie, par exemple <ul id="sorties">. Le code CSS est :
#sorties li { display: inline; }

Pour espacer les lments de la liste nous rajoutons :

#sorties li { display: inline; padding-right: 20px; }

Vous

avez

remarqu

que

les

puces

prcdants

les

lments

de

cette

liste,

ont

automatiquement disparu !

Page 25/30

Cours CSS v1.0

Elments de type : inline

Il s'agit des lments qui se mettent les uns ct des autres. Les lments qui se placent les uns ct des autres sont des lments dits de type : inline (en ligne). les hyperliens : <a> les images : <img> les portions de texte: <span> le gras :<strong> l'italique : <em> les lments de formulaires (<input>, <textarea>, ) Il sera toutefois possible de faire afficher ces lments les uns en dessous des autres grce la proprit : display.

le monde le figaro libration Les liens ci-dessus peuvent s'afficher comme ceci : le monde le figaro libration Nous disons la balise <a> de ce paragraphe de s'afficher en block. Le paragraphe a t identifi, par exemple <p id="journaux">. Le code CSS est :
#journaux a { display: block; }

Elments non affichs

Il est possible de ne pas afficher des lments. Ceci sert : Lorsqu'on fait des affichages diffrents par type de mdia Pour des listes droulantes de liens

On utilise encore une fois la proprit : display, avec cette fois le paramtre : none
#menu .sousMenu { display: none; }

Page 26/30

Cours CSS v1.0

Affichage de type tableau

Il est possible d'afficher des lments sous forme de tableau : display: table. Les lments imbriqus doivent avoir les proprits table-row et table-cell, pour rappeler les bons vieux TR et TD. La proprit border-collapse est utilise pour fusionner les bordures. Elle peut prendre la valeur de : - collapse, chaque cellule a une bordure commune. - separate, chaque cellule a sa propre bordure. - inherit, hrite de son parent (CSS 2) Le style "border-collapse" ne peut s'appliquer que sur la balise HTML TABLE ou sur un lment dont la valeur display est gale : 'table' ou 'inline-table'. Le rendu des bordures de tableau est divis en deux catgorie dans CSS2 : fusionnes et spares. Dans le modle de rendu des bordures fusionnes, les cellules adjacentes partagent les mmes bordures.

Dans le modle de rendu des bordures spares, chaque cellule adjacente a ses propres bordures (la distance entre les bordures est dfinie par la proprit border-spacing ).

Autres types d'affichage

Les autres types d'affichage dcrits ci-dessous ne sont pas interprts par tous les navigateurs, ou pas de la mme faon. DISPLAY: INLINE-BLOCK Un lment affich comme inline-block, est un lment en ligne, c'est--dire qu'il se place ct de l'lment adjacent, mais se comporte comme un block. Ne fonctionne pas dans Firefox 2 et infrieur. DISPLAY: LIST-ITEM Signifie qu'il se comporte comme une liste, et est prcd d'une puce.

Page 27/30

Cours CSS v1.0

Styles divers
CURSEUR La proprit de feuille de style cursor CSS peut prendre les valeurs suivantes : Le code CSS = cursor: nw-resize, par exemple. - default, curseur en forme de grosse flche (curseur par dfaut), - pointer, curseur en forme de main avec un doigt dpli (par dfaut sur les liens), - n-resize, curseur en forme de petite flche verticale vers le haut (North), - s-resize, curseur en forme de petite flche verticale vers le bas (South), - e-resize, curseur en forme de petite flche horizontale vers la droite (Est), - w-resize, curseur en forme de petite flche horizontale vers la gauche (West), - ne-resize, curseur en forme de petite flche en diagonale vers haut droit, - nw-resize, curseur en forme de petite flche en diagonale vers haut gauche, - se-resize, curseur en forme de petite flche en diagonale vers bas droit, - sw-resize, curseur en forme de petite flche en diagonale vers bas gauche, - crosshair, curseur en forme de croix fine (genre viseur), - move, curseur en forme de quatre flches en croix, - text, curseur en forme de sorte de grand I, - help, curseur en forme de flche et "?", - wait, curseur en forme de sablier, - progress, curseur en forme de flche avec sablier, - not-allowed, curseur en forme de rond barr (interdit), - col-resize, curseur fait d'une barre verticale avec une flche horizontale de chaque cot. - row-resize, curseur fait d'une barre horizontale avec une flche au dessus et au dessous.

a.aide { cursor: help; }

Page 28/30

Cours CSS v1.0

Une feuille par mdia

Il est possible avec une seule page html, d'obtenir des affichages diffrents selon les types d'appareils. Voici la liste des types existant l'heure actuelle : http://www.yoyodesign.org/doc/w3c/css2/media.html all : convient pour tous les appareils (valeur par dfaut si rien n'est indiqu) ; screen : destin principalement aux moniteurs couleurs ; print : destin un support pagin opaque et aux documents vus sur cran en mode aperu avant impression ; aural : destin aux synthtiseurs de parole. Voir les dtails fournis dans le chapitre sur les feuilles de style auditives ; braille : destin aux appareils braille retour tactile ; embossed : destin aux appareils impression braille ; handheld : destin aux appareils portatifs (typiquement ceux avec petits crans, monochromes et bande passante limite) ; projection : destin aux prsentations en projection, par exemple avec des projecteurs ou des impressions pour des transparents ; tty : destin aux mdias utilisant une grille de caractres fixe, tels les tltypes, les terminaux ou les appareils portatifs aux capacits d'affichage rduites. Les auteurs ne devraient pas utiliser de valeurs exprimes en pixel avec ce type de mdia ; tv : destin aux appareils du type tlvision (avec ces caractristiques : basse rsolution, couleur, dfilement des pages limit, sonoris). NOTE : Les noms des types de mdias ne sont pas sensibles la casse. Une premire feuille de style externe est relie la page comme par exemple :
<link href="styles/ecran.css" rel="stylesheet" type="text/css" media="screen"/>

puis une autre :

<link href="styles/impression.css" rel="stylesheet" type="text/css" media="print"/>

L'instruction "media" dfinit pour quel type d'appareil chaque feuille est faite. On peut ainsi adapter au mieux les affichages : des pixels, des polices sans-serif pour l'cran seront transformes par exemple en cm et polices serif pour l'impression. De mme pour la largeur des blocs, l'affichage des menus, ou des publicits.

Page 29/30

Cours CSS v1.0

Ressources
LIENS : W3C : http://www.w3.org Pour les standards du web : http://openweb.eu.org/ La puissance dmontre des CSS avec le superbe site ZenGarden : http://www.csszengarden.com/tr/francais/ Alsacrations (tutoriaux, forums, ) : http://www.alsacreations.com Articles, ressources traduites en franais : http://www.pompage.net/ Des galeries de sites en CSS : http://www.mostinspired.com/?type=gallery LIVRES : "Mmento CSS", de Raphal Goetter (Eyrolles) "CSS 2 Pratique du design Web", de Raphal Goetter, Philippe Vayssire, et Elie Slom (Eyrolles) "Le Zen des CSS", de Dave Shea & Molly Holzschlag (Eyrolles) Bonne ressource pour contourner les faiblesses d'Internet Explorer.

Page 30/30