Une feuille de style en cascade est une langue qui est utilisée pour ajouter des effets à la langue HTML. Sans CSS, HTML ne peut pas afficher son contenu dans la façon dont la page Web doit être. En d'autres termes, les deux langues sont responsables du développement et de la conception de pages Web. Dans cet article, nous allons expliquer une propriété de CSS qui est chargée de donner toutes les dimensions dans un seul ensemble de propriétés, inséré. Ces dimensions incluent les propriétés droite, inférieure, supérieure et gauche de tout contenu comme du texte ou de l'image, etc.

Pour expliquer le fonctionnement de la propriété d'encart, nous avons utilisé quelques exemples de base dans l'éditeur de texte en utilisant CSS en ligne et interne. La syntaxe de base utilisée pour la propriété d'encart est:

Il n'est pas nécessaire de prendre toutes les valeurs en pixels,% peut être utilisé alternativement. De même, l'ordre de dimension n'est pas spécifié. Ça peut être changé.

Exemple 1:

Pour expliquer le fonctionnement de la propriété CSS INSET, nous créerons un contenu HTML de base pour former un exemple de page Web. Sans styliser de quoi les balises HTML simples sont responsables, cela sera vu à partir de la sortie. Cela se fait en utilisant un titre

un texte audacieux simple et un paragraphe mentionné à l'intérieur du div. Toutes ces balises sont écrites à l'intérieur de la balise du centre, cette balise alignera tout le contenu de HTML au centre. Ce type de style est en ligne CSS.

Enregistrez le code avec l'extension HTML et ouvrez-la dans le navigateur. Vous verrez qu'une page Web statique n'est formée qu'avec le texte comme une rubrique et un paragraphe.

Maintenant, nous allons ajouter des CSS internes aux balises HTML ci-dessus. Toutes les balises sont les mêmes mais ont une déclaration de classe supplémentaire.

Tout d'abord, nous créerons un titre. Ensuite, le texte audacieux. Faire une pause
. Cette balise est responsable du saut à la ligne suivante et de la formation d'un espace vide entre le texte brut et le div. Une balise Div est utilisée pour créer un conteneur Div pour stocker d'autres contenus de HTML (comme du texte, des images, etc.,) Lorsqu'un paragraphe est déclaré. Le nom de classe «un» dans le paragraphe est mentionné afin que tous les effets déclarés dans la feuille de style soient accessibles et appliqués à ce paragraphe.

1

Fermez la balise Div et la balise centrale. À l'intérieur de la section Head, nous utiliserons une balise de titre pour donner un nom au site Web. Ce titre apparaît sur l'onglet du navigateur.

Utilisez la balise de style. À l'intérieur de cette balise, utilisez un style pour le titre. Nous avons appliqué une couleur de police au texte de titre. Ceci est un CSS interne. De même, Div est utilisé pour appliquer des effets à ce sujet. Tout d'abord, la couleur d'arrière-plan de la div est définie. Ensuite, les dimensions nécessaires à la taille du div sont ajoutées pour former un effet. Ces dimensions incluent les valeurs de largeur et de hauteur dans les pixels.

Après avoir appliqué ces effets, nous avons créé une classe, '.un ', dont le nom a été mentionné dans la balise de paragraphe. La classe est déclarée avec un point au début qui le spécifie comme une classe.

La classe et les IDS dans HTML CSS sont formés pour appliquer un style au contenu HTML. En utilisant ce mécanisme, nous pouvons nous abstenir du style CSS en ligne qui rend l'ensemble du code désordonné. Tandis que le CSS interne rend le code de style facilement compréhensible et rend le code court. Il nous suffit d'ajouter ces cours et le nom d'identification de CSS. Dans ces balises HTML spécifiques, où nous voulons appliquer les effets mentionnés dans la classe ou les ID, mentionnés dans CSS interne.

Revenant au '.Une «classe, dans la propriété encadrée du paragraphe, nous avons utilisé 4 valeurs dans des pixels. Les valeurs peuvent également être mentionnées en pourcentages. La valeur d'encart contient les 4 valeurs supérieures, droites, inférieures et gauche pour le paragraphe à former à l'intérieur du conteneur div.

1 2 3 4 5

.un Encart: 10px 40px 30px 0px;

Ces 4 valeurs sont les valeurs de marge du texte du paragraphe car ces valeurs alignent le texte à l'intérieur du div. La couleur d'arrière-plan est également donnée au paragraphe. Toutes les valeurs d'alignement inserrées sont pour le texte à l'intérieur de la div uniquement.

Fermez toutes les balises CSS et tête et enregistrez le fichier. Lorsque nous exécuterons ce fichier dans le navigateur, vous verrez que tous ces effets appliqués au contenu du corps HTML sont appliqués, en particulier dans la section de paragraphe. E a ajouté la couleur d'arrière-plan au paragraphe pour montrer les effets des valeurs d'encart. Toutes les 4 valeurs d'encart sont appliquées au texte du paragraphe.

Exemple 2:

Span est également une sorte de conteneur div qui y porte principalement du texte. Ces deux contenus HTML Div et Span sont stylés via CSS interne. Donc, nous allons d'abord développer la section Style. Le conteneur Div est appliqué avec la couleur d'arrière-plan, la hauteur et la largeur des dimensions, et avec la couleur de la police. Ce style CSS créera une div avec quelques effets.

Maintenant, la classe ".exampleText ». Cette classe est accessible par le texte de portée uniquement à l'intérieur du div. Le CSS de cette classe contient un mode d'écriture pour le texte vertical afin que le texte puisse occuper moins d'espace. Ensuite, la propriété d'encart est également définie en conséquence. Toutes les valeurs d'encart dans les pixels sont fournies pour maintenir la distance marginale entre le texte et les limites de div.

1 2 3 4 5 6 7

.exampleText mode d'écriture: Vertical-RL; Position: absolue; Encart: 40px 50px 30px 60px; Color d'arrière-plan: # F8FC08;

Après la section de la tête, le corps ne contient que l'étiquette Div et une étiquette de portée à l'intérieur du corps de la balise Div.

Enregistrez le code et exécutez le fichier. Vous verrez que la div et la portée sont affichées en fonction des valeurs d'encart appliquées au texte. Les valeurs d'encart sont étroitement affichées pour y corriger le texte.

Maintenant, si nous apportons quelques modifications en modifiant les valeurs d'encart de telle manière que nous n'utilisons que 2 valeurs d'encart au lieu de 4, tandis que toutes les autres valeurs restent les mêmes, alors quelle sera l'image résultante?

1 2 3 4

.exampleText Encart: 4px 8px;

Nous avons réglé 4 et 8px. La page Web résultante contiendra la div et le texte qui a l'espace près de la div. En effet.

Conclusion:

La propriété CSS INSET est utilisée pour ajouter des valeurs à la dimension du contenu HTML collectivement. Pour développer ce concept, nous avons commencé par donner un aperçu de HTML et CSS et des types utilisés dans cet article. La propriété d'encart aide l'utilisateur à ajouter une marge au contenu intérieur respectif à l'extérieur, soit en ayant les 4 dimensions collectivement ou en éliminant toute valeur de la propriété. En outre, deux exemples sont discutés pour élaborer la fonction et le fonctionnement de la propriété d'encart dans une page Web.