Bande en html. HTML et CSS - comment créer des lignes horizontales et verticales. Comment changer la couleur, l'épaisseur et la largeur des lignes horizontales

Pour mettre en valeur certains éléments particulièrement importants du site, il ne ferait pas de mal d'utiliser toutes sortes de styles et de propriétés CSS prévus à cet effet. Bien sûr, vous n’avez pas à vous soucier trop du texte et à le surligner, par exemple en gras ou en italique, à modifier l’arrière-plan ou à créer un cadre autour du texte. Mais l’une des méthodes présentées ne convient pas toujours. Disons que vous avez un texte qui doit être divisé en raison des spécificités de sa charge sémantique. C'est là que les propriétés HTML et CSS viennent à la rescousse.

Comment créer une ligne dans un texte en utilisant CSS

Pour mettre en œuvre nos plans, nous devrons contacter fichier style.css, en y ayant écrit la propriété correspondante frontière. Cela fera apparaître une ligne au-dessus, en dessous ou sur un côté spécifique du texte. À leur tour, il existe plusieurs propriétés responsables de l'affichage de la ligne, à savoir :

- bordure supérieure– une ligne horizontale située au-dessus du texte ;

- bordure droite– un trait vertical situé à droite du texte ;

- bordure inférieure– une ligne horizontale située en dessous du texte ;

- bordure gauche– ligne verticale située à gauche.

Comment faire une ligne en HTML

À l'aide des propriétés CSS, vous pouvez spécifier toutes les valeurs nécessaires en modifiant le code HTML. Pour ce faire, vous devez vous rendre dans la partie administrative du site. Sélectionnez l'un des documents publiés, passez l'éditeur de texte en mode d'édition de code HTML et entrez les propriétés CSS. Un échantillon peut être vu ci-dessous.

Brève description des commandes

- largeur– longueur de ligne ;

- solide– ligne continue ;

- pointé– ligne pointillée.

Pour une compréhension plus approfondie des styles, je recommande de lire celui-ci.

Il faut comprendre que lors du processus de modification du code du site, les propriétés qui déterminent le type de ligne, son épaisseur et sa couleur sont répertoriées séparées par un espace.

Cette méthode présente plusieurs avantages :

Un large éventail de possibilités avec lesquelles vous pouvez réaliser presque toutes les lignes.

Facilité d’apporter toutes les modifications nécessaires directement au code HTML. Cela simplifie grandement la tâche des créateurs de sites inexpérimentés.

Comment créer une ligne horizontale droite à l'aide d'une balise HTML

---

La première chose sur laquelle je voudrais attirer votre attention est que cette balise, malgré toutes les subtilités et principes du HTML, n'a pas de balise de fermeture. Il peut être utilisé n'importe où dans le code HTML, entre les balises Et

.

Attributs des balises

---

- largeur– est responsable de la longueur de la ligne. Peut être spécifié en pourcentage ou en pixels.

- taille– épaisseur du trait. Spécifié en pixels.

- couleur– définit la couleur de la ligne.

- aligner– un attribut responsable de l'alignement des lignes. À son tour, l'équipe se rapporte à lui.

Salut tout le monde! Aujourd'hui, je vais vous expliquer comment créer une ligne horizontale en utilisant HTML.

En fait, le besoin de tracer une ligne horizontale se pose assez souvent, par exemple lorsqu'il faut séparer une partie du texte d'une autre.

Lignes horizontales et verticales en CSS

Cela peut être fait en utilisant CSS. Pour ce faire, je joins la section de texte requise dans un bloc à l'aide d'une balise div, puis dans le fichier style.css ou directement dans le code html nous écrivons les propriétés de ce bloc pour la bordure supérieure ou inférieure en utilisant border-top et bordure inférieure. Voici un exemple :

Dans ce cas, j'ai défini le style en utilisant CSS directement à partir du code HTML et j'ai rendu la bordure supérieure pleine et la bordure inférieure en pointillés.

Voici à quoi cela ressemblera sur la page :

Ligne horizontale en utilisant CSS.

Cette méthode a ses avantages :

• Une large gamme de paramètres qui vous permettent de définir presque n'importe quel type de ligne ;
• Vous pouvez créer des lignes horizontales et verticales. Pour créer des lignes verticales, vous devez remplacer la bordure supérieure par la bordure gauche et la bordure inférieure par la bordure droite.

Les inconvénients incluent la relative lourdeur du code.

Cependant, il s'est avéré que vous pouvez insérer une ligne horizontale dans le texte en utilisant HTML. En même temps, vous n’avez même pas besoin d’entrer dans le CSS. La balise est utilisée pour cela

---

.

Ligne horizontale utilisant la balise HTML

---

La première caractéristique de cette balise est qu’elle n’a pas de balise de fermeture appariée. Il peut être utilisé n'importe où dans le code HTML entre les balises Et

.

Cette balise a les attributs suivants :

• Largeur– détermine la longueur de notre ligne horizontale en pixels ou en pourcentages ;
• Couleur– définit la couleur de la ligne ;
• Aligner– définit l'alignement de la ligne sur le bord droit – droit, sur le bord gauche – gauche, au centre – centre ;
• Taille– épaisseur de trait en pixels.

Voici un exemple de code html.

Il semblerait, pourquoi quatre méthodes seraient-elles nécessaires ? Après tout, presque tout le monde utilise une méthode à laquelle il est habitué. Par exemple, j'ai appuyé plusieurs fois sur Shift et sur la touche tiret, et j'ai donc obtenu une ligne horizontale.

Mais que se passe-t-il si cela aboutit à une ligne pointillée, mais que vous en avez besoin d’une solide ?
- Très probablement, la touche Shift du clavier est défectueuse. D'autres méthodes viendront ici à la rescousse.

3.
4.
5.

La manière la plus courante de créer une ligne dans Word consiste peut-être à utiliser quelques touches du clavier.

I Ligne fine, épaisse, double et pointillée à l'aide du clavier

Ci-dessous, une image d'un clavier avec une disposition anglaise, mais sans disposition russe, mais cela n'a pas d'importance, car seules trois touches nous intéressent : Maj, tiret et Entrée.

Riz. 1. Trois touches du clavier : Maj, tiret et Entrée pour une ligne horizontale continue dans Word

Avec ces trois touches, vous pouvez tracer une ligne horizontale continue dans Word : pointillée ou pleine, fine ou épaisse, longue ou courte.

1) Lorsque vous appuyez plusieurs fois sur la touche « - » (tiret) dans l'éditeur Word, vous obtenez une ligne pointillée de n'importe quelle longueur.

Faire mince une longue ligne sur toute la largeur de la page :

• On retrouve la touche « tiret » sur le clavier (à droite de la touche « zéro », dans le cadre vert de la Fig. 1).
• Depuis une nouvelle (!) ligne dans Word, appuyez plusieurs fois sur cette touche : -
• Et puis appuyez sur la touche « Entrée » (). Quelques tirets imprimés se transformeront soudainement en une fine ligne horizontale continue sur toute la largeur de la page.

2) Lorsque vous appuyez simultanément sur Shift et « - » (tiret), PAS un tiret n'est imprimé, mais un trait de soulignement _________. De cette façon, vous pouvez créer une ligne continue de longueur arbitraire n’importe où dans le document.

Riz. 2. Ligne horizontale fine et épaisse dans Word

Maintenant, imprimons graisse ligne horizontale sur toute la largeur de la page :

• On retrouve à nouveau la même touche « tiret », ainsi que la touche Shift (à gauche ou à droite, selon vos envies). Appuyez sur Shift, maintenez et ne lâchez pas.
• Et maintenant, à partir d'une nouvelle (!) ligne, cliquez plusieurs fois sur le tiret (par exemple 3-4 fois) (sans relâcher Shift) : ___. Relâchez Shift.
• Appuyez maintenant sur la touche Entrée. Vous verrez une ligne continue horizontale épaisse.

Résumons quelques résultats sous forme de tableau :

(Cliquez pour agrandir) Lignes dans Word à l'aide du clavier

­­­­­­­­­­­­­­­­­­­­­

II Ligne dans Word à l'aide d'un tableau

Une ligne horizontale peut être obtenue en utilisant un tableau d'une cellule (1x1), dans lequel seule la bordure supérieure ou inférieure est colorée (sera visible), et les trois autres côtés du tableau auront des bordures non colorées (elles seront invisibles). .

Placez le curseur à l'endroit où doit se trouver la ligne. Dans le menu supérieur de Word, cliquez sur :

• Insérer (1 sur la Fig. 3),
• Tableau (2 sur la figure 3),
• Une cellule (3 sur la figure 3).

Riz. 3. Comment insérer un tableau 1x1 (à partir d'une cellule) dans Word

Le résultat sera un tableau d'une grande cellule (1x1) :

Il ne reste plus qu'à supprimer les bordures de trois côtés du tableau 1x1. Pour ça

• allez dans l'onglet « Accueil » (1 sur la Fig. 4),
• puis à côté de « Police » nous trouvons « Paragraphe » et les bordures (2 sur la Fig. 4),
• supprimez toutes les bordures en cliquant sur « Aucune bordure » (3 sur la Fig. 4),
• sélectionnez « Bordure supérieure » ou « Bordure inférieure » (4 sur la Fig. 4).

Riz. 4. Comment supprimer la sélection de bordure d'un tableau Word (rendre les bordures invisibles)

Je le montre clairement dans la vidéo (à la fin de l'article).

D’ailleurs, sur la Fig. 3, il est clair qu’il existe un moyen plus simple. Vous pouvez placer le curseur au début de la ligne dans Word et cliquer sur « Ligne horizontale » (5 sur la Fig. 4) :

III Ligne dans Word en utilisant le dessin

Insérer (1 sur la figure 5) - Formes (2 sur la figure 5) - c'est une autre façon d'obtenir une ligne horizontale dans Word.

Pour garder la ligne strictement horizontale, maintenez la touche Maj enfoncée et tracez la ligne en même temps.

Riz. 5. Comment tracer une ligne dans Word

Ligne IV dans Word à l'aide du clavier à l'écran

Pour trouver le clavier à l'écran, saisissez l'expression « clavier à l'écran » dans la recherche, plus de détails pour Windows 7 et pour Windows 8.

Pour Windows 10, vous pouvez également trouver le clavier à l'écran en tapant « clavier à l'écran » dans la barre de recherche.

Riz. 6. Clavier à l'écran

Nous allons créer une ligne horizontale de la même manière que dans la première option avec un clavier ordinaire. Vous aurez besoin de trois boutons sur le clavier à l'écran : tiret, Maj et Entrée.

1 Tirez et entrez

À partir d'une nouvelle ligne dans Word, cliquez plusieurs fois sur le tiret (1 sur la figure 6) et appuyez sur Entrée. Vous obtiendrez une fine ligne horizontale.

2 Maj, tiret et Entrée

À partir d'une nouvelle ligne dans Word, cliquez d'abord sur Shift (2 sur la Fig. 6), puis sur Dash (1 sur la Fig. 6). Vous obtiendrez un soulignement. Nous allons répéter cela encore 2 fois, puis appuyer sur Entrée. En conséquence, nous verrons une ligne horizontale épaisse.

Fondamentalement, les lignes horizontales sont utilisées pour décorer les pages HTML d’un site Web, leur donnant ainsi un aspect plus attrayant. Mais ils peuvent également différencier visuellement les informations des sections adjacentes, ce qui facilite l'étude des lecteurs. En gros, tracez des lignes horizontales là où vous en avez besoin, c'est tout.

Comment tracer une ligne horizontale ?

Il existe une balise spéciale pour tracer des lignes horizontales en HTML

---

. Et il est balise de bloc, c'est-à-dire qu'il crée des sauts de ligne avant et après lui-même, de sorte que la ligne se termine toujours sur une ligne distincte. Par conséquent, il ne peut être spécifié qu'à l'intérieur de balises pouvant contenir des éléments de bloc, par exemple ou

. Mais me voilà

---

ne peut pas avoir de contenu car il n'a tout simplement pas de balise de fermeture, ce qui signifie qu'il est vide.

Exemple de dessin de lignes horizontales en HTML

---

Paragraphe.

Paragraphe.

---

Paragraphe.

Résultat dans le navigateur

Paragraphe.

Paragraphe.

Paragraphe.

Comme vous pouvez le constater, les lignes s'avèrent très fines, peu attrayantes et dessinées sur toute la largeur disponible. Nous allons donc maintenant apprendre à les modifier pour les rendre plus attrayantes.

Comment changer la couleur, l'épaisseur et la largeur des lignes horizontales ?

Dans les anciennes versions de HTML, la balise

---

il existait des attributs spéciaux avec lesquels vous pouviez modifier la couleur, l'épaisseur et la largeur des lignes horizontales. Ce sont respectivement la couleur, la taille et la largeur. Mais dans les nouvelles versions, ils ont été abandonnés au profit des feuilles de style en cascade (CSS), donc, comme vous l'avez peut-être deviné, nous utiliserons à nouveau notre attribut de style préféré. La syntaxe générale est :

---

style = "arrière-plan: couleur" >- la couleur du trait (ou plutôt son fond).

---

style="hauteur:taille" >- épaisseur du trait.

---

style="largeur:taille" >- largeur de ligne.

---

style= "arrière-plan: couleur; hauteur: taille; largeur: taille"> - ou vous pouvez spécifier tous les paramètres à la fois, n'oubliez pas le point-virgule (;).

Une couleur peut être spécifiée par son nom en anglais ou par le code HEX de la couleur précédé d'un dièse (#). Eh bien, vous le savez déjà grâce à la leçon changer la couleur du texte et de l'arrière-plan.

Mais nous parlerons davantage du redimensionnement. Comme vous vous en souvenez leçon sur le changement de polices, il existe une dizaine d'unités de mesure en CSS, mais largeur de ligne ne peut être spécifié qu'en pixels (px) et en pourcentages (%), et épaisseur généralement uniquement en pixels. Si vous mettez d’autres unités de mesure, ce ne sera pas une erreur, mais les navigateurs les ignoreront simplement.

Si vous spécifiez les dimensions en pixels, l'épaisseur et la largeur de la ligne dépendront de la résolution du moniteur sur lequel votre site est visualisé (plus la résolution de l'écran est élevée, plus la ligne est fine et étroite).

Comme je l'ai déjà dit, seule la largeur des lignes peut être spécifiée en pourcentage. Les tailles en pourcentage dépendent toujours et sont calculées en fonction de la taille de l'élément conteneur parent dans lequel se trouve la balise.

---

. Dans ce cas, les dimensions du parent sont prises à 100 %. Par exemple, si nous plaçons la balise

---

style="largeur:50%" >élément intérieur

, peu importe la façon dont nous modifions la taille de la fenêtre du navigateur ou la résolution du moniteur, la largeur de la ligne sera toujours la moitié de la largeur du bloc

.

Un exemple de modification de la couleur, de l'épaisseur et de la largeur des lignes horizontales.

---

---

---

---

Résultat dans le navigateur

Changer la position des lignes horizontales

Lorsque vous modifiez la largeur de la ligne horizontale, vous voyez clairement que les navigateurs la placent toujours au centre. Si vous souhaitez changer sa position, utilisez simplement l'intérieur

---

alignez l'attribut avec les valeurs suivantes :

• centre- la ligne est alignée au centre (valeur par défaut).
• gauche- appuie contre le bord gauche.
• droite- appuie contre le bord droit.

Exemple d'alignement de lignes horizontales.

---

---

---

Résultat dans le navigateur

Comment supprimer le cadre autour d’une ligne ?

Regardez le tout premier exemple de cette leçon. À votre avis, de quelle couleur sont ces lignes ? Mais ce n’est pas vrai. Ils sont transparents, comme tout élément de page pour lequel aucune couleur d’arrière-plan n’est spécifiée ! Vous ne me croyez pas ? Regardez ensuite l'exemple où nous avons changé la couleur des lignes. Pour le tout premier, nous n’avons pas défini la couleur, mais avons seulement augmenté sa taille, et cette ligne n’est-elle pas transparente ? C'est ça!

Maintenant, je vais vous expliquer. Par défaut, les navigateurs dessinent des cadres autour de lignes, ce qui crée un effet tridimensionnel. Ainsi, lorsque l'on n'augmente pas l'épaisseur des lignes horizontales, les navigateurs nous montrent uniquement ces cadres, puisque l'épaisseur de la ligne elle-même est de 0px.

Pour supprimer la bordure autour de la ligne, qui gâche souvent l'apparence, nous appliquerons à nouveau l'attribut style. Et c'est écrit ainsi :

---

Devoirs.

1. Créez des titres d’articles, de sections et de sous-sections. Placez-les tous au centre.
2. Définissez la police sur Arial pour toute la page et Courier pour les titres.
3. Laissez la taille de la police sur toute la page être 85 % de la taille par défaut du navigateur. Et les titres ont respectivement 145 %, 125 % et 110 % de la taille de la police sur la page.
4. Écrivez un paragraphe sous le premier titre, une longue citation sous le deuxième et un poème sous le troisième. Et laissez le poème être situé au centre de la page.
5. Mettez en gras trois mots dans la citation.
6. Sous le titre de l’article, tracez une ligne rouge horizontale de trois pixels d’épaisseur sur toute la largeur de la page.
7. En haut et en bas du poème, tracez des lignes noires d’un pixel d’épaisseur. Que la largeur de la ligne supérieure soit approximativement égale à la largeur du verset et celle du bas à la moitié.
8. Supprimez les cadres inutiles des lignes.