CSS Border en ligne

Les frontières en ligne et en ligne sont les deux propriétés de base du style tout contenu créé dans un corps HTML - soit un morceau de texte, de forme ou d'image. Un langage de balisage hypertexte est la combinaison du code utilisé pour créer un contenu sur une page Web. Ce contenu est stylé et aligné via des balises supplémentaires à l'aide de la feuille de style en cascade.

Une bordure en ligne est une propriété qui est ajoutée au contenu HTML pour mettre en évidence cette partie spécifique en donnant une couleur ou toute propriété solide ou pointillée à la frontière. Ce tutoriel contient quelques exemples de création et de conception d'une bordure en ligne CSS.

Exemple n ° 1: Style de bordure en pointillés

Tout d'abord, nous expliquons la section de style CSS à l'intérieur de l'étiquette de tête. Le style interne contient les ID et les classes pour appliquer le style au contenu pertinent qui est développé à l'intérieur du corps HTML. Nous utilisons la classe de style «H1» pour se diriger 1 et y appliquer une couleur violette. Le style imbriqué est pour le div. Ceci est appliqué par la largeur et le conteneur en pixels. C'est une boîte à conteneurs qui est utilisée pour stocker les différents contenus à l'intérieur. Ensuite, nous écrivons un texte simple à l'intérieur de la classe div.

Une bordure est appliquée à n'importe quelle caractéristique du HTML. Dans cet exemple, nous appliquons une bordure à la classe div autour du texte que nous utilisons. Ainsi, la déclaration de style pour la frontière est appliquée sur la classe Div. «Un» est créé qui est mentionné à l'intérieur de la balise div afin que tous les effets de la bordure soient appliqués au conteneur div.

Il existe trois styles de contenu de base qui sont appliqués à la div. L'un est le type de bordure, qui est solide ou pointillé. Nous sélectionnons la bordure solide avec une couleur noire ayant une largeur de 5 pixels.

La propriété suivante est la propriété de la frontière en ligne. Cette propriété de style est choisie comme anéantie. Cela signifie que les lignes verticales de la bordure sont anéanties, tandis que les lignes horizontales sont solides simples. Si nous ne mentionnons aucune propriété de style des frontières, alors, par défaut, il est sélectionné comme bordure solide. La couleur de l'arrière-plan dans la div est définie comme rose. Ceci est fait pour discriminer la partie div à l'arrière-plan de toute la page Web.

Code de style HTML:

Dirigeant vers la partie du corps HTML, nous concevons chaque contenu du HTML au centre de la page Web. Tout d'abord, la balise de style est utilisée. La couleur BG qui représente la couleur d'arrière-plan de la page Web est définie à l'intérieur de la balise corporelle. Une rubrique est déclarée. Après avoir appliqué une petite pause, pour échapper à une seule ligne dans le HTML, la balise Div est déclarée avec la classe de la déclaration CDD.

Code corporel HTML:

Cette déclaration de classe est chargée d'appliquer tous les effets de style liés à la frontière. Maintenant, fermez toutes les balises et enregistrez le fichier texte. Exécutez ce fichier sur le navigateur pour voir le résultat de ce code.

Sortir:

Vous verrez que la couleur BG est appliquée avec les titres. Une div est conçue avec la frontière ayant une nature solide, avec le style de bordure en ligne comme anéanti. Ainsi, en utilisant une valeur de propriété en ligne en pointillés, nous pouvons obtenir une sortie comme celle-ci.

Exemple n ° 2: style solide en ligne avec mode d'écriture horizontale

À l'intérieur de la partie du corps du HTML, le code HTML est presque le même que nous avons utilisé dans l'exemple précédent. Un code est écrit à l'intérieur de la balise centrale, avec un div déclaré. À l'intérieur du div, une balise de paragraphe est utilisée avec un texte brut, avec une classe comme une déclaration de style. Un nom de classe «Exemple de texte» est responsable de tous les effets. Et les modifications appliquées au paragraphe

sont le cas de la frontière. Fermez toutes les étiquettes et accédez à la partie tête pour concevoir le contenu à l'intérieur de la div avec une bordure.

Code corporel HTML:

Accédez à l'étiquette de style à l'intérieur de la section Head. Nous ajoutons d'abord le CSS au conteneur div. La couleur d'arrière-plan est appliquée à la div avec la hauteur et la largeur pour créer une boîte en arrière-plan.

Code de style HTML:

Comme nous avons ajouté un exemple de classe de texte au paragraphe à l'intérieur du div, maintenant nous appliquons le style de bordure au texte. Dans cette classe, nous utilisons un style du mode d'écriture au paragraphe. Par exemple, nous utilisons un mode d'écriture vertical. Le texte apparaît à partir du haut en bas au lieu du style horizontal par défaut qui est de gauche à droite.

De plus, la bordure est appelée une couleur violette solide. La propriété de style en ligne de la bordure est définie comme solide. Ainsi, la bordure est une forme rectangulaire solide autour du texte dans une direction verticale. Maintenant, nous exécutons le code sur le navigateur.

Sortir:

Vous verrez qu'un affichage vertical du texte est créé. Ce texte a une bordure autour de lui qui a une spécialité d'épaisseur solide de 5 pixels et un style de bordure en ligne solide.

Compte tenu du même exemple précédent, nous appliquons des effets différents au code. L'application du mode d'écriture de la manière opposée en utilisant le style de bordure et les modifications de style en ligne peuvent provoquer un effet différent sur le texte que nous utilisons pour mettre en évidence le HTML.

Code de style:

Dans le cas de Div, la largeur et la hauteur sont augmentées pour former une grande boîte rectangulaire. De même, nous modifions également les valeurs à l'intérieur du «.Classe exampleText ”pour appliquer les effets sur la frontière.

Nous utilisons le mode d'écriture du texte, car il s'agit de la propriété texte, dans une direction horizontale. Cela signifie que le texte est comme la ligne par défaut à partir de la direction de gauche vers la droite. La bordure est réglée comme en pointillé de 5 pixels dans la largeur et magenta. Tandis que le style en ligne de la frontière est considéré comme la même propriété solide. Tous les autres effets comme la couleur d'arrière-plan sont les mêmes et tout le code à l'intérieur est également le même.

Sortir:

Lorsque vous exécutez le fichier dans le navigateur, vous verrez qu'une ligne de texte horizontale est créée avec une bordure avec une ligne pointillée. De cette façon, nous pouvons créer les bordures qui varient en forme et en style.

Conclusion

Le style de bordure en ligne joue un rôle essentiel dans le style de la bordure du texte et de l'image, ou tout type de forme. Nous avons essayé dans ce tutoriel pour vous fournir les meilleurs exemples des frontières CSS en ligne en utilisant le code HTML et le style CSS à l'intérieur du fichier. Au début, nous avons donné un aperçu de la langue frontale HTML et CSS. Dans la section de mise en œuvre, nous avons d'abord implémenté la bordure autour du texte avec des propriétés en ligne de bordure spécifiées. La frontière dépend du style d'écriture; Il se façonne en fonction du style de texte. Par exemple, pour le style d'écriture vertical du texte, la bordure est dans la direction verticale.