Formation (X)HTML

Formation (X)HTML-CSS avancé
Table des matières
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ément de XHTML
2.1 La notion de validité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2 Insérer des images dans vos pages . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.3 Définir des listes d’éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
3
4
5
3 Utilisation du langage CSS
3.1 Lier sa page à une feuille de style CSS
3.1.1 Ce qu’est une feuille de style .
3.1.2 Intérêt de la manipulation . . .
3.1.3 La pratique . . . . . . . . . . .
3.1.4 Un exemple concret . . . . . .
3.2 Le modèle DOM . . . . . . . . . . . .
3.2.1 Document Object Model . . . .
3.2.2 La notion d’ID . . . . . . . . .
3.2.3 La notion d’héritage . . . . . .
3.3 Les sélecteurs CSS . . . . . . . . . . .
3.3.1 Les sélecteurs de base . . . . .
3.3.2 Sélecteurs de classe et d’ID . .
3.3.3 Le sélecteur multiple . . . . . .
3.3.4 Le sélecteur par héritage . . . .
4 Etude de propriétés 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été display . . . .
4.4.2 La propriété float . . . . . .
4.4.3 La propriété clear . . . . . .
4.4.4 La propriété overflow . . . .
.
.
.
.
.
.
.
.
5 Références
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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
COMPLÉMENT DE XHTML
Introduction
La philosophie W3C
Le W3C, ou World Wild Web Consortium, est un consortium qui a été fondé en 1994 par
monsieur Berners-Lee. Le consortium est une organisation constituée de groupes de travail qui
vise à développer des standards et des normes pour le web. Le but de ces standards est de créer
une unification de la manière de créer des contenus pour le web, notamment les pages web.
Le HTML a longtemps été un langage hasardeux trop permissif quant à sa syntaxe. Il en
résulte de nombreuses pages codées de manières fort différentes, les rendant plus rapidement
obsolètes. 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éveloppeur, à s’efforcer de respecter les normes
recommandées (et non imposées) par le W3C. Il en résulte des pages web plus propres, plus
structurées et plus pérennes.
1.2
Du HTML au XHTML
Mais au fond, quelle différence entre ces langages, et d’où sort ce fameux X ? Le principe
de base est de considérer qu’un fichier HTML est également un fichier XML. Le XML est un
métalangage (langage qui définit des langages) et les pages web telles que nous vous avons appris
à les faire dans la séance précédente sont des fichiers XML. XML est utilisé pour de nombreuses
autres choses, comme les flux RSS, les fichiers de configuration, etc...
L’idée générale est de séparer le contenu de sa forme. Un document XML structure les informations, et permet ensuite de les organiser indépendamment de leur contenu. Voilà pourquoi
nous n’écrirons presque plus de définition de forme (taille, couleur, alignement) au sein du code
XHTML. On définit des zones, manipulables ensuite via le langage CSS.
Voilà 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érées comme obsolètes.
Rassurez-vous, aucune des ces balises ne vous ont été apprises à la première séance. Et d’une
manière générale, écitez de ”copier-coller” des gros morceaux de HTML depuis un autre site :
vérifiez d’abord sa validité vis-à-vis des standards du W3C.
2
Complément de XHTML
Nous allons apprendre ici à utiliser d’autres balises qui n’ont pas été évoquées à la première
séance.
2.1
La notion de validité
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és aux types MIME des fichiers que nous n’expliciterons pas ici. Une
3
2
COMPLÉMENT DE XHTML
fois que vous avez choisi une norme, vous devez l’indiquer dans le document. Celà se fait en
ajoutant les deux lignes suivantes avant le tag d’ouverture <html>.
<? xml v e r s i o n=” 1 . 0 ” e n c o d i n g=” i s o −8859−15” ?>
< !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éclarer la norme choisie
Vous remarquerez que la première déclaration indique l’encodage du fichier. Celà ne vous
empêche pas d’utiliser une balise META pour le préciser encore. En effet, cette déclaration
précise l’encodage lorsque le document est interprété comme un fichier xml, alors que la balise
META indique l’encodage lorsque le fichier est interprété en tant que XHTML.
Pour savoir si vos pages sont valides, vous pouvez vous rendre sur le site http ://validator.w3.org/
pour vérifier la validité 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é est un gage de sérieux de la part du
développeur.
Le tag d’ouverture <html> change légèrement lui aussi. Il convient de le déclarer comme
dans cet exemple :
<? xml v e r s i o n=” 1 . 0 ” e n c o d i n g=” i s o −8859−15” ?>
< !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 ”>
<html xmlns=” h t t p : / /www. w3 . o r g /1999/ xhtml ” xml : lang=” f r ”>
<head>
<t i t l e>Page v i d e pour t e s t e r</ t i t l e>
</head>
<body>
</body>
</html>
Un document XHTML 1.0 Strict
Ce fichier se trouve dans le dossier canevas et se nomme vide.htm.
2.2
Insérer des images dans vos pages
Pour ajouter des images, il suffit d’utiliser une balise <img>. Sa syntaxe est la suivante :
4
3
UTILISATION DU LANGAGE CSS
<img src=”URL v e r s l ’ image ” a l t=” Texte a l t e r n a t i f ou t i t r e ”
/>
Insérer des images
Vous pouvez voir que la balise <img> est une balise qui s’ouvre et se ferme avec un seul tag.
Cette balise peut aussi posséder des attributs width et height, mais nous vous déconseillons
leur utilisation. Il vaut mieux dimensionner correctement ses images avec un éditeur d’image.
Vous pouvez le faire avec The GIMP par exemple, qui est un logiciel libre de droits et gratuit.
Malgré la popularité 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é que JPEG.
Des fichiers d’images sont disponibles dans le répertoire canevas. Vous pouvez partir de
vide.htm pour faire un test.
2.3
Définir des listes d’éléments
Pour définir une liste d’éléments, comme dans un menu par exemple, utilisez ceci :
<ul>
< l i>Item
< l i>Item
< l i>Item
< l i>Item
< l i>Item
</ ul>
1</ l i>
2</ l i>
3</ l i>
4</ l i>
5</ l i>
Listes d’éléments
Les balises <li> peuvent bien sûr contenir des liens, des images ou autre. Néanmmoins, il
convient de ne les utiliser que pour un petit volume, comme pour les items d’un menu. Par
défaut, celà donne une liste à puce avec des éléments alignés verticalement, mais celà peut être
modifié avec CSS.
3
Utilisation du langage CSS
3.1
3.1.1
Lier sa page à une feuille de style CSS
Ce qu’est une feuille de style
A la séance précédente, vous avez tapé du code CSS à l’intérieur de la balise <style>. 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érêt de la manipulation
Lorsque vous allez créer un site, il sera composé de plusieurs pages XHTML différentes, et
vous voudrez (à moins d’être bizarre) qu’elles respectent un même design. On emploie le terme de
charte graphique. Vous allez donc pouvoir dire à la page de respecter les styles présents 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ême code HTML, seule la feuille de style change.
3.1.3
La pratique
Il existe plusieurs méthodes pour lier sa page à une feuille de style. Voici celle que nous vous
recommandons. Dans l’en-tête (à l’intérieur de la balise <head>), ajoutez le code suivant :
<s t y l e type=” t e x t / c s s ”>
@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 ’ ) ;
</ s t y l e>
Un document XHTML 1.0 Strict
L’avantage de cette méthode 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ée, et votre site s’affichera de manière simpliste mais lisible. Alors
qu’avec une autre méthode, un vieux navigateur pourrait interpréter à moitié la feuille de style
et rendre le site illisible.
3.1.4
Un exemple concret
Ouvrez le fichier style.htm dans votre navigateur. Puis éditez 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èle DOM
Document Object Model
Le Document Object Model est une manière de représenter votre document XHTML. Il
consiste à le considérer comme une structure arborescente. Chaque balise est un noeud, la
racine est la balise <html>. Pour toute balise donnée, les balises qu’elle contient sont appelées
ses enfants et la balise concernée le parent. Pour mieux comprendre celà, vous pouvez utilisez un
outil fort utile intégré dans le navigateur Firefox, appelé ”inspecteur DOM”. Reprenez le fichier
style.htm dans votre navigateur, puis cliquez sur Outils -> Inspecteur DOM. Développez
un peu l’arbre présenté 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 à donner un nom unique à ce noeud. Dans un document, deux attributs ”id” ne doivent
6
3
UTILISATION DU LANGAGE CSS
en aucun cas contenir la même valeur. Il s’agit d’un identifiant unique dans tous le document,
désignant le noeud qui le possède. Celà est utile pour désigner 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édant 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éritage
Les balises enfants possèdent une partie des propriétés CSS de leurs parents, notamment
toutes les propriétés de décoration du texte comme sa couleur, sa police, sa taille, son alignement,
etc. L’héritage concerne aussi les enfants des enfants, les enfants des enfants des enfants, etc.
Cette notion d’héritage est très puissante car elle peut s’utiliser avec les noms de balise, avec
les classes et avec les ID.
Il également possible d’utiliser cette notion d’héritage et d’arborescence pour désigner des
balises particulières. Par exemple, vous pouvez affecter par un style donné tous les paragraphes
(balises <p>) des ”DIV” d’une classe donnée (par exemple ”maclasse”). Vous le verrez dans la
section suivante.
Prenons un premier exemple qui montre comment les propriétés s’héritent. Le code CSS a
été écrit directement dans la balise <style> pour faciliter la lecture, bien que la méthode via
un fichier externe soit préconisée :
<? xml v e r s i o n=” 1 . 0 ” e n c o d i n g=” i s o −8859−15” ?>
< !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 ”>
<html xmlns=” h t t p : / /www. w3 . o r g /1999/ xhtml ” xml : lang=” f r ”>
<head>
<t i t l e>Page v i d e pour t e s t e r</ t i t l e>
<meta http−e q u i v=” Content−Type” content=” t e x t / xhtml ;
c h a r s e t=i s o −8859−1” />
<s t y l e content=” t e x t / c s s ”>
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 ;
}
</ s t y l e>
</head>
<body>
Ce t e x t e a l e s t y l e par dé f a u t .
<div c l a s s=” p a r e n t 1 ”>
Ce t e x t e e s t r o u g e .
<div c l a s s=” p a r e n t 2 ”>
Ce t e x t e e s t r o u g e e t s o u l i g n é .
<div c l a s s=” p a r e n t 3 ”>
Ce t e x t e e s t rouge , s o u l i g n é e t
italique .
</ div>
</ div>
</ div>
</body>
</html>
La notion d’héritage
Ce fichier se nomme heritage.htm. Ouvrez le dans votre navigateur pour voir les effets de
l’héritage. Comme vous pouvez le voir, les DIV imbriqués reprennent les propriétés de leurs
parents, sans qu’on ai besoin de les redéclarer.
3.3
Les sélecteurs CSS
Lorsque vous définissez un style, vous écrivez un nom, une classe ou un id, suivi d’accolades
contenant les propriétés CSS dont vous avez besoin. Ce qui se trouve avant ces accolades s’appelle
un sélecteur CSS.
8
3
3.3.1
UTILISATION DU LANGAGE CSS
Les sélecteurs de base
Vous connaissez déjà les sélecteurs de base. Les voici tout de même à titre de rappel :
/∗ Le s é l e c t e u r de b a l i s e s ∗/
div {
attribut : valeur ;
}
/∗ Le s é l e c t e u r de c l a s s e s ∗/
. maclasse {
attribut : valeur ;
}
/∗ Le s é l e c t e u r d ’ ID ∗/
#i d d u d i v {
attribut : valeur ;
}
Les sélecteurs de base
3.3.2
Sélecteurs de classe et d’ID
Si vous connaissez la nature des balises possédant les classes et les ID que vous utilisez, il
convient de l’indiquer dans le sélecteur. De cette manière par exemple :
/∗ Le s é l e c t e u r de c l a s s e s p l u s p r é c i s ∗/
/∗ N’ a f f e c t e que l e s DIV p o s sé d a n t c e t t e c l a s s e ∗/
div . maclasse {
attribut : valeur ;
}
/∗ Le s é l e c t e u r d ’ ID ∗/
/∗ S e u l e LE ( c a r i l d o i t ê t r e unique ) DIV p o s sé d a n t c e t ID
s e r a a f f e c t é ∗/
d i v#i d d u d i v {
attribut : valeur ;
}
Des sélecteurs plus précis
9
3
UTILISATION DU LANGAGE CSS
Notez qu’il ne doit pas y avoir d’espace après le nom de la balise dans ce cas.
3.3.3
Le sélecteur multiple
Le sélecteur multiple permet d’attribuer un lot de propriétés CSS à plusieurs sélecteurs en
même temps. Comme ceci par exemple :
/∗ Ce s é 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 <p> ∗/
d i v . u n e C l a s s e , span . uneAutre Classe , p {
attribut : valeur ;
}
Le sélecteur multiple
Celà est très utile pour éviter moults redondances.
3.3.4
Le sélecteur par héritage
Voilà sans aucun doute le plus intéressant des sélecteurs. Il permet de parcourir l’arborescence. Voyez plutôt :
/∗ Ce s é 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 é 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 é 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ême c o n t e n u s dans l e DIV d ’ i d ”menu” ∗/
10
4
ETUDE DE PROPRIÉTÉS CSS
d i v#menu d i v . item l i {
attribut : valeur ;
}
Le sélecteur multiple
4
Etude de propriétés CSS
Nous allons ici nous intéresser à quelques propriétés CSS. Avant celà, il est nécessaire de
comprendre une chose : vous n’ajoutez jamais de propriétés, vous modifiez les valeurs par défaut
de propriétés existantes.
4.1
Les images avec CSS
CSS permet à sa manière d’inclure des images. Celà est très utile lorsque vous avez besoin
d’images pour la décoration du site (bannières, bordures ombrées). Pour celà, il faut indiquer
à CSS une image de fond pour l’élément choisi. Celà est bien sûr utilisable sur la balise body.
Voici la méthode :
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ère propriété spécifie 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à est fort
utile pour composer des thèmes utilisables partout depuis le site.
– La deuxième propriété sert à gérer 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épétition. On peut
répéter l’image sur tout le plan (papier peint), sur l’axe horizontal, ou sur l’axe vertical.
On ne peut ne pas répéter du tout.La troisième propriété
– La troisième propriété permet de choisir ou l’image va se placer dans l’élément.
– La quatrième propriété prend la valeur fixed ou scroll. Celà n’a de sens que lorsqu’un
ascenseur apparaı̂t dans l’élément possédant l’image de fond. C’est souvent le cas si vous
mettez un fond à <body>. Si vous défilez 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éplacement de l’ascenseur. Attention : cette propriété ne fonctionne que sur <body>. Sur des DIV, sa valeur
reste fixed même si vous la changez.
11
4
ETUDE DE PROPRIÉTÉS CSS
Il convient d’utiliser background-color conjointement avec ces propriétés, 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érer la largeur à la hauteur des éléments. Celà se fait via
les propriétés width et height qui se précisent en pixels ou en pourcentage. Vous allez voir
un exemple au paragraphe suivant. Il existe également 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é.
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éfinissent 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
ETUDE DE PROPRIÉTÉS CSS
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érer les marges est important car celà joue sur la place que les éléments 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été 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ète de la page. Lorsque que vous utilisez
des SPAN, ceux-ci ne prennent que la largeur occupée par leur contenu et ne force pas les
autres SPAN à se placer au dessus et en dessous. Ces propriétés peuvent être changées via la
propriété CSS display. Cette propriété peut prendre 17 valeurs, mais nous n’en citerons que
3, à savoir block, inline et none. Lorsque la valeur choisie est block, l’élément concerné a le
comportement par défaut d’un DIV. Lorsque la valeur est inline, l’élément a le comportement
par défaut d’un SPAN. Vous pouvez de ce fait complètement inverser le fonctionnement de DIV
et SPAN, mais celà n’est pas recommandé.
Changer cette valeur est utile pour gérer l’alignement horizontal ou vertical d’un menu par
exemple. Voyez plutôt cet exemple, présent dans le fichier blocks.htm :
<? xml v e r s i o n=” 1 . 0 ” e n c o d i n g=” i s o −8859−15” ?>
< !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 ”>
<html xmlns=” h t t p : / /www. w3 . o r g /1999/ xhtml ” xml : lang=” f r ”>
<head>
<t i t l e>Images de fond</ t i t l e>
<meta http−e q u i v=” Content−Type” content=” t e x t / xhtml ;
c h a r s e t=i s o −8859−1” />
<s t y l e content=” t e x t / c s s ”>
13
4
ETUDE DE PROPRIÉTÉS CSS
div . blocs a {
display : block ;
}
div . cache a {
d i s p l a y : none ;
}
</ s t y l e>
</head>
<body>
<div>
Du
<a
<a
<a
Du
</ div>
t e x t e avant
href=”#”>Un
href=”#”>Un
href=”#”>Un
t e x t e a p rè s
les liens
l i e n</a>
Autre</a>
T r o i s iè m e</a>
les liens
<div c l a s s=” b l o c s ”>
Du t e x t e avant l e s l i e n s
<a href=”#”>Un l i e n</a>
<a href=”#”>Un Autre</a>
<a href=”#”>Un T r o i s iè m e</a>
Du t e x t e a p rè s l e s l i e n s
</ div>
<div c l a s s=” c a c h e ”>
Du t e x t e avant l e s l i e n s
<a href=”#”>Un l i e n</a>
<a href=”#”>Un Autre</a>
<a href=”#”>Un T r o i s iè m e</a>
Du t e x t e a p rè s l e s l i e n s
</ div>
</body>
</html>
Utilisation de la propriété display
Remarquez l’utilisation d’un sélecteur CSS par héritage. Utilisez l’inspecteur DOM de Mozilla Firefox pour visualiser l’espace occupé par les balises <a>. La valeur
14
4
4.4.2
ETUDE DE PROPRIÉTÉS CSS
La propriété float
Cette propriété est la plus délicate à comprendre et à maı̂triser. Elle permet de faire ”flotter”
un DIV. En fait, celà aura pour effet de réduire le DIV à la taille de son contenu, et d’autoriser
d’autres DIV (ou éléments dont la propriété display vaut block) à se placer à sa droite ou à sa
gauche, selon qu’on le fasse flotter à droite ou à gauche. Vous pouvez voir l’effet de float dans
les fichiers style.htm et marges.htm ou cette propriété est utilisée, ainsi que dans le paragraphe
suivant. Dans la pratique, lorsque vous faites flotter un élément, limitez toujours sa largeur à
l’aide de la propriété width.
4.4.3
La propriété clear
Cette propriété est très fortement liée à float puisqu’elle sert à interdire à un élément d’être
cotoyé par des flottants à sa droite ou sa gauche, ou les deux en mêmes temps (respectivement,
utilisez les valeurs left,right et both). Si vous faites flotter un élément mais que le suivant
interdit les flottants autour de lui, c’est comme si vous laissiez le comportement par défaut, à
ceci près que le flottant est limité à la largeur de son contenu.
Le listing suivant montre les comportements cités :
<? xml v e r s i o n=” 1 . 0 ” e n c o d i n g=” i s o −8859−15” ?>
< !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 ”>
<html xmlns=” h t t p : / /www. w3 . o r g /1999/ xhtml ” xml : lang=” f r ”>
<head>
<t i t l e>Bien g é r e r l e s marges</ t i t l e>
<s t y l e content=” t e x t / c s s ”>
body {
margin : auto ;
width : 7 0 0 px ;
}
d i v#c o r p s {
border −r i g h t : 1 px s o l i d #000;
border − l e f t : 1 px s o l i d #000;
padding−r i g h t : 2 5 px ;
padding− l e f t : 2 5 px ;
}
div . flottantGauche {
float : left ;
}
div . f l o t t a n t D r o i t {
float : right
}
d i v#p i e d 2 {
c l e a r : both ;
}
15
4
ETUDE DE PROPRIÉTÉS CSS
</ s t y l e>
</head>
<body>
<div id=” c o r p s ”>
<div>
<div c l a s s=” f l o t t a n t G a u c h e ”>
<ul>
< l i>Ce</ l i>
< l i>DIV</ l i>
< l i>e s t</ l i>
< l i>un</ l i>
< l i> f l o t t a n t</ l i>
</ ul>
</ div>
<div id=” t e x t e 1 ”>
Ce t e x t e e s t j u s t e l à pour f a i r e beau .
</ div>
<div id=” p i e d 1 ”>
Ce t e x t e a u s s i .
</ div>
</ div>
<p>&nbsp ;</p>
<div s t y l e=” c l e a r : both ; ”></ div>
<p>&nbsp ;</p>
<div>
<div c l a s s=” f l o t t a n t D r o i t ”>
<ul>
< l i>Ce</ l i>
< l i>DIV</ l i>
< l i>e s t</ l i>
< l i>un</ l i>
< l i> f l o t t a n t</ l i>
</ ul>
</ div>
<div id=” t e x t e 2 ”>
Ce t e x t e e s t j u s t e l à pour f a i r e beau .
</ div>
<div id=” p i e d 2 ”>
Ce t e x t e a u s s i .
</ div>
</ div>
</ div>
</body>
</html>
Utiliser les propriétés float et clear
16
5
4.4.4
RÉFÉRENCES
La propriété overflow
Cette propriété sert à gérer le comportement d’un objet lorsque son contenu est obligé
d’en dépasser. Il prend la valeur auto, scoll, hidden ou visible. Exemples dans le fichier
overflow.htm.
5
Références
–
–
–
–
–
–
–
Contacter l’auteur : [email protected]
Références CSS 2 : http ://www.w3schools.com/css/css reference.asp
Validateur W3C : http ://validator.w3.org/
Mammouthland : http ://www.mammouthland.net/cours/css/
OpenWeb : http ://openweb.eu.org/
Alsacréations : http ://www.alsacreations.com/
Les tableaux en XHTML :
http ://fr.selfhtml.org/html/tableaux/construction.htm
http ://fr.selfhtml.org/html/tableaux/constitution.htm
17