Maison > Article > interface Web > Comment écrire la couleur HR de la ligne horizontale en HTML
Comment écrire la couleur HR de la ligne horizontale en HTML
- 青灯夜游original
- 2021-03-02 17:16:136560parcourir
En HTML, vous pouvez utiliser l'attribut border-color pour définir la couleur de la ligne horizontale hr. Il vous suffit d'ajouter le style "border-color: color value;" à la balise hr. L'attribut border-color est utilisé pour définir la couleur de bordure d'un élément. Vous pouvez définir quatre couleurs de bordure d'un élément dans une seule déclaration, c'est-à-dire que cet attribut peut avoir une à quatre valeurs.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3. La balise
définit un changement de sujet (comme un transfert de sujet) dans une page HTML et s'affiche sous forme de ligne horizontale. L'élément
est utilisé pour séparer le contenu d'une page HTML (ou pour définir une variante).
Le style de balise hr par défaut :
est juste une ligne noire, ce qui n'est pas beau du tout. Vous pouvez utiliser la propriété border-color de CSS. pour définir la couleur.
<hr style="border-color: red"/>
Rendu :
introduction de l'attribut border-color
paramètre de l'attribut border-color Le quatre couleurs de bordure d'un élément. Cette propriété peut avoir une à quatre valeurs.
Valeur de l'attribut :
color Spécifie la couleur d'arrière-plan.
transparent précise que la couleur de la bordure doit être transparente. Il s'agit de la méthode de représentation des couleurs prise en charge par CSS3 par défaut
- est représentée par le nom anglais de la couleur. Le nom anglais représente une couleur, mais la représentation est très limitée et difficile à retenir et à interroger.
- est représenté par la couleur de hex . Le principe des trois couleurs primaires de couleur et de lumière peut être consulté dans le tableau.
- est représenté par rgb (r, g, b). Le principe des trois couleurs primaires de lumière, rouge + vert + bleu.
- est représenté par hsl (Teinte, Saturation, Légèreté). Teinte + Saturation + Luminosité.
- est représenté par rgba (r, g, b, a). Le principe des trois couleurs primaires lumière, rouge, vert, bleu + transparence. a ∈ [0, 1], 0 représente une transparence totale.
- est représenté par hsla (Teinte, Saturation, Luminosité, alpha). Teinte, saturation, luminosité + transparence. alpha ∈ [0, 1], 0 représente une transparence totale.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" ;charset="utf-8">
<title>CSS颜色表示</title>
<style type="text/css">
div>div{
width: 400px;
height: 40px;
}
</style>
</head>
<body>
<script type="text/javascript">
for (var i = 0; i < 300; i++) {
document.write("CSS颜色表示");
}
</script>
<div style="position:absolute;top:0px">
<div style="background-color:gray;">
background-color:gray
</div>
<div style="background-color:#ff4314;">
background-color:#888
</div>
<div style="background-color:#ffff00;">
background-color:#ffff00
</div>
<div style="background-color:rgb(0, 255, 255);">
background-color:rgb(0, 255, 255)
</div>
<div style="background-color:hsl(120, 100%, 50%);">
background-color:hsl(120, 100%, 50%)
</div>
<div style="background-color:rgba(0, 255, 255, 0.5);">
background-color:rgba(0, 255, 255, 0.5)
</div>
<div style="background-color:hsla(120, 100%, 50%, 0.5);">
background-color:hsla(120, 100%, 50%, 0.5)
</div>
</div>
</body>
</html>Affichage de la page Web
Explication : La raison de l'ajout de texte à la fin est de vérifier la transparence .
(Partage de vidéos d'apprentissage : tutoriel vidéo CSS, front-end web)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!