En este artículo, veremos cómo agregar la línea Horizontal en HTML. Para ello, existen 2 enfoques:
- Usando la etiqueta <hr>
- Mediante el uso de las propiedades CSS
Discutiremos ambos enfoques secuencialmente para agregar la línea horizontal.
Adición de la línea horizontal mediante la etiqueta <hr> : la etiqueta de regla horizontal (<hr>) se utiliza con el fin de insertar líneas horizontales en el documento HTML para separar secciones del documento. Es una etiqueta vacía o no emparejada, lo que significa que no es necesaria la etiqueta de cierre.
Sintaxis:
<hr attribute="value">
Ejemplo 1: este ejemplo describe la etiqueta <hr> para agregar la línea horizontal.
HTML
<!DOCTYPE html> <html> <head> <title>Horizontal line</title> </head> <body> <h2>Horizontal line</h2> <hr> <p>This is simple horizontal line.</p> </body> </html>
Producción:
Ejemplo 2: Este ejemplo describe la etiqueta <hr> con varios atributos y sus valores para diseñar la línea horizontal.
HTML
<!DOCTYPE html> <html> <head> <title>Horizontal line </title> </head> <body> <h2>Horizontal line using various attributes</h2> <hr width="70%" size="20" align="center"> <hr width="70%" size="20" align="right" color="blue" noshade> <hr width="500px;" color="red" size="10" align="left"> </body> </html>
Producción:
Agregar la línea horizontal usando las propiedades de CSS: en este caso, usaremos la propiedad de estilo de borde para crear la línea horizontal. Podemos usar la propiedad border-top que especifica el estilo del borde superior o la propiedad border-bottom , que puede establecer el estilo del borde inferior de un elemento. Ambas propiedades se pueden usar para agregar la línea horizontal.
Ejemplo 3: este ejemplo describe el dibujo de la línea horizontal usando la propiedad de estilo de borde .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Horizontal line using CSS Properties</title>
<style>
.horizontal_line {
background-color: green;
width: 90%;
height: 5px;
border-top: 5px dotted black;
line-height: 80%;
}
.line {
border-bottom: 5px solid red;
margin-top: 5px;
width: 90%;
}
</style>
</head>
<body>
<h2>Horizontal line using CSS Properties</h2>
<div class="horizontal_line"></div>
<div class="line"></div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por annieahujaweb2020 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA