Comment tracer une ligne pointillée avec CSS

Comment tracer une ligne pointillée avec CSS

En développement Web, l'utilisateur peut tracer les lignes dans différents styles, y compris les lignes d'avion, les lignes de tableau de bord, les lignes pointillées, etc. Traditionnellement, les lignes en pointillés ou en pointillés indiquent tout ce qui peut être esquissé ou découpé. Ils ont été connectés dans le passé à l'espace réservé ou au matériel non développé dans des environnements numériques. De plus, ces lignes peuvent indiquer les emplacements pour les opérations de glisser-déposer et les téléchargements de fichiers.

Cet article expliquera la méthode pour tracer une ligne pointillée avec CSS.

Comment tracer une ligne pointillée avec CSS?

Pour tracer une ligne en HTML, les utilisateurs peuvent utiliser le «


" étiqueter. Le "
»L'élément trace une ligne horizontale sur la page Web. De plus, cette ligne peut être stylée différemment grâce à CSS.

Pour tracer une ligne pointillée sur la page Web avec CSS, essayez la procédure donnée.

Étape 1: Créez un conteneur «div»

Tout d'abord, utilisez le «”Tag pour créer un conteneur dans la page HTML. Ensuite, ajoutez un "identifiant«Attribut dans la balise d'ouverture« div »pour y accéder plus tard.

Étape 2: insérer les données de texte

Ensuite, intégrer des données de texte entre le conteneur «div».

Étape 3: Ajouter "


" Étiqueter

Ajouter un "


”Tag pour insérer une ligne simple dans une page Web. Ensuite, intégrez du texte après la ligne:


Bienvenue sur le site Web de Linuxhint


Linuxhint Ltd UK


On peut remarquer que la ligne a été ajoutée avec succès:


Étape 4: Conteneur de style «div»

Accédez au conteneur «div» à l'aide du sélecteur «ID» «#»Et la valeur de l'ID comme«#ligne pointillée". Après cela, appliquez les propriétés CSS ci-dessous:

#ligne pointillée
Border: aucun;
Couleur: RVB (7, 189, 245);
marge: PX 60px;


Ici:

    • "frontière»Ajoute une frontière autour de l'élément.
    • "couleur”Est ​​utilisé pour spécifier la couleur du texte à l'intérieur de l'élément.
    • "marge"Est utilisé pour ajouter de l'espace à l'extérieur de la limite définie.

Sortir


Étape 5: Style "


" Élément

Pour faire une liste comme une ligne en pointillés, accédez d'abord à la «heure”Élément par nom de balise et appliquez les propriétés CSS répertoriées ci-dessous:

heure
Color en arrière-plan: RVB (243, 192, 192);
Border-Top: RVB en pointillé 3px (10, 53, 245);
hauteur: 3px;
Largeur: 50%;


Selon l'extrait de code donné:

    • "Couleur de l'arrière plan»La propriété spécifie la couleur à l'arrière de l'élément.
    • "frontière"Est utilisé pour rendre la ligne horizontale pointillée.
    • "hauteur" et "largeur«Sont utilisés pour déterminer la taille de l'élément:



On peut observer que nous avons réussi une ligne pointillée.

Conclusion

Pour tracer une ligne pointillée avec CSS, ajoutez d'abord une ligne simple à l'aide du «


" étiqueter. Ensuite, accédez au «
”Élément par nom de balise dans CSS. Après cela, appliquez le «frontière" ou "Bordure du bas«Propriété et spécifiez sa valeur comme«pointé". Ce message a expliqué la méthode de dessin de la ligne pointillée en HTML à l'aide de CSS.