Mise en œuvre dans un projet professionnel
QUATRIÈME PARTIE
212
Le bandeau a désormais l’allure de la figure 16-3.
Mise en forme CSS
Des styles permettront d’obtenir l’habillage graphique souhaité. Créons le fichier
styles.css, feuille de styles globale du site web. Nous y rassemblerons toutes les
déclarations de mise en forme.
Une première règle, portant sur l’élément , concernera toutes les pages du
document. Les styles suivants suppriment les marges, optent pour un fond blanc et
définissent la famille et la taille de police par défaut :
Style du conteneur général
Pour affubler le bloc
QUATRIÈME PARTIE
212
Le bandeau a désormais l’allure de la figure 16-3.
Mise en forme CSS
Des styles permettront d’obtenir l’habillage graphique souhaité. Créons le fichier
styles.css, feuille de styles globale du site web. Nous y rassemblerons toutes les
déclarations de mise en forme.
Une première règle, portant sur l’élément , concernera toutes les pages du
document. Les styles suivants suppriment les marges, optent pour un fond blanc et
définissent la famille et la taille de police par défaut :
Style du conteneur général
Pour affubler le bloc
de l’image d’arrière-plan présentée figure 161, on y précisera la propriété raccourcie background définissant couleur de fond, image
de fond, sa position et son mode de répétition. Il aura la même hauteur que l’image
(100px) et en tant que bloc, occupera par défaut toute la largeur disponible.
Figure 16–3
En-tête sans mise
en forme
body {
margin: 0;
padding: 0;
background: white;
color: black;
font-size: 80%;
font-family: "Bitstream Vera Sans", Verdana, Arial, Helvetica, serif;
}
#header {
height: 100px;
background: #97C05F url(banniere.jpg) top left no-repeat;
}
de fond, sa position et son mode de répétition. Il aura la même hauteur que l’image
(100px) et en tant que bloc, occupera par défaut toute la largeur disponible.
Figure 16–3
En-tête sans mise
en forme
body {
margin: 0;
padding: 0;
background: white;
color: black;
font-size: 80%;
font-family: "Bitstream Vera Sans", Verdana, Arial, Helvetica, serif;
}
#header {
height: 100px;
background: #97C05F url(banniere.jpg) top left no-repeat;
}