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 besoin de trop vous soucier du texte et de le surligner, par exemple en gras ou en italique, changez l'arrière-plan ou créez 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à qu'ils viennent Aide HTML et propriétés CSS.
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 ;
- frontière droite – ligne verticale, situé à droite du texte ;
- Bordure du bas– une ligne horizontale située en dessous du texte ;
- bordure gauche– ligne verticale située à gauche.
Comment faire une ligne en HTML
En utilisant Propriétés CSS vous pouvez saisir toutes les valeurs nécessaires en éditant le code HTML. Pour ce faire, vous devez vous rendre dans la partie administrative du site. Sélectionnez l'un des documents publiés, changez éditeur de texte en mode d'édition de code HTML et ajoutez des propriétés CSS. Un échantillon peut être vu ci-dessous.
En spécifiant ces propriétés, serez-vous en mesure de souligner l'importance du matériel présenté, du paragraphe ou du titre ?
Brève description des commandes
- largeur- longueur de la 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 a plusieurs avantages:
Un large éventail de possibilités avec lesquelles vous pouvez réaliser presque toutes les lignes.
Facilité de saisir tout Les changements nécessaires directement dans le 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ù 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 de ligne. 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.
Tâche
Tracez une ligne horizontale sur la page.
Solution
Les lignes horizontales sont utiles 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 qu'un texte ordinaire.
Utiliser une balise
vous pouvez tracer une ligne horizontale dont l'apparence dépend des attributs utilisés, ainsi que du navigateur. La balise est un élément de bloc, donc la ligne commence toujours par nouvelle ligne, et après cela, tous les éléments sont affichés sur la ligne suivante. Grâce aux nombreux attributs de balise
la ligne créée via cette balise est facile à gérer. Si vous associez également la puissance des styles, l’ajout d’une ligne à un document devient une tâche simple.
Ligne par défaut
affiché gris et avec un effet volume. Ce type de ligne ne convient pas toujours à la conception du site, le désir des développeurs de modifier la couleur et d'autres paramètres de la ligne à travers les styles est donc compréhensible. Cependant, les navigateurs ont des approches mixtes face à ce problème, c'est pourquoi vous devrez utiliser plusieurs propriétés de style à la fois. En particulier, les anciennes versions navigateur Internet L'Explorateur utilise la propriété color pour la couleur des lignes et d'autres navigateurs utilisent background-color . Mais ce n'est pas tout, vous devez spécifier que l'épaisseur de la ligne (propriété height) est différente de zéro et supprimer le cadre autour de la ligne en définissant la propriété border sur none. En rassemblant toutes les propriétés du sélecteur hr, nous obtenons une solution universelle pour navigateurs populaires(Exemple 1).
Exemple 1 : ligne horizontale
HTML5 CSS 2.1 IE Cr Op Sa Fx
Chaîne de texte
Résultat cet exemple montré sur la fig. 1.
Riz. 1. Ligne horizontale colorée
Salutations, chers lecteurs ! Aujourd'hui, nous parlerons de blocsdiv Et à propos lignes horizontalesheure.
À l'intérieur d'une balise < div>div> un bloc invisible (conteneur) est créé, sur lequel on peut agir avec en utilisant CSS. Sans CSS, ce bloc n'a aucun effet sur le cadre de la page.
Tout d’abord, écrivons le code de la page sans bloc div. Par exemple celui-ci :
Menu principal
- Paragraphe 1
- Point 2
- Point 3
Voyons à quoi ressemble la page dans le navigateur :
Maintenant, décomposons-le cette page en deux blocs div. L'un avec le menu principal et l'autre avec du texte.
Menu principal
- Paragraphe 1
- Point 2
- Point 3
Il existe de nombreuses variantes de passages du Lorem Ipsum disponibles, mais la majorité ont subi des altérations sous une forme ou une autre, par injection d'humour ou par des mots aléatoires qui ne semblent même pas légèrement crédibles. Si vous envisagez d'utiliser un passage de Lorem Ipsum, vous Vous devez être sûr qu'il n'y a rien d'embarrassant caché au milieu du texte. Tous les générateurs Lorem Ipsum sur Internet ont tendance à répéter des morceaux prédéfinis si nécessaire, ce qui en fait le premier véritable générateur sur Internet. Il utilise un dictionnaire de plus de 200 mots latins, combiné à une poignée de structures de phrases modèles, pour générer du Lorem Ipsum qui semble raisonnable. Le Lorem Ipsum généré est donc toujours exempt de répétitions, d'humour injecté, de mots non caractéristiques, etc.
Il existe de nombreuses variantes de passages du Lorem Ipsum disponibles, mais la majorité ont subi des altérations sous une forme ou une autre, par injection d'humour ou par des mots aléatoires qui ne semblent même pas légèrement crédibles. Si vous envisagez d'utiliser un passage de Lorem Ipsum, vous Vous devez être sûr qu'il n'y a rien d'embarrassant caché au milieu du texte. Tous les générateurs Lorem Ipsum sur Internet ont tendance à répéter des morceaux prédéfinis si nécessaire, ce qui en fait le premier véritable générateur sur Internet. Il utilise un dictionnaire de plus de 200 mots latins, combiné à une poignée de structures de phrases modèles, pour générer du Lorem Ipsum qui semble raisonnable. Le Lorem Ipsum généré est donc toujours exempt de répétitions, d'humour injecté, de mots non caractéristiques, etc.
On regarde dans le navigateur :
Comme nous le voyons, apparence la page n'a en rien changé, c'est toute la force de ce bloc, c'est un bloc logique. Ce bloc est très élément important, car il est souvent utilisé dans la mise en page, et vous devez le connaître. Directement via CSS, nous pouvons définir la largeur d'un bloc donné, lui donner un cadre, spécifier que tous les paragraphes à l'intérieur du bloc doivent être d'une certaine couleur, etc.
Et maintenant, entre ces deux blocs, nous allons écrire une ligne horizontale, créée à l'aide d'une seule balise. < heures />
Voici à quoi ressemble cette ligne dans le navigateur :
Sur cette ligne nous pouvons influencer en utilisant les attributs suivants :
Largeur– Définir la largeur de la ligne
Taille– Régler l’épaisseur
Aligner– Alignement des lignes
Couleur– Définir la couleur
Par exemple, réduisons sa largeur, alignons-la sur le bord droit de la page, donnons-lui une épaisseur de 5 pixels et rendons-la rouge.
Le code de la ligne devrait maintenant ressembler à ceci :
Regardons le résultat :
C’est probablement tout ce dont je voulais vous parler dans cet article. Maintenant tu sais ce que c'est blocdiv et comment il est créé. Vous avez également appris à créer une ligne horizontale et à modifier son apparence à l'aide d'attributs.
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 blocage, 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 é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
Tracer des lignes horizontales
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 de ligne.
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 affiché (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.
Modifiez la couleur, l'épaisseur et 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.
Changez la position des 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 tous les éléments de page qui n'ont pas de nom spécifié. Couleur de l'arrière plan! 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 ? De sorte que!
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.
- Créez des titres d’articles, de sections et de sous-sections. Placez-les tous au centre.
- Définissez la police sur Arial pour toute la page et Courier pour les titres.
- 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.
- É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.
- Souligner en gras trois mots dans une citation.
- Sous le titre de l’article, tracez une ligne rouge horizontale de trois pixels d’épaisseur sur toute la largeur de la page.
- 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é.
- Supprimez les cadres inutiles des lignes.