Comme nous le savons, HTML fournit la structure des pages Web, et CSS peut être utilisé pour appliquer des styles. CSS a également différentes propriétés de style qui sont utilisées pour dessiner différentes formes, telles que les carrés, les cercles, les rectangles, les ovales, les lignes et plus encore. Plus précisément, une ligne est l'un des éléments les plus polyvalents et couramment utilisés de la conception qui peuvent être ajoutés horizontalement et verticalement.

Cet article enseignera la procédure pour dessiner des lignes horizontales et verticales à l'aide de CSS. Commençons!

Comment tracer une ligne avec CSS?

Pour dessiner des lignes horizontales et verticales à l'aide de CSS, différentes propriétés peuvent être utilisées, telles que:

• "frontière"
• "frontière"
• "frontière"
• "Bordure du bas"

Passons de l'avant pour comprendre le fonctionnement des propriétés ci-dessus!

Html
Pour tracer des lignes, premièrement, nous spécifierons le «”Élément à l'intérieur du corps de notre fichier HTML:

Maintenant, pour coiffer une div, utilisez les propriétés appropriées. Dans notre cas, nous attribuerons le «Couleur de l'arrière plan«Valeur de la propriété comme«# E4A2A4", et le "frontière«Valeur de la propriété comme«Solide 2px # 0FAFC4», Qui indique respectivement sa largeur, son type et sa couleur, et le«hauteur«La propriété est définie comme«200px".

CSS

div
Color en arrière-plan: # E4A2A4;
Border: 2px solide # 0FAFC4;
hauteur: 200px;

Exemple 1: tracer la ligne horizontale avec CSS
Habituellement, le

---

L'élément est utilisé pour tracer des lignes horizontales dans HTML. Cependant, pour tracer une ligne horizontale avec CSS, ajouter

élément pour le titre puis placez un nommé "h_line”À l'intérieur de la div décrite ci-dessus du fichier HTML.

Html

Ligne horizontale

Maintenant, utilisez les propriétés CSS pour tracer une ligne horizontale:

• Nous utiliserons le «Bordure du bas»Propriété, qui est associée à une à trois valeurs pour la largeur de ligne, le type de ligne et la couleur. L'exemple fourni ci-dessous définit sa valeur comme «6px RVB solide (80,80,78)".
• Pour ajuster la taille de la ligne, nous avons réglé le «largeur«Valeur de la propriété comme«300px".
• Le "marge«La valeur de la propriété est définie comme«auto», Représentant que la marge est égale de tous les côtés. Le "en haut»La propriété peut également être utilisée à cet effet.

CSS

.h_line
Bordure-fond: 6px RVB solide (80, 80, 78);
Largeur: 300px;
marge: auto;

Maintenant, enregistrez le fichier HTML et ouvrez-le dans votre navigateur:

Comme vous pouvez le voir, nous avons tracé une ligne horizontale avec succès avec la propriété de la frontière CSS.

Exemple 2: Tracez la ligne verticale avec CSS
Pour tracer une ligne verticale, nous ajouterons

Tag pour le titre, puis placez un nommé "v_line”À l'intérieur de la div décrite ci-dessus du fichier HTML.

Html

Ligne verticale

Fournissons le «v_line»Div avec certaines propriétés CSS. Pour tracer une ligne verticale, nous utiliserons:

• Le "frontière"La propriété est attribuée avec des valeurs"RVB solide 5px (2, 99, 135)», Où la première valeur représente la largeur de ligne, la deuxième valeur représente le type de ligne et la troisième valeur indique la couleur.
• Le "en bas à droite»La propriété peut également être utilisée dans le même but.
• Ensuite, nous avons défini le «hauteur«De la ligne en définissant sa valeur comme«100px".
• Ensemble "marge" comme "0 Auto», Où 0 indique le haut et le bas et l'auto représente la marge égale à gauche et à droite.
• Pour montrer la largeur de la ligne, nous avons attribué le «largeur«Valeur de la propriété comme«2px".

CSS

.v_line
Border-Left: 5px RVB solide (2, 99, 135);
hauteur: 100px;
marge: 0 auto;
Largeur: 2px;

L'application de ces valeurs tracera une ligne verticale comme celle-ci:

C'est ça! Nous avons utilisé différentes propriétés CSS pour dessiner des lignes horizontales et verticales.

Conclusion

Vous pouvez utiliser le "frontière" ou "Bordure du bas«Propriétés pour tracer une ligne horizontale et le« «frontière" ou "frontière»Propriétés pour tracer une ligne verticale en CSS. Cette propriété a des valeurs de 1 à trois, où la première valeur définit la largeur, la deuxième valeur définit son type, qu'il soit solide, pointillé, pointillé ou rainure et la troisième valeur indique la couleur de la ligne. Ce guide a expliqué comment dessiner des lignes horizontales et verticales avec CSS.