3 Utilisation du langage CSS. 5. 3.1 Lier sa page `a une feuille de style CSS . . . .
. . . . . . . . . . . . . . . . . . . . 5. 3.1.1 Ce qu'est une feuille de style .
Formation (X)HTML-CSS avanc´e
Table des mati` eres 1 Introduction 1.1 La philosophie W3C . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2 Du HTML au XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.3 Et dans la pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3 3 3 3
2 Compl´ ement de XHTML 2.1 La notion de validit´e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.2 Ins´erer des images dans vos pages . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.3 D´efinir des listes d’´el´ements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3 3 4 5
3 Utilisation du langage CSS 3.1 Lier sa page ` a une feuille de style CSS 3.1.1 Ce qu’est une feuille de style . 3.1.2 Int´erˆet de la manipulation . . . 3.1.3 La pratique . . . . . . . . . . . 3.1.4 Un exemple concret . . . . . . 3.2 Le mod`ele DOM . . . . . . . . . . . . 3.2.1 Document Object Model . . . . 3.2.2 La notion d’ID . . . . . . . . . 3.2.3 La notion d’h´eritage . . . . . . 3.3 Les s´electeurs CSS . . . . . . . . . . . 3.3.1 Les s´electeurs de base . . . . . 3.3.2 S´electeurs de classe et d’ID . . 3.3.3 Le s´electeur multiple . . . . . . 3.3.4 Le s´electeur par h´eritage . . . . 4 Etude de propri´ et´ es CSS 4.1 Les images avec CSS . . . . . . . . . 4.2 Largeur et hauteur . . . . . . . . . . 4.3 Les notions de marges et de padding 4.4 Le placement des objets . . . . . . . 4.4.1 La propri´et´e display . . . . 4.4.2 La propri´et´e float . . . . . . 4.4.3 La propri´et´e clear . . . . . . 4.4.4 La propri´et´e overflow . . . .
. . . . . . . .
5 R´ ef´ erences
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . .
5 . 5 . 5 . 6 . 6 . 6 . 6 . 6 . 6 . 7 . 8 . 9 . 9 . 10 . 10
. . . . . . . .
11 11 12 12 13 13 15 15 17
. . . . . . . .
17
2
2
1 1.1
´ COMPLEMENT DE XHTML
Introduction La philosophie W3C
Le W3C, ou World Wild Web Consortium, est un consortium qui a ´et´e fond´e en 1994 par monsieur Berners-Lee. Le consortium est une organisation constitu´ee de groupes de travail qui vise `a d´evelopper des standards et des normes pour le web. Le but de ces standards est de cr´eer une unification de la mani`ere de cr´eer des contenus pour le web, notamment les pages web. Le HTML a longtemps ´et´e un langage hasardeux trop permissif quant `a sa syntaxe. Il en r´esulte de nombreuses pages cod´ees de mani`eres fort diff´erentes, les rendant plus rapidement obsol`etes. Aujourd’hui, le travail du W3C est reconnu mondialement et le web de l’avenir se trouve dans le XHTMl et non le HTML. La philosophie W3C consiste, en temps que d´eveloppeur, `a s’efforcer de respecter les normes recommand´ees (et non impos´ees) par le W3C. Il en r´esulte des pages web plus propres, plus structur´ees et plus p´erennes.
1.2
Du HTML au XHTML
Mais au fond, quelle diff´erence entre ces langages, et d’o` u sort ce fameux X ? Le principe de base est de consid´erer qu’un fichier HTML est ´egalement un fichier XML. Le XML est un m´etalangage (langage qui d´efinit des langages) et les pages web telles que nous vous avons appris `a les faire dans la s´eance pr´ec´edente sont des fichiers XML. XML est utilis´e pour de nombreuses autres choses, comme les flux RSS, les fichiers de configuration, etc... L’id´ee g´en´erale est de s´eparer le contenu de sa forme. Un document XML structure les informations, et permet ensuite de les organiser ind´ependamment de leur contenu. Voil`a pourquoi nous n’´ecrirons presque plus de d´efinition de forme (taille, couleur, alignement) au sein du code XHTML. On d´efinit des zones, manipulables ensuite via le langage CSS. Voil`a en quoi consiste la philosophie du web selon le W3C : respecter les standards et structurer l’information.
1.3
Et dans la pratique
Dans la pratique, XHTML supprime des balises de HTMl consid´er´ees comme obsol`etes. Rassurez-vous, aucune des ces balises ne vous ont ´et´e apprises `a la premi`ere s´eance. Et d’une mani`ere g´en´erale, ´ecitez de ”copier-coller” des gros morceaux de HTML depuis un autre site : v´erifiez d’abord sa validit´e vis-` a-vis des standards du W3C.
2
Compl´ ement de XHTML
Nous allons apprendre ici ` a utiliser d’autres balises qui n’ont pas ´et´e ´evoqu´ees `a la premi`ere s´eance.
2.1
La notion de validit´ e
Un document XHTML est dit valide lorsqu’il respecte les normes du W3C. Mais ce n’est pas aussi simple, car il y a plusieurs normes. Les principales sont XHTML 1.0 Strict, XHTML 1.0 Transitional et XHTML 1.1. Vous n’aurez besoin de XHTML 1.0 Transitional que si vous devez valider de vieux documents HTML existants. Nous recommandons d’utiliser XHTML 1.0 Strict, pour des raisons li´es aux types MIME des fichiers que nous n’expliciterons pas ici. Une 3
2
´ COMPLEMENT DE XHTML
fois que vous avez choisi une norme, vous devez l’indiquer dans le document. Cel`a se fait en ajoutant les deux lignes suivantes avant le tag d’ouverture .
< !DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1 . 0 S t r i c t //EN” ” h t t p : / /www. w3 . o r g /TR/ xhtml1 /DTD/ xhtml1−s t r i c t . dtd ”> D´eclarer la norme choisie
Vous remarquerez que la premi`ere d´eclaration indique l’encodage du fichier. Cel`a ne vous empˆeche pas d’utiliser une balise META pour le pr´eciser encore. En effet, cette d´eclaration pr´ecise l’encodage lorsque le document est interpr´et´e comme un fichier xml, alors que la balise META indique l’encodage lorsque le fichier est interpr´et´e en tant que XHTML. Pour savoir si vos pages sont valides, vous pouvez vous rendre sur le site http ://validator.w3.org/ pour v´erifier la validit´e de vos pages. Lorsque votre site est en ligne et valide, il est de bon ton d’apposer un bandeau W3C pour le signaler. Cette validit´e est un gage de s´erieux de la part du d´eveloppeur. Le tag d’ouverture change l´eg`erement lui aussi. Il convient de le d´eclarer comme dans cet exemple :
< !DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1 . 0 S t r i c t //EN” ” h t t p : / /www. w3 . o r g /TR/ xhtml1 /DTD/ xhtml1−s t r i c t . dtd ”> Page v i d e pour t e s t e r Un document XHTML 1.0 Strict
Ce fichier se trouve dans le dossier canevas et se nomme vide.htm.
2.2
Ins´ erer des images dans vos pages
Pour ajouter des images, il suffit d’utiliser une balise
. Sa syntaxe est la suivante :
4
3
UTILISATION DU LANGAGE CSS
Ins´erer des images
Vous pouvez voir que la balise
est une balise qui s’ouvre et se ferme avec un seul tag. Cette balise peut aussi poss´eder des attributs width et height, mais nous vous d´econseillons leur utilisation. Il vaut mieux dimensionner correctement ses images avec un ´editeur d’image. Vous pouvez le faire avec The GIMP par exemple, qui est un logiciel libre de droits et gratuit. Malgr´e la popularit´e du format JPEG, nous vous recommandons l’utilisation du format PNG pour vos images web. PNG supporte la transparence, comme GIF, mais permet d’afficher des images avec une aussi bonne qualit´e que JPEG. Des fichiers d’images sont disponibles dans le r´epertoire canevas. Vous pouvez partir de vide.htm pour faire un test.
2.3
D´ efinir des listes d’´ el´ ements
Pour d´efinir une liste d’´el´ements, comme dans un menu par exemple, utilisez ceci :
< l i>Item < l i>Item < l i>Item < l i>Item < l i>Item
1 2 3 4 5
Listes d’´el´ements
Les balises - peuvent bien sˆ ur contenir des liens, des images ou autre. N´eanmmoins, il convient de ne les utiliser que pour un petit volume, comme pour les items d’un menu. Par d´efaut, cel`a donne une liste ` a puce avec des ´el´ements align´es verticalement, mais cel`a peut ˆetre modifi´e avec CSS.
3
Utilisation du langage CSS
3.1 3.1.1
Lier sa page ` a une feuille de style CSS Ce qu’est une feuille de style
A la s´eance pr´ec´edente, vous avez tap´e du code CSS `a l’int´erieur de la balise . Une feuille de style n’est rien d’autre qu’un fichier texte contenant le code CSS dont vous avez besoin. Il ne doit en aucun cas contenir du HTML. Vous devez lui donner l’extension *.css. 5
3 3.1.2
UTILISATION DU LANGAGE CSS
Int´ erˆ et de la manipulation
Lorsque vous allez cr´eer un site, il sera compos´e de plusieurs pages XHTML diff´erentes, et vous voudrez (` a moins d’ˆetre bizarre) qu’elles respectent un mˆeme design. On emploie le terme de charte graphique. Vous allez donc pouvoir dire `a la page de respecter les styles pr´esents dans tel ou tel fichier *.css. Vous pouvez faire un tour sur le site http ://www.csszengarden.com/tr/francais/. Les pages ont toutes le mˆeme code HTML, seule la feuille de style change. 3.1.3
La pratique
Il existe plusieurs m´ethodes pour lier sa page `a une feuille de style. Voici celle que nous vous recommandons. Dans l’en-tˆete (` a l’int´erieur de la balise ), ajoutez le code suivant :
@import u r l ( ’ chemin / v e r s / l e / f i c h i e r / de / s t y l e . c s s ’ ) ; Un document XHTML 1.0 Strict
L’avantage de cette m´ethode est que import est une directive de CSS2. ”Et alors”, direzvous ? Et alors si jamais le visiteur utilise un navigateur qui ne supporte que le CSS1, la feuille de style ne sera pas import´ee, et votre site s’affichera de mani`ere simpliste mais lisible. Alors qu’avec une autre m´ethode, un vieux navigateur pourrait interpr´eter `a moiti´e la feuille de style et rendre le site illisible. 3.1.4
Un exemple concret
Ouvrez le fichier style.htm dans votre navigateur. Puis ´editez ce fichier, remplacez style1.css par style2.css, enregistrez et actualisez. Vous pouvez voir que ce simple fait peut impliquer des changements importants quant aux placements des conteneurs les uns par rapport aux autres.
3.2 3.2.1
Le mod` ele DOM Document Object Model
Le Document Object Model est une mani`ere de repr´esenter votre document XHTML. Il consiste `a le consid´erer comme une structure arborescente. Chaque balise est un noeud, la racine est la balise . Pour toute balise donn´ee, les balises qu’elle contient sont appel´ees ses enfants et la balise concern´ee le parent. Pour mieux comprendre cel`a, vous pouvez utilisez un outil fort utile int´egr´e dans le navigateur Firefox, appel´e ”inspecteur DOM”. Reprenez le fichier style.htm dans votre navigateur, puis cliquez sur Outils -> Inspecteur DOM. D´eveloppez un peu l’arbre pr´esent´e pour visualiser sa structure. Lorsque vous cliquez sur un conteneur, ses bords apparaissent en rouge quelques instants pour vous le montrer. 3.2.2
La notion d’ID
En XHTML, tous les noeuds (les balises) ont le droit d’utiliser l’attribut ”id”. Cet attribut sert `a donner un nom unique ` a ce noeud. Dans un document, deux attributs ”id” ne doivent 6
3
UTILISATION DU LANGAGE CSS
en aucun cas contenir la mˆeme valeur. Il s’agit d’un identifiant unique dans tous le document, d´esignant le noeud qui le poss`ede. Cel` a est utile pour d´esigner les zones principales de vos pages, comme le menu ou le corps de texte. Cet ID est utilisable dans vos feuilles de style CSS, pour attribuer un style au noeud poss´edant tel ou tel ID. Pour ce faire, il faut utiliser la syntaxe suivante :
n o m d e l a b a l i s e#i d c h o i s i { attributcss : valeur1 ; attributcss2 : valeur2 ; } /∗ Par exemple ∗/ d i v#Menu { f o n t −s i z e : 1 2 pt ; c o l o r :# f f 0 0 0 0 ; } Utiliser les ID dans votre feuille de style
3.2.3
La notion d’h´ eritage
Les balises enfants poss`edent une partie des propri´et´es CSS de leurs parents, notamment toutes les propri´et´es de d´ecoration du texte comme sa couleur, sa police, sa taille, son alignement, etc. L’h´eritage concerne aussi les enfants des enfants, les enfants des enfants des enfants, etc. Cette notion d’h´eritage est tr`es puissante car elle peut s’utiliser avec les noms de balise, avec les classes et avec les ID. Il ´egalement possible d’utiliser cette notion d’h´eritage et d’arborescence pour d´esigner des balises particuli`eres. Par exemple, vous pouvez affecter par un style donn´e tous les paragraphes (balises ) des ”DIV” d’une classe donn´ee (par exemple ”maclasse”). Vous le verrez dans la section suivante. Prenons un premier exemple qui montre comment les propri´et´es s’h´eritent. Le code CSS a ´et´e ´ecrit directement dans la balise pour faciliter la lecture, bien que la m´ethode via un fichier externe soit pr´econis´ee :
< !DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1 . 0 S t r i c t //EN” ” h t t p : / /www. w3 . o r g /TR/ xhtml1 /DTD/ xhtml1−s t r i c t . dtd ”> Page v i d e pour t e s t e r 7
3
UTILISATION DU LANGAGE CSS
div { b o r d e r : 1 px s o l i d #000000; margin : 1 0 px ; padding : 5 px ; } . parent1 { c o l o r :# f f 0 0 0 0 ; } . parent2 { t e x t −d e c o r a t i o n : u n d e r l i n e ; } . parent3 { f o n t −s t y l e : i t a l i c ; } Ce t e x t e a l e s t y l e par d´e f a u t .
Ce t e x t e e s t r o u g e .
Ce t e x t e e s t r o u g e e t s o u l i g n ´e .
Ce t e x t e e s t rouge , s o u l i g n ´e e t italique . La notion d’h´eritage
Ce fichier se nomme heritage.htm. Ouvrez le dans votre navigateur pour voir les effets de l’h´eritage. Comme vous pouvez le voir, les DIV imbriqu´es reprennent les propri´et´es de leurs parents, sans qu’on ai besoin de les red´eclarer.
3.3
Les s´ electeurs CSS
Lorsque vous d´efinissez un style, vous ´ecrivez un nom, une classe ou un id, suivi d’accolades contenant les propri´et´es CSS dont vous avez besoin. Ce qui se trouve avant ces accolades s’appelle un s´electeur CSS. 8
3 3.3.1
UTILISATION DU LANGAGE CSS
Les s´ electeurs de base
Vous connaissez d´ej` a les s´electeurs de base. Les voici tout de mˆeme `a titre de rappel :
/∗ Le s ´e l e c t e u r de b a l i s e s ∗/ div { attribut : valeur ; } /∗ Le s ´e l e c t e u r de c l a s s e s ∗/ . maclasse { attribut : valeur ; } /∗ Le s ´e l e c t e u r d ’ ID ∗/ #i d d u d i v { attribut : valeur ; } Les s´electeurs de base
3.3.2
S´ electeurs de classe et d’ID
Si vous connaissez la nature des balises poss´edant les classes et les ID que vous utilisez, il convient de l’indiquer dans le s´electeur. De cette mani`ere par exemple :
/∗ Le s ´e l e c t e u r de c l a s s e s p l u s p r ´e c i s ∗/ /∗ N’ a f f e c t e que l e s DIV p o s s´e d a n t c e t t e c l a s s e ∗/ div . maclasse { attribut : valeur ; } /∗ Le s ´e l e c t e u r d ’ ID ∗/ /∗ S e u l e LE ( c a r i l d o i t ˆe t r e unique ) DIV p o s s´e d a n t c e t ID s e r a a f f e c t ´e ∗/ d i v#i d d u d i v { attribut : valeur ; } Des s´electeurs plus pr´ecis 9
3
UTILISATION DU LANGAGE CSS
Notez qu’il ne doit pas y avoir d’espace apr`es le nom de la balise dans ce cas. 3.3.3
Le s´ electeur multiple
Le s´electeur multiple permet d’attribuer un lot de propri´et´es CSS `a plusieurs s´electeurs en mˆeme temps. Comme ceci par exemple :
/∗ Ce s ´e l e c t e u r va a f f e c t e r l e s DIV de c l a s s e ” u n e C l a s s e ” l e s SPAN de c l a s s e ” u n e A u t r e C l a s s e ” l e s b a l i s e s
∗/ d i v . u n e C l a s s e , span . uneAutre Classe , p { attribut : valeur ; } Le s´electeur multiple
Cel`a est tr`es utile pour ´eviter moults redondances. 3.3.4
Le s´ electeur par h´ eritage
Voil`a sans aucun doute le plus int´eressant des s´electeurs. Il permet de parcourir l’arborescence. Voyez plutˆ ot :
/∗ Ce s ´e l e c t e u r a f f e c t e t o u t e s l e s b a l i s e s de c l a s s e ” uneClasse ” c o n t e n u e dans un DIV ∗/ div . uneClasse { attribut : valeur ; } /∗ Ce s ´e l e c t e u r a f f e c t e t o u s l e s DIV c o n t e n u s dans une b a l i s e de c l a s s ” u n e C l a s s e ” ∗/ . uneClasse div { attribut : valeur ; } /∗ Ce s ´e l e c t e u r a f f e c t e t o u t e s l e s b a l i s e s LI c o n t e n u e s dans l e s DIV de c l a s s e ” item ” eux−mˆeme c o n t e n u s dans l e DIV d ’ i d ”menu” ∗/ 10
4
´ ES ´ CSS ETUDE DE PROPRIET
d i v#menu d i v . item l i { attribut : valeur ; } Le s´electeur multiple
4
Etude de propri´ et´ es CSS
Nous allons ici nous int´eresser ` a quelques propri´et´es CSS. Avant cel`a, il est n´ecessaire de comprendre une chose : vous n’ajoutez jamais de propri´et´es, vous modifiez les valeurs par d´efaut de propri´et´es existantes.
4.1
Les images avec CSS
CSS permet ` a sa mani`ere d’inclure des images. Cel`a est tr`es utile lorsque vous avez besoin d’images pour la d´ecoration du site (banni`eres, bordures ombr´ees). Pour cel`a, il faut indiquer `a CSS une image de fond pour l’´el´ement choisi. Cel`a est bien sˆ ur utilisable sur la balise body. Voici la m´ethode :
body { background−image : u r l ( ’ chemin / v e r s / l / image . png ’ ) ; background−r e p e a t : no−r e p e a t ; background−p o s i t i o n : top l e f t ; background−attachment : f i x e d ; } Utiliser des images de fond
– La premi`ere propri´et´e sp´ecifie le chemin de l’image. Il doit s’agir du chemin relatif par rapport au fichier CSS et non par rapport au fichier HTML de votre page. Cel`a est fort utile pour composer des th`emes utilisables partout depuis le site. – La deuxi`eme propri´et´e sert ` a g´erer le motif. Si votre image de fond est une petite image, et que vous voulez remplir l’espace de fond avec, il suffit d’utiliser une r´ep´etition. On peut r´ep´eter l’image sur tout le plan (papier peint), sur l’axe horizontal, ou sur l’axe vertical. On ne peut ne pas r´ep´eter du tout.La troisi`eme propri´et´e – La troisi`eme propri´et´e permet de choisir ou l’image va se placer dans l’´el´ement. – La quatri`eme propri´et´e prend la valeur fixed ou scroll. Cel`a n’a de sens que lorsqu’un ascenseur apparaˆıt dans l’´el´ement poss´edant l’image de fond. C’est souvent le cas si vous mettez un fond ` a . Si vous d´efilez et que vous avez choisi fixed, le fond ne bougera pas et le texte volera au dessus. Avec scroll, le fond va suivre le d´eplacement de l’ascenseur. Attention : cette propri´et´e ne fonctionne que sur . Sur des DIV, sa valeur reste fixed mˆeme si vous la changez. 11
4
´ ES ´ CSS ETUDE DE PROPRIET
Il convient d’utiliser background-color conjointement avec ces propri´et´es, en lui donnant la valeur de fond de l’image. Des exemples se trouvent dans le fichier background.htm et scoll.htm.
4.2
Largeur et hauteur
Il est souvent utile de pouvoir g´erer la largeur `a la hauteur des ´el´ements. Cel`a se fait via les propri´et´es width et height qui se pr´ecisent en pixels ou en pourcentage. Vous allez voir un exemple au paragraphe suivant. Il existe ´egalement min-width, min-height, max-width et max-height, mais Internet Explorer 6 ne les supporte pas. Il convient de s’en passer dans un souci d’accessibilit´e.
4.3
Les notions de marges et de padding
La marge est la distance entre le bord du conteneur et ce qui l’entoure. Le padding est la distance entre le bord du conteneur et ce qu’il contient.
Fig. 1 – Les marges et le padding Les tailles des marges et des padding se d´efinissent soit en pixels, soit en em, soit en pourcentage (fonctionne pour les marges de gauche et de droite). On les modifie ainsi :
d i v . maClasse { margin−top : 10 px ; margin−bottom : 10em ; margin− l e f t : 1 5 % ; margin−r i g h t : 1 5 % ;
12
4
´ ES ´ CSS ETUDE DE PROPRIET
padding− l e f t : 2 0 px ; padding−r i g h t : 2 0 px ; padding−top : 1 0 em ; padding−bottom : 5 em ; } div . autreClasse { margin : 1 0 px ; pa&dding : 5 em ; } div . encoreAutre { margin : 5px 50 px 5px 50 px ; padding : 1em 5px 1em 50 px ; } Modifier les marges et le padding
Savoir bien g´erer les marges est important car cel`a joue sur la place que les ´el´ements ont le droit ou non de prendre. Voyez un exemple dans le fichier marges.htm.
4.4 4.4.1
Le placement des objets La propri´ et´ e display
Comme vous avez pu le remarquer, lorsque vous utilisez des DIV, ils se mettent les uns au dessus des autres, et prennent chacun la largeur compl`ete de la page. Lorsque que vous utilisez des SPAN, ceux-ci ne prennent que la largeur occup´ee par leur contenu et ne force pas les autres SPAN ` a se placer au dessus et en dessous. Ces propri´et´es peuvent ˆetre chang´ees via la propri´et´e CSS display. Cette propri´et´e peut prendre 17 valeurs, mais nous n’en citerons que 3, `a savoir block, inline et none. Lorsque la valeur choisie est block, l’´el´ement concern´e a le comportement par d´efaut d’un DIV. Lorsque la valeur est inline, l’´el´ement a le comportement par d´efaut d’un SPAN. Vous pouvez de ce fait compl`etement inverser le fonctionnement de DIV et SPAN, mais cel` a n’est pas recommand´e. Changer cette valeur est utile pour g´erer l’alignement horizontal ou vertical d’un menu par exemple. Voyez plutˆ ot cet exemple, pr´esent dans le fichier blocks.htm :
< !DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1 . 0 S t r i c t //EN” ” h t t p : / /www. w3 . o r g /TR/ xhtml1 /DTD/ xhtml1−s t r i c t . dtd ”> Images de fond 13
4
´ ES ´ CSS ETUDE DE PROPRIET
div . blocs a { display : block ; } div . cache a { d i s p l a y : none ; }
