Internet
Site Web: fonctionnement, structure et programmation
Les CSS permettent de contrôler le comportement des éléments en-ligne et de type bloc à l'aide du modèle de boîte. Selon ce modèle, chaque élément HTML est considéré par CSS comme une boîte rectangulaire constituée de plusieurs couches:
Chacune de ces différentes couches permettent d'ajuster la position d'un élément HTML par rapport aux autres. Ce chapitre a donc pour objectif de disséquer ce modèle en couches afin de voir à quel point il est possible de contrôler le positionnement des éléments HTML à l'aide des CSS.
Pour atteindre l'objectif visé, nous travaillerons directement sur le site du Bar Tête la Première que nous nous proposons de rénover au niveau du contenu et du style. Pour vous donner un avant-goût de ce que nous allons apporter au site, voici la version restylée que vous allez créer d'ici à la fin de cette section:
Nouveau style du site du Bar Tête la Première
Avant de vous lancer dans le gros oeuvre, faites connaissance avec le nouveau Bar téléchargeable ici. Comme vous pouvez le constater, la version précédente de la feuille de style bar.css a disparu bien que l'élément <link> soit toujours inclus dans le <head> du fichier bar.html: c'est normal car vous allez créer des styles entièrement nouveaux ! A ce dessein, commencez par créer un fichier bar.css que vous enregistrerez dans le même répertoire que le document HTML correspondant puis placez-y les règles de style suivantes:
Code CSS de la nouvelle feuille de style
Affichage du nouveau style par le navigateur
Afin d'aérer un peu le texte du site, il convient de rajouter dans un premier temps de l'interligne. Celui-ci est géré par la propriété line-height de la règle de body. Cette propriété permet de déterminer la taille de l'espace vertical situé entre deux lignes de texte. Comme pour les autres propriétés qui s'appliquent aux polices, cette taille peut s'exprimer en pixels, en em ou en pourcentage, ces deux dernières unités étant relatives à la taille de la police:
