Personalice el grosor de la etiqueta HR en HTML
Este artículo explica la etiqueta <hr> en HTML. También explicaremos los atributos de la etiqueta <hr> y su personalización, es decir, el cambio de grosor, color y opacidad en CSS.
Lo demostraremos creando un proyecto HTML e implementando la etiqueta <hr>.
la etiqueta hr en HTML
La etiqueta <hr> en HTML le permite agregar una ruptura temática o una regla horizontal para separar o dividir partes del documento.
Se requiere CSS apropiado para personalizarlo. No requiere una etiqueta final. Su sintaxis básica es la siguiente:
<hr property: value;> ...
Atributos:
alinear: este atributo puede alinear la línea horizontal en la página.Izquierda,centroyderechason valores posibles para la propiedadalinear.noshade: Especifica que la línea no tenga efecto de sombreado.tamaño: Especifica la altura de la línea horizontal.ancho: Especifica el ancho de la línea horizontal.color: Especifica el color de una línea horizontal.
un ejemplo práctico para aprender las funcionalidades de la etiqueta hr
Vamos a crear un proyecto HTML de muestra para implementar la etiqueta <hr>. Abra cualquier editor HTML compatible con su sistema operativo, como Notepad/Notepad++ (PC) o TextEdit (Mac).
Escriba el siguiente código HTML simple en el editor, guarde el archivo como Nombre de archivo.html y abra el archivo guardado en cualquier navegador web compatible.
<!DOCTYPE html>
<html>
<body>
<center>
<h1>Sample Task to Practice hr Tag</h1>
<p>Paragraph to split.</p>
</center>
</body>
</html>
Producción:
Insertar la regla horizontal en HTML
Establezca un corte horizontal entre el encabezado y el párrafo insertando la etiqueta <hr> en el archivo de origen.
Copie el siguiente fragmento de código en el archivo HTML creado anteriormente.
<!DOCTYPE html>
<html>
<body>
<center>
<h1>Sample Task to Practice hr Tag</h1>
<hr>
<p>Paragraph to split.</p>
</center>
</body>
</html>
Producción:
Se mostrará una línea horizontal entre el encabezado y el párrafo. Esta barra tendrá valores predeterminados de color, tamaño, ancho, alineación.
Personaliza la regla horizontal en HTML
Los atributos (alinear, color, tamaño, ancho, noshade) se pueden personalizar según el resultado deseado. Se debe utilizar CSS para modificar la apariencia de la regla horizontal en el documento.
La propiedad de altura de <hr> especifica el grosor de la barra. La visibilidad de la barra se puede configurar utilizando el atributo de opacidad.
Por ejemplo, si alguien quiere una barra que no destaque mucho en el documento, el valor de opacidad debe ser inferior a 1.
el espesor de la regla horizontal
La propiedad altura de CSS se utiliza para especificar el grosor de la regla horizontal. El valor mínimo es 1px para altura.
A continuación se muestra el fragmento de código de la hoja de estilo CSS.
hr {
position: relative;
top: 10px;
border: none;
height: 1px;
background: green;
margin-bottom: 30px;
width: 30em;
}
El atributo superior especifica el espacio entre la línea horizontal y la parte superior del documento. Fondo en CSS es la alternativa al atributo color de HTML.
Especifica el color de la barra. El código completo para demostrar estas propiedades es el siguiente:
<!DOCTYPE html>
<html>
<head>
<title> Document </title>
<style>
hr.class1 {
position: relative;
top: 10px;
border: none;
height: 1px;
background: red;
margin-bottom: 30px;
width: 30em;
}
hr.class2{
position: relative;
border: none;
height: 10px;
background: green;
width: 30em;
}
</style>
</head>
<body>
<center>
<h1>Sample Task to Practice hr Tag</h1>
<hr class=class1>
<hr class=class2>
<p>Paragraph to split.</p>
</center>
</body>
</html>
Producción:
la opacidad de la regla horizontal
El atributo opacidad en CSS especifica la transparencia de la regla horizontal. El valor de opacidad 1 no muestra transparencia, mientras que el valor de opacidad 0 muestra transparencia completa.
A continuación se muestra la sintaxis del atributo opacity.
hr
{
background-color: gray;
opacity: 0.5;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title> Document </title>
<style>
hr.class1 {
position: relative;
top: 10px;
border: none;
height: 1px;
background: red;
margin-bottom: 30px;
width: 30em;
}
hr.class2{
position: relative;
border: none;
height: 10px;
background: green;
margin-bottom: 30px;
width: 30em;
}
hr.class3{
position: relative;
border: none;
height: 10px;
background: green;
width: 30em;
opacity: .25;
}
</style>
</head>
<body>
<center>
<h1>Sample Task to Practice hr Tag</h1>
<hr class=class1>
<hr class=class2>
<hr class=class3>
<p>Paragraph to split.</p>
</center>
</body>
</html>
Producción: