Editions ENI Livres | Vidéos | e-Formations
Les styles pour les boîtes
Les objectifs
La notion de boîte est un principe fondamental dans la conception des pages HTML et de leur mise en forme en CSS. Ces boîtes vont être le principal élément pour concevoir des mises en page élaborées dans les sites web modernes.
Ces boîtes peuvent être tout type de conteneur : des boîtes <div> ou des conteneurs sémantiques comme les éléments <main>, <nav>, <article>… Dans ce chapitre, les boîtes de mise en page seront vues avec des boîtes <div> pour plus de facilité.
Le concept du modèle de boîte
Une boîte est un conteneur rectangulaire qui peut contenir tout type de contenu : du texte, des images, des tableaux, des formulaires, mais aussi d’autres boîtes. Ces boîtes possèdent plusieurs caractéristiques structurelles :
-
Un contenu (content) qui peut être de tout type. C’est la zone en trait fin dans le schéma ci-dessous.
-
Un remplissage interne (padding) qui détermine l’espace entre le contenu et la limite de la boîte. C’est la zone entre le contenu (trait fin) et la bordure (trait épais) dans le schéma ci-dessous.
-
Une bordure (border) qui s’applique sur la limite de la boîte. C’est le trait épais dans le schéma ci-dessous.
-
Une marge (margin) qui définit l’espace entre la limite de la boîte et les autres éléments autour de cette boîte. C’est la zone entre les pointillés extérieurs et la bordure, dans le schéma ci-après.
L’affichage des boîtes
1. Les principes
Avec l’ancienne version de l’HTML, la v 4.1, les boîtes utilisaient principalement deux types d’affichage : l’affichage en bloc et l’affichage en ligne, nommés respectivement block et inline. Avec l’HTML5, cette notion n’est plus utilisée et elle est remplacée par la notion de type de contenu : kinds of content. Voici l’URL qui explique cette notion : https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content
Les CSS utilisent cette notion d’affichage avec la propriété display. Cette dernière permet de modifier le type d’affichage des boîtes. Les deux principaux types d’affichage en CSS restent block et inline. Mais il existe beaucoup d’autres types d’affichage. Voici l’URL sur le site de W3Schools qui recense tous les types d’affichage : https://www.w3schools.com/cssref/pr_class_display.php et dont voici le tableau récapitulatif :
L’affichage en bloc (display: block) est utilisé pour les conteneurs de texte (<p>, <h1> à <h6>, <ul>...) et les éléments de structure (<nav>,, <div>...). Ces éléments sont donc affichés sur toute la largeur disponible dans la fenêtre du navigateur ou de leur élément parent. De plus, chaque élément possède...
Les marges externes
1. La marge globale et les marges différenciées
Les marges externes permettent de définir l’espace autour des boîtes. Il y a quatre marges possibles : en haut, à droite, en bas et à gauche. Si la même valeur doit être appliquée sur les quatre côtés, c’est la propriété margin qu’il faut utiliser. Si il faut différencier les valeurs des quatre côtés, voici les propriétés à utiliser :
-
margin-top : marge haute
-
margin-right : marge droite
-
margin-bottom : marge base
-
margin-left : marge gauche
Voici un exemple simple d’application de ces propriétés :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
<style>
#p-un {
margin: 30px ;
}
#p-deux {
margin-top: 30px ;
margin-right: 50px ;
margin-bottom: 40px ;
margin-left: 60px ;
}
</style>
</head>
<body>
<p>Aenean eu leo quam...</p>
<p...Les bordures
Il est possible d’appliquer des bordures sur les quatre côtés des boîtes avec la propriété border. Si des bordures différentes sur chaque côté de la boîte doivent être appliquées, il faut utiliser les propriétés border-top, border-right, border-bottom et border-left.
Les bordures utilisent trois propriétés individuelles : border-style pour le type de bordure, border-width pour l’épaisseur et border-color pour la couleur. Voici les valeurs possibles pour la propriété border-style : dotted, dashed, solid, double, groove, ridge, inset et outset.
Bien sûr, il est possible d’utiliser des propriétés différentes pour chaque côté ou identiques pour toutes les bordures. Dans ces syntaxes raccourcies, l’ordre des valeurs importe peu : border: 3px #c00 solid ; est équivalent à border: solid 3px #c00 ;.
Voici un exemple simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
<style>
#p-un {
border: solid 3px #aaa ;
}
#p-deux {
border-top: 3px dashed darkblue ;
...Les remplissages internes
Le remplissage interne, propriété padding, détermine l’espace entre le contenu et la bordure. Avec la propriété padding le remplissage est identique des quatre côtés. Pour différencier les quatre côtés, il faut utiliser les propriétés padding-top, padding-right, padding-bottom et padding-left.
Voici un exemple simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
<style>
p {
border: 1px solid black ;
}
#p-un {
padding: 10px ;
}
#p-deux {
padding-top: 10px ;
padding-right: 20px ;
padding-bottom: 30px ;
padding-left: 40px ;
}
</style>
</head>
<body>
<p id="p-un">Lorem ipsum dolor sit amet...</p>
<p id="p-deux">Cras mattis consectetur purus...</p>
</body>
</html> Voici l’affichage obtenu :
La largeur et la hauteur
1. Les dimensions du contenu
La largeur et la hauteur du contenu des boîtes sont spécifiées avec les propriétés width et height. Ces dimensions concernent strictement et exclusivement le contenu des boîtes.
Ces dimensions se calculent toujours par rapport à l’élément parent qui peut être l’élément <body>, soit la largeur de la fenêtre du navigateur. Si la largeur de l’élément inclus est supérieure à celle de son élément parent, l’élément enfant conserve ses dimensions et « déborde » de son élément parent. Si ces dimensions ne sont pas renseignées, la boîte occupe toute la place disponible dans son élément parent.
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
<style>
p {
border: 1px solid black ;
}
#p-un {
width: 600px ;
height: 150px ;
}
#p-deux {
width: 400px ;
height: 125px ;
}
#special {
width: 300px ;
background-color: #eee ;
}
</style>
</head>
<body>
<p>Vestibulum id ligula porta...</p>
<p id="p-un">Lorem ipsum...Les arrière-plans
1. La couleur d’arrière-plan
La propriété background-color permet d’appliquer une couleur d’arrière-plan à la boîte. Toutes les notations des couleurs vues précédemment sont utilisables : en hexadécimale, par les noms, rgb(), rgba(), hsl() et hsla().
Voici un exemple simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
<style>
p {
width: 600px ;
padding: 20px ;
border: 10px solid #000 ;
}
#p-un {
background-color: #7be ;
}
#p-deux {
background-color: rgb(200,200,200) ;
}
</style>
</head>
<body>
<p id="p-un">Lorem ipsum dolor...</p>
<p id="p-deux">Lorem ipsum dolor...</p> </body>
</html> Voici l’affichage obtenu :
2. Les images d’arrière-plan
La propriété background est la forme raccourcie qui permet d’appliquer un arrière-plan à une boîte. Cette propriété utilise ces propriétés individuelles :
-
background-image indique le chemin d’accès au fichier de l’image, avec le paramètre url().
-
background-position indique la position d’origine de l’image dans la boîte. Par défaut, l’image est placée en haut à gauche de la boîte. Avec cette propriété, il est possible de modifier la position avec une valeur numérique ou ces valeurs prédéfinies : left, center, right, top et bottom.
-
background-size détermine comment l’image est redimensionnée pour occuper la totalité de la place disponible dans la boîte. La valeur contain permet de redimensionner l’image proportionnellement et faire en sorte qu’elle soit totalement visible. La valeur cover fonctionne de la même manière, sauf qu’une partie de l’image...
Les coins arrondis
La propriété border-radius permet d’appliquer des coins arrondis de plusieurs types différents aux boîtes. La propriété border-radius est la syntaxe raccourcie des quatre propriétés individuelles qui permettent d’appliquer des arrondis spécifiques aux quatre coins d’une boîte :
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius Le rayon de l’arrondi de chaque coin s’exprime avec une valeur numérique. Si une seule valeur est spécifiée, elle s’applique à tous les coins. Si deux valeurs sont spécifiées, elles s’appliquent aux coins en haut à gauche et en bas à droite ; et en haut à droite et en bas à gauche.
Voici des exemples simples :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
<style>
p {
width: 600px ;
padding: 20px ;
border: 5px solid #000 ;
}
#p-un {
border-radius: 20px ;
}
#p-deux...Les ombres portées
La propriété box-shadow permet d’appliquer une ombre portée aux boîtes, avec plusieurs valeurs disponibles :
-
horizontal offset : décalage de l’ombre vers la droite.
-
vertical offset : décalage de l’ombre vers le bas.
-
blur radius : taille du flou de l’ombre. Cette valeur est optionnelle. La valeur par défaut est de 0.
-
spread distance : détermine le point à partir duquel l’ombre s’estompe. Cette valeur est optionnelle.
-
color : couleur de l’ombre portée. Cette valeur est optionnelle. La couleur est noire par défaut.
-
inset : permet d’appliquer l’ombre vers l’intérieur de la boîte.
Voici des exemples simples :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
<style>
p.cadre {
width: 600px ;
padding: 20px ;
border: 5px solid #000 ;
background-color: #eee ;
}
#p-un {
box-shadow: 10px 10px ;
}
#p-deux {
box-shadow: 10px 10px 5px #bbb ; ...