Comment créer un rembourrage en CSS?
Le remplissage CSS permet à un codeur HTML de définir le remplissage par défaut ou l'espace mort en dehors d'un élément HTML. L'avantage de cette opération est qu'elle évite au codeur de répéter ce code de remplissage pour chaque instance de cet élément et crée plus facilement une cohérence sur la page. L'élément HTML à compléter peut être un nombre quelconque d'éléments, tels qu'un paragraphe, un tableau ou un en-tête.
Pour créer un remplissage en CSS, vous devez d'abord identifier l'élément HTML que vous souhaitez remplir. Cet élément que vous souhaitez compléter est appelé sélecteur. Ensuite, vous voudrez spécifier les valeurs de remplissage appropriées. Il existe cinq types différents de propriétés de remplissage dans CSS: un pour les quatre côtés d’un élément à la fois et quatre autres pour chaque côté de l’élément (par exemple, le côté gauche, le côté droit, le côté supérieur ou le côté inférieur). ). Une propriété qui permet au programmeur de spécifier des valeurs pour les quatre côtés d'un élément HTML à la fois s'appelle une propriété abrégée .
Le langage de codage utilisé pour spécifier une déclaration de remplissage CSS est simplement le mot «padding». Après cette étiquette, figurent les «valeurs» pertinentes du remplissage, ou des informations sur la quantité d’espace souhaitée, généralement représentées par des pixels ou une pourcentage. Le remplissage et les valeurs sont écrits entre accolades ou accolades (c'est-à-dire "{" et "}"). L'élément HTML à compléter est précédé de tout cela (par exemple, "p" pour le paragraphe ou "H2" pour les en-têtes de niveau 2).
En termes de représentation de la valeur, les valeurs peuvent être représentées en pixels (par exemple, 1px ou 5px), en points (par exemple, 1pt ou 5pt) ou en pouces (par exemple, 1in ou 5in) ou en centimètres (par exemple, 1cm ou 5cm) . Les valeurs peuvent également être déclarées sous forme de pourcentage de l'élément HTML en cours de style. Si la valeur est 50%, par exemple, le remplissage sera égal à la moitié de la taille de l'élément.
Les exemples suivants sont le code HTML permettant de remplir un élément HTML avec des valeurs reflétées respectivement par un pourcentage et une longueur. Si une seule valeur est affectée, les navigateurs Web attribueront ce remplissage aux quatre côtés de l'élément HTML.
rembourrage: 10%;
rembourrage: 100px;
Si vous ajoutez plus de valeurs au type de déclaration de remplissage ci-dessus, les navigateurs Web les interpréteront d'une certaine manière. Si deux valeurs sont attribuées, la première correspond aux haut et bas, tandis que la seconde correspond aux gauche et droite. Trois valeurs font en sorte que la première se réfère au haut, la seconde aux côtés gauche et droit et la troisième au bas de l'élément HTML. L'attribution du maximum de quatre valeurs fait que les première, deuxième, troisième et quatrième valeurs correspondent aux haut, à droite, au bas et à gauche de l'élément HTML, dans cet ordre. Lorsque plusieurs valeurs sont fournies, elles doivent être séparées par des espaces et terminées par un point-virgule, par exemple:
remplissage: 10px 20px 10px 20px;
Le rembourrage en CSS peut également être effectué côté par côté. À cet égard, quatre autres propriétés de remplissage sont disponibles. Ce sont padding-top, padding-right, padding-bottom et padding-left. Pour créer un remplissage en CSS de cette manière plus précise, vous devez étiqueter les propriétés avec la même syntaxe que les déclarations abrégées ci-dessus. Chacune de ces propriétés de remplissage ne prend qu'une valeur en longueur ou en pourcentage. Par exemple:
rembourrage en haut: 10px;
padding-right: 20px;
rembourrage en bas: 10px;
padding-left: 20px;
Le code suivant crée une page Web, déclare les propriétés de remplissage entre les balises de style, puis les utilise dans un élément de paragraphe spécifié par la balise p. Le texte entre / / et * / est une note expliquant le type de remplissage utilisé et ne serait pas inclus dans le code de remplissage CSS.
<html>
<tête>
<style type = "text / css">
p.example1 {padding: 10px;} / * Rembourrage à la main courte pour les quatre côtés * /
p.example2 {padding: 50px 30px;} / * Rembourrage à la main courte pour le haut et le bas suivi du gauche et du droit * /
p.exemple3 {
rembourrage en haut: 10px;
rembourrage en bas: 20px;
rembourrage en bas: 10px;
padding-left: 20px;
} / * Rembourrage individuel. * /
</ style>
</ head>
<body>
<p class = "example1"> Ce texte a le même remplissage de chaque côté. Le rembourrage de chaque côté est 10px. </ P>
<p class = "example2"> Ce texte a un remplissage supérieur et inférieur de 50 pixels et un remplissage gauche et droit de 30 pixels. </ p>
<p class = ”example3”> Ce texte a un remplissage supérieur de 10px, un remplissage droit de 20px, un remplissage inférieur de 10px et un remplissage gauche de 20px. </ p>
</ body>
</ html>
Dans l'exemple ci-dessus, «exemple1», etc., sont des noms attribués à une classe, qui sont ensuite référencés dans les paragraphes. La période entre la balise p et les noms de classe au début du code indique une déclaration d'une classe affectée à un paragraphe. Notez les accolades après la déclaration de classe contenant les attributions de valeur de la propriété de remplissage.
Bien que cela puisse sembler beaucoup de travail, cela demande beaucoup moins de travail que de spécifier le remplissage pour chaque paragraphe. Vous pouvez déclarer une propriété de remplissage pour l'élément souhaité, qui dans l'exemple ci-dessus est la balise p, puis faire référence à la classe lorsque vous utilisez l'élément entre les balises body de la page. Si un seul type de remplissage est requis pour tous les paragraphes, vous n'avez pas besoin d'utiliser de classes du tout. Utilisez simplement le code suivant entre les balises de style, puis codez les paragraphes sans spécifier de classe. Ce code irait entre les balises body au lieu du code de l'exemple ci-dessus.
p {padding: 10px 20px 10px 20px;}
Ce remplissage CSS que cela créerait aurait une incidence sur tous les paragraphes, même si aucune classe n'était spécifiée.