Comment créer un rembourrage dans CSS?
Le rembourrage CSS permet à un codeur HTML de définir le rembourrage ou l'espace mort par défaut à l'extérieur d'un élément HTML.L'avantage de le faire est qu'il évite au codeur de répéter ce code de rembourrage pour chaque instance de cet élément, et crée plus facilement la cohérence sur la page.L'élément HTML à rembourrer peut être n'importe quel nombre de choses, comme un paragraphe, une table ou un titre.
Pour créer un rembourrage dans CSS, vous devrez d'abord identifier l'élément HTML que vous souhaitez remplir.Cet élément que vous souhaitez remplir est connu comme le sélecteur.Ensuite, vous souhaitez spécifier les valeurs de rembourrage appropriées.Il existe cinq types différents de propriétés de rembourrage dans CSS mdash;Un pour les quatre côtés d'un élément à la fois, et quatre autres pour chaque côté individuel 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 est appelé une propriété raccourci .
Le langage de codage utilisé pour spécifier une déclaration de rembourrage CSS est simplement le mot «rembourrage».Suivant cette étiquette, sont les valeurs pertinentes du rembourrage, ou des informations sur la quantité d'espace souhaitée, généralement représentées soit par des pixels, soit en pourcentage.Le rembourrage et les valeurs sont écrits à l'intérieur des accolades bouclées ou des supports bouclés (c'est-à-dire {et}).L'élément HTML est précédent (par exemple, P pour le paragraphe ou H2 pour les en-têtes de niveau 2).
En termes de la valeur représentée, les valeurs peuvent être représentées en pixels (par exemple, 1px ou 5px), points (par exemple, 1 pt ou 5 pt) ou pouces (par exemple, 1 pouce ou 5 pouces), ou centimètres (par exemple, 1 cm ou 5 cm).Les valeurs peuvent également être déclarées en pourcentage de l'élément HTML.Si la valeur est de 50%, par exemple, le rembourrage égalera la moitié de la taille de l'élément.
Les exemples suivants sont le code HTML pour rembourrer un élément HTML par le biais des valeurs reflétées dans un pourcentage et une longueur, respectivement.Si une seule valeur est attribuée, les navigateurs Web affecteront ce rembourrage aux quatre côtés de l'élément HTML.
rembourrage: 10%;
rembourrage: 100px;
Ajouter plus de valeurs au type de déclaration de rembourrage ci-dessus amènera les navigateurs Web à les interpréter d'une certaine manière.Si deux valeurs sont attribuées, la première correspondra au haut et au bas, tandis que le second correspond à la gauche et à la droite.Trois valeurs entraîneront le premier se référer au haut, le second vers les côtés gauche et droit, et le troisième au bas de l'élément HTML.L'attribution du maximum de quatre valeurs fait correspondre les premières, deuxième, troisième et quatrième valeurs correspondant au haut, à la droite, au bas et à la gauche de l'élément HTML, dans cet ordre.Lorsque plusieurs valeurs sont fournies, elles doivent être séparées par des espaces et se terminent par un semi-colon, par exemple:
Tampon: 10px 20px 10px 20px;
Le rembourrage en CSS peut également être fait d'un côté à la fois.À cet égard, il y a quatre autres propriétés de rembourrage disponibles.Ce sont des padding, un rembourrage droit, un rembourrage et un padding-gauche.Pour créer un rembourrage dans CSS de cette manière plus précise, vous devrez étiqueter les propriétés avec la même syntaxe que les déclarations de raccourci que ci-dessus.Chacune de ces propriétés de rembourrage ne prend qu'une valeur en longueur ou en pourcentage.Par exemple:
padding-top: 10px;
padding-droite: 20px;
padding-bottom: 10px;
padding-left: 20px;
Le code suivant crée une page Web, déclare les propriétés de rembourrage entre les balises de style, etLes utilise ensuite dans un élément de paragraphe spécifié par la balise P.Le texte entre le / * et les * / sont des notes pour expliquer le type de rembourrage utilisé et ne seraient pas inclus dans le code de padding CSS.
lt; html gt;
lt; head gt;
lt; style type ' text / css gt;
P.Example1 {rembourrage: 10px;} / * rembourrage à main court pour les quatre côtés * /
P.Example2 {rembourrage: 50px 30px;} / * rembourrage à main courte pour le haut et le bas suivi par la gaucheet à droite * /
P.Example3 {
Padding-top: 10px;
Padding-Bottom: 20px;
Padding-Bottom: 10px;
Padding-Left: 20px;
} / * rembourrage individuel.* /
lt; / style gt;
lt; / head gt;
lt; body gt;
lt; p class ' example1 gt; ce texte a le même rembourrage de chaque côté.Le rembourrage de chaque côté est de 10px. Lt; / p gt;
lt; p class ' example2 gt; Ce texte a un rembourrage supérieur et inférieur de 50px et un rembourrage gauche et droit de la classe 30px. Lt; / p gt;
lt; p class' ”Exemple3” gt; Ce texte a un rembourrage supérieur de 10px, un rembourrage droit de 20px, un rembourrage inférieur de 10px et un rembourrage gauche de 20px. Lt; / p gt;
lt; / body gt;
lt; / html gt;
Dans l'exemple ci-dessus, «Exemple1», etc., sont des noms affectés à une classe, qui sont ensuite référencées 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 attribuée à un paragraphe.Remarquez les accolades après la déclaration de classe qui entourerait les affectations de valeur de propriété de rembourrage.
Bien que cela puisse sembler beaucoup de travail, c'est beaucoup moins en main-d'œuvre que de spécifier le rembourrage pour chaque paragraphe individuel.Vous pouvez déclarer une propriété de rembourrage pour l'élément souhaité, qui dans l'exemple ci-dessus est la balise P, puis référencer la classe lorsque vous utilisez l'élément entre les balises corporelles de la page.Si un seul type de rembourrage est nécessaire pour tous les paragraphes, vous n'avez pas du tout besoin d'utiliser des cours.Utilisez simplement le code suivant entre les balises de style, puis codez les paragraphes sans spécifier aucune classe.Ce code passerait entre les balises corporelles au lieu du code dans l'exemple ci-dessus.
P {padding: 10px 20px 10px 20px;}
Ce padding CSS que cela créerait affecterait tous les paragraphes même s'il n'y avait pas de classe spécifiée.