ligne CSS3. Lignes horizontales. I Mince, épais, double, pointillé par clavier

De l'auteur : Je vous salue. Le besoin de présenter plusieurs blocs sur une page web sur une seule ligne est une tâche très fréquente qui se pose pour les maquettistes. Cela se produit lors de la mise en page de presque tous les modèles, nous devons donc tous connaître et appliquer les méthodes de base pour modifier le comportement des blocs.

Avant de nous pencher sur les astuces les plus courantes, je voudrais rappeler un peu de théorie. Les éléments de la page Web sont divisés en bloc et en ligne. Et la différence entre eux est très simple - les minuscules peuvent être situées sur une ligne, mais pas les blocs. Bien sûr, les différences ne s'arrêtent pas là, mais c'est la principale différence. Déjà, les blocs peuvent avoir des marges en haut et en bas (les minuscules n'en ont pas), et plus de propriétés peuvent leur être appliquées.

Les principales façons d'aligner des blocs d'affilée en css

On ne va rien compliquer, il y a 3 manières principales :

Convertissez les blocs en éléments en ligne. Dans le même temps, les propriétés du bloc sont perdues, cette option n'est donc presque jamais utilisée.

Faites en sorte que les éléments souhaités soient en ligne. Il s'agit d'un type spécial dans lequel l'élément conserve ses propriétés, mais permet en même temps de positionner d'autres blocs côte à côte.

Éléments flottants utilisant la propriété float.

Arrêtons-nous sur ces options. Flexbox, affichage tabulaire et autres points ne seront pas pris en compte. Disons donc que nous avons 3 sous-titres.

Titre 1

Titre 2

Titre 3

Naturellement, toutes les propriétés css doivent être écrites dans un fichier séparé (style.css), qui doit être connecté au document html. Dans ce fichier, je vais écrire un style minimal afin que nos sous-titres soient facilement visibles.

h3 (arrière-plan : #EEDDCD ;)

h3 (

arrière-plan : #EEDDCD ;

Les voici sur la page :

Là, ils se comportent comme des blocs. Chacun est situé sur sa propre ligne, il y a des retraits entre eux. Si vous le souhaitez, vous pouvez également définir des retraits internes et, en général, faire n'importe quoi.

Convertissez en lignes et ajoutez un rembourrage immédiatement. Pour ce faire, ajoutez les propriétés suivantes au sélecteur h3 :

affichage : en ligne ; remplissage : 30px ;

Il y a 2 problèmes principaux avec cette technique. Le premier est le rembourrage minimum. Il est formé du fait qu'il y a un espace entre les blocs du code, qui forme cette indentation. Si ce problème nécessite une solution, il existe 2 options principales :

En html, rangez le code des blocs nécessaires sur une ligne sans espaces

Définissez une marge négative à droite de -4 pixels. C'est combien un espace prend.

Le deuxième problème est que des problèmes d'affichage peuvent survenir avec différentes hauteurs d'éléments. En tout, la meilleure option- blocs flottants. Au lieu de display: inline-block, nous écrivons ceci :

Blocs en ligne à l'aide d'un framework

Je dois dire tout de suite que si vous utilisez n'importe quel framework css normal (par exemple, Bootstrap), c'est encore beaucoup plus facile là-bas. Tout le code css responsable de l'agencement des éléments a déjà été écrit et il vous suffit de définir les bonnes classes. Tout ce que vous avez à faire est d'apprendre le système de grille et vous pouvez créer des modèles multi-colonnes réactifs sans trop de difficulté. Au moins, ce sera beaucoup plus facile que d'écrire du CSS à partir de zéro.

Un autre défi d'écrire du code à partir de zéro se présente juste au moment où vous avez besoin d'un design réactif. Bien sûr, vous pouvez l'implémenter vous-même en possédant des media queries, mais ce sera beaucoup plus difficile si vous avez un modèle complexe.

Par exemple, lorsque vous avez besoin d'avoir 4 colonnes sur de grands écrans, 3 sur des écrans moyens et téléphones portables- 2. Avec l'aide de frameworks tels que Bootstrap, ou plutôt avec l'aide de sa grille, implémenter une telle chose ne prend littéralement que quelques minutes.

En transférant en douceur le sujet vers le framework Bootstrap, je noterai encore une fois que si vous êtes confronté à la tâche de créer un modèle réactif complexe, c'est tout simplement un péché de ne pas utiliser la grille. Vous n'avez même pas besoin de vous connecter pour cela. version complète framework - vous pouvez le personnaliser et vous arrêter là uniquement ce dont vous avez vraiment besoin.

Vous pouvez apprendre à travailler avec le framework avec. La théorie y est aussi expliquée, mais le plus important est qu'il y ait de la pratique. Vous créerez 3 modèles réactifs et obtiendrez une expérience formidable qui vous permettra de créer des sites Web sur commande ou pour vous-même. Et si vous souhaitez jeter un œil aux avantages et fonctionnalités du framework gratuitement, je vous propose de parcourir notre série d'articles sur Bootstrap et la mise en page simple. Je vous souhaite du succès dans la mise en page et la construction du site en général.

Lors de la création pages HTML le design joue un rôle essentiel. Surtout quand on parle de divers symboles et de design décoratif : ces petites choses aident à rendre le "langage" de votre page plus accessible et clair, de plus, elles changent considérablement sa perception et apparence généralement. L'un des éléments les plus importants pour la conception est une ligne horizontale, et nous apprendrons plus en détail comment travailler avec elle et comment créer une ligne horizontale en html.

Qu'est-ce qu'une ligne horizontale et à quoi sert-elle

Une ligne horizontale en HTML est un élément de conception de page qui remplit un certain nombre de fonctions :

Décoratif... Aide à ajouter de l'attractivité à la page.
Partage... Favorise une séparation efficace des informations de différentes significations.
Mettre en valeur ou souligner... Attire l'attention des visiteurs de la page sur les informations nécessaires et les plus importantes.

C'est la ligne horizontale qui est considérée comme le moyen le plus abordable de mettre en œuvre un certain nombre de fonctions. Il est très simple de le créer, mais à l'extérieur, cela semble très rentable. Par de simples modifications du code html, vous pouvez ajuster :

longueur;
largeur;
caractéristiques de couleur;
alignement sur l'un ou l'autre bord.

Notez que la ligne horizontale fait référence aux éléments de bloc. Cela signifie qu'il occupe une nouvelle ligne sur la page et que le texte qui le suit ira en dessous.

Comment créer une ligne horizontale en HTML

Vous pouvez définir une ligne à l'aide d'une simple balise - hr entre crochets triangulaires. C'est l'abréviation de "Horisontal Rule" et définit les paramètres externes classiques. Il diffère de beaucoup d'autres en ce qu'il n'a pas besoin de balise de fin et qu'il peut exister seul. Vous pouvez modifier les caractéristiques externes d'un élément en utilisant des valeurs supplémentaires dans la balise :

Longueur... Si vous ne souhaitez pas que la longueur de la ligne s'étende sur toute la page, vous pouvez définir la taille souhaitée en pixels ou en pourcentage. Cela se fait à l'aide d'un mot supplémentaire "width" dans la balise et d'un indicateur de longueur numérique spécifié après le signe "=" entre guillemets.

Cela ressemble à ceci. Par exemple, si nous voulons une longueur de 100 pixels, nous définirons une balise comme celle-ci : hr width = "100"

Alignement... L'alignement est possible le long des bords gauche ou droit, ainsi qu'au centre. Cette caractéristique n'est valable que si vous avez déjà défini paramètre de largeur car une ligne pleine page ne peut pas être alignée. Pour l'alignement, définissez un attribut supplémentaire dans la balise "align" et ajoutez-y une direction : center - pour le centre, left - pour la gauche et la droite - pour l'alignement à droite.

La balise finie dans ce cas ressemblera à ceci. Par exemple, si nous devons définir l'alignement central d'une ligne horizontale d'une longueur de 150 pixels, la balise terminée ressemblera à ceci : hr align = "center" width = "150".

Notez que "align", la mesure d'alignement, est mis en position 1, même si l'attribut dépend de la largeur de la mesure de longueur.

Largeur... En option, vous pouvez également spécifier la largeur, en créant un soulignement gras ou fin. Ce critère ne dépend de rien et peut être utilisé indépendamment sans spécifier la longueur ou l'alignement. Pour cela, nous utilisons l'attribut size dans la balise et une valeur numérique égale à la largeur souhaitée en pixels. Le nombre est indiqué entre guillemets après l'attribut size et le symbole "=".

Ainsi, si nous devons créer une ligne de 15 pixels de large, nous devons créer la balise suivante : hr size = "15".

Couleur... Il est également défini comme un indicateur indépendant. Pour le changer, utilisez l'attribut color en combinaison avec le nom de la couleur sous forme de code ou en anglais. La couleur est indiquée entre guillemets après le symbole "=".

Ainsi, le tag d'une ligne blanche standard peut être écrit de deux manières : hr color = "#FFFFF" ou hr color = "white"

Le noir peut être créé en utilisant le code # 000000.

Ranger ombre... Si vous avez besoin d'un élément qui ne contient pas d'ombre, alors l'attribut noshade doit être utilisé dans la balise. Il peut être utilisé seul ou en combinaison avec d'autres éléments. Une balise pour une ligne standard l'utilisant ressemblera à ceci : hr noshade

Créer une ligne horizontale en utilisant la vidéo

Et si vous souhaitez obtenir des informations dans un format plus visuel, reportez-vous à la vidéo suivante, qui décrit en détail les possibilités de travailler avec une ligne horizontale.

Après avoir déterminé les dimensions requises de la ligne horizontale, vous pouvez concevoir les pages du site de manière à ce que les informations soient structurées et encadrées de manière visuellement compétente. Cela aide les visiteurs à percevoir plus facilement les informations présentées et à faire en sorte que votre site se démarque des autres.

Tâche

Tracez une ligne horizontale sur la page.

Solution

Lignes horizontales bon pour séparer un bloc de texte d'un autre. Un petit texte avec des lignes horizontales en haut et en bas attire plus l'attention du lecteur que le texte normal.

Utilisation de la balise

vous pouvez tracer une ligne horizontale dont l'apparence dépend des attributs utilisés, ainsi que du navigateur. La balise fait référence à des éléments de bloc, donc la ligne commence toujours sur une nouvelle ligne, et après cela, tous les éléments sont affichés sur la ligne suivante. Grâce aux nombreux attributs du tag

la ligne créée par cette balise est facile à manipuler. Combiné à la puissance des styles, l'ajout d'une ligne à votre document devient un jeu d'enfant.

Ligne par défaut

affiché en gris et avec un effet de volume. Ce type de ligne ne convient pas toujours au design du site, donc le désir des développeurs de changer la couleur et d'autres paramètres de la ligne à travers les styles est compréhensible. Cependant, les navigateurs sont ambigus sur ce problème, c'est pourquoi vous devrez utiliser plusieurs propriétés de style à la fois. En particulier, les anciennes versions du navigateur Internet Explorer pour la couleur de la ligne, ils utilisent la propriété color et les autres navigateurs utilisent la propriété background-color. Mais ce n'est pas tout, dans ce cas, assurez-vous de spécifier une épaisseur de ligne (propriété de hauteur) autre que zéro et supprimez la bordure autour de la ligne en définissant la propriété de bordure sur aucun. En rassemblant toutes les propriétés du sélecteur hr, nous obtenons une solution universelle pour les navigateurs populaires (exemple 1).

Exemple 1. Ligne horizontale

HTML5 CSS 2.1 IE Cr Op Sa Fx

Couleur de la ligne horizontale

Chaîne de texte

Résultat cet exemple montré dans la fig. 1.

Riz. 1. Ligne horizontale colorée

Il semblerait, pourquoi auriez-vous besoin de quatre méthodes ? Après tout, presque chaque personne utilise une méthode à laquelle elle est habituée. Par exemple, j'ai appuyé plusieurs fois sur Shift et sur la touche "tiret", et c'est le résultat d'une ligne horizontale.

Mais que se passe-t-il si cela se traduit par 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 à la rescousse ici.

3.
4.
5.

La façon la plus courante de créer une ligne dans Word est peut-être d'utiliser quelques touches du clavier.

I Mince, épais, double, pointillé par clavier

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

Riz. 1. Trois touches sur le 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 Éditeur de mots nous obtenons une ligne pointillée de n'importe quelle longueur.

À faire mince une longue ligne sur toute la largeur de la page :

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

2) Lorsque Shift et "-" (tiret) sont enfoncés simultanément, PAS un tiret est imprimé, mais un soulignement _________. Ainsi, 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, nous imprimons épais une ligne horizontale sur toute la largeur de la page :

Encore une fois, nous retrouvons la même touche "tiret", ainsi que la touche Shift (gauche ou droite, comme vous le souhaitez). Appuyez sur Shift, maintenez et ne lâchez pas.
Et maintenant avec une nouvelle (!) Ligne plusieurs fois (par exemple, 3-4 fois) appuyez sur le tiret (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 (1 × 1), dans lequel seule la bordure supérieure ou inférieure est colorée (sera visible), et les trois autres côtés du tableau ont des bordures non colorées (elles seront invisible).

Nous plaçons le curseur à l'endroit où la ligne devrait être. Dans le menu supérieur de Word, cliquez sur :

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

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

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

Il reste à supprimer les bordures de trois côtés dans le tableau 1x1. Pour ça

aller dans l'onglet "Accueil" (1 sur Fig. 4),
puis à côté de "Font" on trouve "Paragraph" et les bordures (2 sur la Fig. 4),
supprimer toutes les bordures en cliquant sur "Pas de 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 des bordures dans le tableau Word (rendre les bordures invisibles)

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

D'ailleurs, sur la fig. 3 montre 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 dans Fig. 4) :

III Ligne dans Word par dessin

Insérer (1 dans Fig. 5) - Formes (2 dans Fig. 5) est un autre moyen 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

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

Pour trouver le clavier à l'écran, dans Rechercher, saisissez la phrase « clavier à l'écran », 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 version avec un clavier normal. Sur le clavier à l'écran, vous avez besoin de trois boutons : tiret, Maj et Entrée.

1 tiret et entrez

A partir d'une nouvelle ligne dans Word, cliquez plusieurs fois sur le tiret (1 dans Fig. 6) et appuyez sur Entrée. Cela créera une fine ligne horizontale.

2 Maj, tiret et entrée

À partir d'une nouvelle ligne dans Word, cliquez d'abord sur Shift (2 dans Fig. 6), puis Dash (1 dans Fig. 6). Le résultat est un soulignement. Nous répétons donc 2 fois de plus, puis appuyez sur Entrée. En conséquence, nous verrons une ligne horizontale épaisse.

Fondamentalement, des lignes horizontales sont utilisées pour décorer les pages HTML du site, leur donnant un aspect plus attrayant. Mais ils peuvent également délimiter visuellement les informations des sections voisines, ajoutant de la commodité aux lecteurs lors de leur étude. En général, 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

... De plus, 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 est toujours obtenue 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 moi-même
ne peut pas avoir de contenu, car il n'a tout simplement pas de balise de fin, c'est-à-dire qu'il est vide.

Un exemple de dessin de lignes horizontales en HTML
Tracer des lignes horizontales

Paragraphe.

Paragraphe.

Paragraphe.

Résultat dans le navigateur

Paragraphe.

Paragraphe.

Paragraphe.

Comme vous pouvez le voir, les lignes sont très fines, indescriptibles 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 y avait des attributs spéciaux avec lesquels il était possible de changer la couleur, l'épaisseur et la largeur des lignes horizontales. Ce sont respectivement la couleur, la taille et la largeur. Mais dans les versions plus récentes, elles ont été abandonnées au profit des feuilles de style en cascade (CSS), donc, vous l'aurez deviné, nous utiliserons à nouveau notre attribut de style préféré. La syntaxe générale est :

style = "fond : couleur">- la couleur de la ligne (ou plutôt son fond).

style = "hauteur : taille">- Épaisseur de ligne.

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

style = "fond : couleur ; hauteur : taille ; largeur : taille"> - mais 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à depuis la leçon changer la couleur du texte et de l'arrière-plan.

Mais nous parlerons du redimensionnement plus en détail. Vous souvenez-vous de tutoriel sur la modification des polices, il y a une dizaine d'unités 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 fournissez d'autres unités, ce ne sera pas une erreur, mais les navigateurs les ignoreront simplement.

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

Comme je l'ai dit, seule la largeur de ligne 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, à l'intérieur duquel se trouve la balise
... Dans ce cas, la taille du parent est considérée comme 100 %. Par exemple, si nous plaçons la balise
style = "largeur : 50 %">élément intérieur
, alors quelle que soit la façon dont nous redimensionnons la fenêtre du navigateur ou la résolution du moniteur - la largeur de 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.
Modifiez la couleur, l'épaisseur et la largeur des lignes horizontales.

Résultat dans le navigateur

Modification de la position des lignes horizontales

Lorsque vous modifiez la largeur d'une ligne horizontale, il devient clairement visible que les navigateurs la placent toujours au centre. Si vous voulez changer sa position, utilisez simplement inside
aligner l'attribut avec les valeurs suivantes :

centre- la ligne est alignée au centre (valeur par défaut).

la gauche- appuyé contre le bord gauche.

droit- appuyé contre le bord droit.

Un exemple d'alignement de lignes horizontales.
Modifiez la position des lignes horizontales.

Résultat dans le navigateur

Comment supprimer la bordure autour de la ligne ?

Jetez un œil au tout premier exemple de ce tutoriel. De quelle couleur pensez-vous que ces lignes ont? Et là c'est faux. Ils sont transparents, comme tout élément de page qui n'a pas été spécifié. Couleur de l'arrière plan! Ne me croyez pas ? Jetez ensuite un œil à un exemple où nous avons changé la couleur des lignes. Pour le tout premier, nous n'avons pas défini la couleur, mais seulement augmenté sa taille et cette ligne n'est-elle pas transparente ? Pour que!

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

Pour supprimer la bordure autour de la ligne, qui souvent ne gâche que l'apparence, nous allons réappliquer l'attribut style. Et c'est écrit comme ça :

Devoirs.

Créez des en-têtes d'articles, de sections et de sous-sections. Centrez-les tous.

Définissez la page entière sur Arial et Courier pour les en-têtes.

Laissez la taille de la police pour l'ensemble de la page correspondre à 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.

Écrivez un paragraphe sous le premier titre, une longue citation sous le second et un poème sous le troisième. Et que le poème soit centré sur la page.

Mettez trois mots en gras dans votre citation.

Sous le titre de l'article, tracez une ligne horizontale rouge de trois pixels sur toute la largeur de la page.

En haut et en bas du poème, tracez des lignes noires d'un pixel. Laissez la largeur de la ligne supérieure être approximativement égale à la largeur du verset et la ligne inférieure moitié moins.

Supprimez les cadres inutiles des lignes.