Changer la couleur de la balise HR CSS
”Tag en utilisant CSS. Le "
”Tag dans HTML est utilisé pour représenter une rupture thématique entre deux paragraphes en HTML. Cela ressemble à une ligne horizontale entre les paragraphes. Nous changerons la couleur de cette balise HR à l'aide de CSS dans ce guide. Nous utilisons différentes propriétés pour modifier la couleur de cette balise. Vous devez passer par ces exemples qui sont élaborés dans ce guide pour une meilleure compréhension de cela.
Propriétés pour changer la couleur:
Nous utiliserons deux propriétés ici pour modifier la couleur de la balise HR:
- La propriété de couleur arrière.
- La propriété de la frontière.
Exemple n ° 1: en utilisant la propriété de couleur arrière
Ouvrez un nouveau fichier HTML dans lequel nous utilisons le «
”Tag puis changez la couleur de ce
Tag dans le fichier CSS. Nous effectuons les codes donnés dans le studio de code visuel. Nous devons créer un fichier HTML pour écrire le code HTML. Ce fichier doit être enregistré avec le «.Extension html ”. Le code HTML est utilisé pour concevoir le
Tag entre deux paragraphes. Si vous travaillez sur Visual Studio Code pour créer des fichiers HTML, ouvrez un nouveau fichier et écrivez le "!" marquer. Ensuite, appuyez sur Entrée, les balises HTML sont intégrées dans ce studio de code visuel qui s'affiche à l'écran. Vous devez écrire le corps et placer la balise de liaison sur le modèle donné.
Définissez le type de ce document qui est «HTML» ici. Ouvrez la balise. Après cela, la balise «Meta» est définie ici comme «Charset = UTF-8». Cela signifie, cela nous permet d'utiliser de nombreux caractères dans notre document. Et il prend en charge de nombreuses langues. Nous définissons le titre en utilisant la balise d'ouverture et de fermeture «». Comme nous voulons relier ce fichier HTML au fichier CSS pour modifier la couleur du «
«Tag, nous utilisons la balise« »et fermons notre balise« ». Nous devons écrire deux paragraphes et placer le
étiquette entre ces deux paragraphes afin que nous puissions changer la couleur de cette balise. Nous écrivons le paragraphe entre les balises «». Nous avons un "
”Tag après le premier paragraphe. Ensuite, écrivez le deuxième paragraphe et fermez les étiquettes de «» et «».
Fichier CSS pour le style et le changement de couleur:
Après avoir enregistré le fichier HTML ci-dessus, créez un fichier avec le nom mentionné dans le lien du fichier HTML. Ici, nous allons changer la couleur de la balise HR que nous créons dans le fichier HTML.
Tout d'abord, nous écrivons HR, et à l'intérieur des accolades bouclées des RH, nous allons donner du style à notre balise RH. Nous donnons la hauteur de ceci "
«Tag égal à« 4px », donc la hauteur de notre balise HR est d'environ 4px. Nous utilisons une propriété de couleur arrière-plan ici. Cette propriété est utilisée pour modifier la couleur de l'élément HR dans CSS. Nous avons réglé la couleur de la ligne HR comme bleu. Donc, nous avons réglé le bleu de la «couleur d'arrière-plan» pour cela. La frontière pour cela n'est pas parce que nous ne voulons pas placer aucune bordure autour de lui.
Nous obtenons la sortie en appuyant simplement sur Alt + B sur le fichier HTML ou en appuyant également sur le bouton droit de la souris et en sélectionnant Open dans le navigateur par défaut. Nous obtiendrons la sortie sur le navigateur.
Ici, la ligne entre les paragraphes est rendue «bleue» parce que nous définissons la couleur de cette étiquette RH «bleu». C'est la seule façon de modifier la couleur de la balise «HR» en utilisant «CSS».
Exemple n ° 2: en utilisant la propriété de la bordure
Dans cet exemple, nous utilisons la propriété «border-top» dans CSS. Cette propriété aide également à changer la couleur.
Ici, nous modifions simplement le lien vers le fichier CSS dans le fichier HTML précédent car nous avons créé un nouveau fichier CSS pour l'utilisation d'une autre propriété pour modifier la couleur. Donc, nous n'avons pas besoin d'expliquer à nouveau ce code.
Fichier CSS pour le changement de couleur:
Nous commençons ce code CSS de la même manière en utilisant les RH dans la première ligne et en ouvrant un support bouclé.
Nous définissons l'écran comme «bloc». Ce bloc remplira toute la ligne. Ensuite, la hauteur de cette ligne est «2px». La frontière pour ceci est zéro «0». Maintenant, nous utilisons la propriété «border-top» ici. Cette propriété aide à modifier la couleur de la balise HR dans CSS. Ici, «5px» définit la largeur, «solide» définit le «style de ligne» et «rouge» est utilisé pour la couleur de la balise HR. De cette façon, nous définissons la largeur, le style de ligne et la couleur de la balise HR dans CSS. La marge créera l'espace de «2EM». Et le rembourrage ici est "0".
Comme le rembourrage est utilisé pour créer l'espace supplémentaire entre les éléments, la ligne ne contient pas d'éléments, nous le définissons donc comme zéro. Enfin, nous fermons le support bouclé et le sauvons. Nous avons lié ce fichier à notre fichier HTML afin que tous ces styles soient appliqués au fichier html. Vous pouvez vérifier la sortie de cela dans l'image lorsque l'image est également donnée ici.
Exemple # 3:
Dans cet exemple, nous utilisons deux balises HR dans notre fichier HTML et utilisons les deux méthodes pour modifier la couleur de la balise HR. Ici, nous allons donner deux couleurs à l'étiquette ou à la ligne des RH en même temps. Regardons cet exemple.
Ici, nous créons trois paragraphes séparément en utilisant trois paires de ««
”Étiquettes d'ouverture et de fermeture des paragraphes. Après chaque paragraphe, nous plaçons une étiquette HR. Nous avons donc deux balises HR ici dans ce code. Aussi, liez ce fichier HTML au nouveau fichier CSS que nous créerons pour le style de ces balises HR.
Fichier CSS pour le changement de couleur:
Dans cet exemple, nous utilisons deux propriétés différentes pour changer la couleur à la même ligne. Dans la première RH, nous ouvrons les accolades bouclées et nous allons utiliser la propriété de la frontière. En cela, la hauteur est «2px» et la propriété de bordure est utilisée. Nous définissons la largeur sur «5px» et le style de la ligne qui est «solide» et change également la couleur en «vert». Ensuite, fermez ceci et créez une nouvelle «RH» dans laquelle nous utiliserons la propriété «Color de fond». Ici, la hauteur est «4px» et la couleur d'arrière-plan est «orange». Ainsi, la ligne sera de deux couleurs qui sont «vertes» et «orange».
Ici, vous pouvez remarquer que nous pouvons donner plus d'une couleur à notre étiquette RH en utilisant ces propriétés.
Conclusion:
Dans ce guide, nous avons appris à changer la couleur de la balise RH à l'aide des propriétés CSS. Nous avons développé trois codes différents de ce guide. Nous avons modifié la couleur de la ligne HR en appliquant l'attribut «Color d'arrière-plan». Dans l'exemple suivant, nous avons utilisé une autre propriété qui est la propriété «border-top» pour changer la couleur. Nous fournissons également des captures d'écran de la sortie après avoir exécuté tous les codes et montrons la sortie sur le navigateur. J'espère que vous apprendrez à changer la couleur de la ligne RH dans CSS après avoir lu ce guide.