Separadores en html: la etiqueta <hr>
Para separar un texto de otro o un párrafo de otro podemos utilizar una línea horizontal de un tamaño o un grosor determinado por nosotros. Esa franja la escribimos con la etiqueta <hr>. La contrario que muchas etiquetas html, ésta no necesita ser cerrada. Sólo con escribir la etiqueta anterior ya la escribimos.
La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de las reglas CSS que definamos.
Definir su grosor
A continuación te vamos a ofrecer dos ejemplos de franjas con diferentes grosores, siendo la primera 15px y la segunda 2px. La diferencia es abismal.
<hr style="border:15px;"><hr style="border:2px;">
Y el resultado sería el siguiente:
Definir su anchura
En el caso de no escribir nada (como en los ejemplos anteriores), la franja será predeterminada del 100%. Si queremos que ocupe más o menos tendremos que escribirlo con el atributo CSS width.
A continuación vamos a escribir una franja de 75% de ancho:
<hr style="width:75%;">
Que quedaría de la siguiente manera:
Definir su color
También podemos predefinir el color que le queremos dar a la franja con el atributo CSS «border-color». Es muy sencillo. Por ejemplo, si queremos que nuestra franja sea de color rojo sólo debemos ponerle la etiqueta:
<hr style="border-color:red;">
Buena noche caballero/señorita, espero que esté bien, quisiera darle las gracias por el curso. La verdad es que estoy aprendiendo bastante y es gracias a usted.
Gracias lo del color me funcionó.
hola, tengo un problema, solo me colorea el borde del separador y no lo rellena. ¿Como lo soluciono?
Para colorear el relleno del separador y no el borde, ponemos:
hr {
border: 0px; /* le sacamos el borde! */
height: 1px; /* le asignamos una altura */
background-color: rgba(255,255,255,.3); /* le ponemos el color que deseamos */
}
Gracias!!!
El border-color: red; es como el color de fondo, pero como es una linea cuenta como borde.
Buenas! me gustaría saber como poner la línea separadora entre dos palabras y no entre dos párrafos. Gracias.