Lineas horizontales
Publicado: 2021-09-01Hay muchas maneras de hacer que sus páginas HTML se vean más impresionantes y mejor estructuradas. Más específicamente, una línea horizontal puede desempeñar un papel especial para hacer que el contenido de su sitio esté bien equilibrado, sea más claro y más fácil de navegar. Cada vez que decidimos hacer grandes cambios en nuestros sitios web, cosas tan pequeñas como las líneas pueden marcar la diferencia. Estas pequeñas cosas hacen que el mensaje de su sitio sea más completo. Además, pueden cambiar el atractivo visual de su recurso web y la forma en que su audiencia percibe sus datos.
Pero también puede crear líneas personalizadas que se ajusten a su página web y que le permitan dominar mejor el espacio que está manipulando en su página. Dicho esto, echemos un vistazo más de cerca a cómo personalizar las líneas horizontales dentro de sus páginas HTML.Una línea horizontal es un elemento HTML que se utiliza como decoración de su página web. Sin embargo, también puede ser útil para muchos otros propósitos, como:
- Un separador que divide visualmente diferentes partes de tu contenido y pone énfasis donde termina una idea y comienza otra.
- Un resaltador que resalta algunas secciones significativas de una página web.
- Una línea horizontal se considera una de las formas más populares y fáciles de lograr una amplia gama de propósitos en un sitio web. Aunque puede parecer simple a primera vista, es un elemento multifuncional que puede ajustar según sus requisitos específicos. Usando simples modificaciones del código HTML de su página web, puede ajustar las siguientes especificaciones de la línea horizontal:
Longitud;
Ancho;
Color;
Alineación.
También vale la pena señalar que la línea horizontal se refiere a los elementos de bloque. Significa que se coloca en una línea separada en una página web, y el texto que agregue al lado de la línea se colocará debajo.
Las líneas horizontales son muy útiles para separar su página en diferentes secciones, para agregar una línea horizontal simple, simplemente escriba < hr >, y obtendrá esto:
Cómo crear una línea horizontal
Puede establecer una línea usando una simple etiqueta < hr >. Es la abreviatura de "Regla horizontal" y establece los parámetros externos clásicos. Lo que lo diferencia de muchos otros es que no necesita una etiqueta final y puede existir por sí solo. Puede cambiar las características externas de un elemento usando valores adicionales en la etiqueta:
Se parece a esto. Por ejemplo, si queremos una longitud de 100 píxeles, estableceríamos una etiqueta como esta: hr ancho = "100.
Alineación.
Puede alinear la línea en los bordes izquierdo o derecho, y también en el centro. Esta función solo es válida si ya ha especificado el parámetro de ancho, ya que no se puede alinear una línea de página completa. Para la alineación, establezca un atributo adicional en la etiqueta "alinear" y agréguele una dirección: centro - para el centro, izquierda - para la izquierda y derecha - para la alineación derecha. La etiqueta terminada, en este caso, se verá así: si necesitamos establecer la alineación central para una línea horizontal con una longitud de 150 píxeles, entonces la etiqueta terminada se verá así: hr align = "center" width = " 150". Tenga en cuenta que "alinear", la medida de alineación, se coloca en la posición 1, aunque el atributo depende del ancho de la medida de longitud.Ancho.
Opcionalmente, también puede especificar el ancho, creando un subrayado en negrita o fino. Este criterio no depende de nada y se puede utilizar de forma independiente sin especificar la longitud o la alineación. Para ello utilizamos el atributo de tamaño en la etiqueta y un valor numérico igual al ancho deseado en píxeles. El número se indica entre comillas después del atributo de tamaño y el símbolo "=".
Por lo tanto, si necesitamos crear una línea de 15 píxeles de ancho, debemos crear la siguiente etiqueta: hr size = "15".
Color.
También se establece como un indicador independiente. Para cambiarlo, utilice el atributo de color en combinación con el nombre del color en forma de código o en inglés. El color se indica entre comillas después del símbolo "=".
Por lo tanto, la etiqueta de una línea blanca estándar se puede escribir de dos maneras: hr color = "#FFFFFF" o hr color = "blanco"
El negro se puede crear usando el código # 000000.
¿Cómo hacer una línea horizontal de color?
Las líneas horizontales son buenas para separar un bloque de texto de otro. El texto pequeño con líneas horizontales en la parte superior e inferior atrae más la atención del lector que el texto ordinario.
Con la etiqueta < hr >, puede dibujar una línea horizontal, cuya apariencia depende de los atributos utilizados, así como del navegador. La etiqueta se refiere a los elementos del bloque, por lo que la línea siempre comienza en una nueva línea y, después de eso, todos los elementos se muestran en la línea siguiente. Gracias a los muchos atributos de la etiqueta < hr >, la línea creada a través de esta etiqueta es fácil de manipular. Combinado con el poder de los estilos, agregar una línea a su documento es pan comido.
Por defecto, la línea se muestra en gris y con efecto de volumen. Este tipo de línea no siempre se ajusta al diseño del sitio, por lo que es comprensible el deseo de los desarrolladores de cambiar el color y otros parámetros de la línea a través de estilos. Sin embargo, los navegadores son ambiguos acerca de este problema, por lo que tendrá que usar varias propiedades de estilo a la vez. En particular, las versiones anteriores de Internet Explorer usan la propiedad de color para el color de línea, mientras que otros navegadores usan un color de fondo. Pero eso no es todo, en este caso, asegúrese de especificar un grosor de línea (propiedad de altura) que no sea cero y elimine el borde alrededor de la línea estableciendo la propiedad de borde en ninguno. Juntando todas las propiedades para el selector hr, obtenemos una solución universal para navegadores populares.
< ! DOCTYPE html > < html > < encabezado > < juego de caracteres meta = "utf-8" > <título> Color de línea horizontal </título> <estilo> hr { borde: ninguno; /*Eliminar el borde*/background-color: red; / * Color de línea * / color: rojo; / * Color de línea para IE6-7 * / altura: 2px; / * Ancho de línea * / } < /style > < /head > < cuerpo > < hr > < p > Cadena de texto < /p > < hr > < /body > < /html >Ejemplos:
Este:
< hora color="#c7c34c" tamaño="2" ancho="50%" >da esto:
Color: color de la línea:
< hora color="#c7c34c" tamaño="2" ancho="50%" >Tamaño: Altura de la línea expresada en píxeles:
< hora tamaño="x" >Ancho: Ancho de la línea expresado en porcentaje (%) o en píxeles (en mi ejemplo es el 50% del tamaño original):
<hr ancho="x%"> o <hr ancho="x" >Más avanzado:
Este:
< hora ancho="400" color="#000000" tamaño="4" >da:
En este caso usamos estilo:
El ancho del borde es de 3 píxeles (3 px)
esta punteado
El color base es negro: #000000
Puntos de color azul: #0099CC
Un último ejemplo para explicar más, si aún es necesario;):
Este
< hora ancho="400" color="#FFFFFF" tamaño="6" >da:
En este caso justo arriba:
El ancho del borde es de 2 píxeles (2 px)
es discontinuo
El color base es blanco: #FFFFFF
Guiones de color plateado: #C0C0C0
Los posibles estilos son:
-punteado
-discontinua
-sólido
-doble
-ranura
-comienzo
-recuadro
-cresta
¡Eso es todo lo que tengo que decir sobre las líneas horizontales!