Etiqueta línea divisoria. Lineas horizontales. Líneas verticales en HTML

Básicamente, las líneas horizontales se utilizan para decorar las páginas HTML de un sitio web, dándoles un aspecto más atractivo. Pero también pueden diferenciar visualmente la información de las secciones adyacentes, lo que añade comodidad a los lectores a la hora de estudiarla. Básicamente, dibuja líneas horizontales donde las necesites, eso es todo.

¿Cómo dibujar una línea horizontal?

Hay una etiqueta especial para dibujar líneas horizontales en HTML.

. Y él es etiqueta de bloque, es decir, crea saltos de línea antes y después de sí mismo, por lo que la línea siempre termina en una línea separada. En consecuencia, sólo se puede especificar dentro de etiquetas que puedan contener elementos de bloque, por ejemplo o
. pero aquí estoy
no puede tener contenido porque simplemente no tiene una etiqueta de cierre, lo que significa que está vacío.

Ejemplo de dibujo de líneas horizontales en HTML.

Dibujar líneas horizontales

Párrafo.

Párrafo.

Párrafo.

Resultado en el navegador

Párrafo.

Párrafo.

Párrafo.

Como puede ver, las líneas resultan muy delgadas, poco atractivas y dibujadas en todo el ancho disponible, por lo que ahora aprenderemos cómo cambiarlas para que se vean más atractivas.

¿Cómo cambiar el color, grosor y ancho de las líneas horizontales?

en viejo Versiones HTML en la etiqueta

Había atributos especiales con los que se podía cambiar el color, el grosor y el ancho de las líneas horizontales. Estos son color, tamaño y ancho, respectivamente. Pero en las nuevas versiones se abandonaron en favor de las hojas de estilo en cascada (CSS), por lo que, como habrás adivinado, volveremos a utilizar nuestro atributo de estilo favorito. La sintaxis general es:

estilo="fondo:color" >- el color de la línea (o más bien su fondo).

estilo="altura:tamaño" >- grosor de la línea.

estilo="ancho:tamaño" >- ancho de línea.

estilo = "fondo:color; alto:tamaño; ancho:tamaño"> - o puedes especificar todos los parámetros a la vez, pero no te olvides del punto y coma (;).

Un color se puede especificar por su nombre en inglés o por el código HEX del color precedido por una almohadilla (#). Bueno, esto ya lo sabes por la lección de cambiar el texto y el color de fondo.

Pero hablaremos más sobre cambiar el tamaño. Como recuerdas de lección sobre cómo cambiar fuentes, hay alrededor de diez unidades de medida en CSS, pero ancho de línea sólo se puede especificar en píxeles (px) y porcentajes (%), y espesor generalmente solo en píxeles. Si pones otras unidades de medida no será un error, sino que los navegadores simplemente las ignorarán.

Si especifica las dimensiones en píxeles, el grosor y el ancho de la línea dependerán de la resolución del monitor en el que se ve su sitio (cuanto mayor sea la resolución de la pantalla, más delgada y estrecha será la línea).

Como ya dije, solo se puede especificar el ancho de línea como porcentaje. Los tamaños porcentuales siempre dependen y se calculan en función del tamaño del elemento contenedor principal dentro del cual se encuentra la etiqueta.

. En este caso, las dimensiones del padre se toman como 100%. Por ejemplo, si colocamos la etiqueta
estilo="ancho:50%" > elemento interior
, entonces no importa cómo cambiemos el tamaño de la ventana del navegador o la resolución del monitor, el ancho de la línea siempre será la mitad del ancho del bloque.
.

Un ejemplo de cómo cambiar el color, el grosor y el ancho de las líneas horizontales.

Cambia el color, grosor y ancho de las líneas horizontales.

Resultado en el navegador

Cambiar la posición de las líneas horizontales.

Cuando cambias el ancho de la línea horizontal, puedes ver claramente que los navegadores siempre la colocan en el centro. Si desea cambiar su posición, simplemente use el interior

alinear el atributo con los siguientes valores:

  • centro- la línea está alineada con el centro (valor predeterminado).
  • izquierda- presiona contra el borde izquierdo.
  • bien- presiona hacia el borde derecho.

Ejemplo de alineación de líneas horizontales.

Cambia la posición de las líneas horizontales.

Resultado en el navegador

¿Cómo quitar el marco alrededor de una línea?

Mire el primer ejemplo de esta lección. ¿De qué color crees que son estas líneas? Pero eso no es cierto. Son transparentes, como cualquier elemento de página que no tenga un especificado. color de fondo! ¿No me crees? Luego mira el ejemplo donde cambiamos el color de las líneas. Para el primero, no establecimos el color, solo aumentamos su tamaño, ¿y no es esta línea transparente? ¡De modo que!

Ahora te lo explicaré. De forma predeterminada, los navegadores dibujan marcos alrededor de líneas, lo que crea un efecto tridimensional. Entonces, cuando no aumentamos el grosor de las líneas horizontales, los navegadores nos muestran solo estos marcos, ya que el grosor de la línea en sí es 0px.

Para quitar el marco alrededor de la línea, que a menudo sólo se estropea apariencia, aplicaremos el atributo de estilo nuevamente. Y está escrito así:

Tarea.

  1. Cree títulos de artículos, secciones y subsecciones. Colócalos todos en el centro.
  2. Establezca la fuente en Arial para toda la página y Courier para los títulos.
  3. Deje que el tamaño de fuente en toda la página sea el 85% del tamaño predeterminado del navegador. Y los títulos tienen el 145%, 125% y 110%, respectivamente, del tamaño de fuente de la página.
  4. Escribe un párrafo debajo del primer título, una cita larga debajo del segundo y un poema debajo del tercero. Y que el poema se ubique en el centro de la página.
  5. Destacar en negrita tres palabras en una cita.
  6. Debajo del título del artículo, dibuje una línea roja horizontal de tres píxeles de espesor en todo el ancho de la página.
  7. En la parte superior e inferior del poema, dibuja líneas de un píxel de grosor en negro. Deje que el ancho de la línea superior sea aproximadamente igual al ancho del verso y el de la línea inferior, la mitad.
  8. Elimine los marcos innecesarios de las líneas.

Lineas horizontales formado por una etiqueta no emparejada (no se necesita etiqueta de cierre)

y pueden ser elementos de diseño bastante únicos. Formatear texto con agregar HTML horizontal Las líneas le darán a la página una cierta lógica de presentación del texto y también facilitarán al lector resaltar bloques de información que deben estudiarse secuencialmente. Etiqueta
Se pueden formar líneas horizontales de diferentes colores, grosores y longitudes. Y esto es bastante sencillo de hacer, como se muestra en los ejemplos siguientes.

Por cierto, también puedes usar propiedades de estilo de bloque.

Y
para formar líneas
en un lugar determinado. Es cierto que esta opción puede no siempre ser conveniente, por ejemplo, pintar a veces no siempre vale la pena, pero en muchos casos es posible resolver los problemas de esta manera. Por ejemplo, dentro de una línea formada etiqueta
no puedes insertar texto. Pero dentro de los bloques esto es posible y se practica constantemente. Por lo tanto, debe elegir su opción según los requisitos de diseño.

Líneas verticales en HTML.

A líneas verticales están formados de hecho en los mismos bloques

Y
.
El único inconveniente es que la etiqueta no está disponible en todos los navegadores.
Funciona igual pero hay que intentarlo.
y ajustar la página, o utilizar navegadores actualizados.

Formación de líneas horizontales:

Etiqueta
inserta una línea horizontal en la página y tiene los siguientes atributos:

Sintaxis de etiquetas
:

Ejemplos de líneas horizontales en HTML:

Ejemplos de líneas verticales en HTML:

A continuación se muestra un ejemplo de una línea vertical roja a la izquierda.

A continuación se muestra un ejemplo de una línea vertical roja a la derecha.

A continuación se muestra un ejemplo de una línea roja horizontal en la parte superior.

A continuación se muestra un ejemplo de una línea horizontal en rojo.

A continuación se muestra un ejemplo de líneas horizontales y verticales.

Sintaxis de ejemplos de líneas verticales y horizontales en HTML:

presta atención al atributo de estilo
borde- izquierda (-derecha): 4px sólido #FF0000;:

Círculo formado usando una etiqueta.

A continuación se muestra un ejemplo de una línea vertical roja a la izquierda.

A continuación se muestra un ejemplo de una línea vertical roja a la derecha.

A continuación se muestra un ejemplo de una línea horizontal en rojo.

A continuación se muestra un ejemplo de líneas horizontales y verticales.

Y si analizamos estos ejemplos, podemos sacar una conclusión bastante simple de que las líneas verticales se forman mejor usando, y se pueden hacer opciones de línea intermedia con etiqueta

Pero todo depende de la imaginación y las peticiones. Así que elige y dale forma.

Del autor: Te saludo. La necesidad de presentar varios bloques de una página web en una línea es una tarea muy común a la que se enfrentan los maquetadores. Ocurre durante el diseño de casi todas las plantillas, por lo que, en cualquier caso, todos necesitamos conocer y aplicar las formas básicas de cambiar el comportamiento de los bloques.

Antes de ver las técnicas más comunes, me gustaría recordar un poco de teoría. Los elementos de la página web se dividen en elementos de bloque y en línea. Y la diferencia entre ellos es muy simple: las minúsculas se pueden colocar en una línea, pero las de bloque no. Por supuesto, las diferencias no terminan ahí, pero ésta es la principal diferencia. Los bloques ya pueden tener relleno en la parte superior e inferior (los minúsculos no), y se les pueden aplicar más propiedades.

Formas básicas de alinear bloques en CSS

No complicaremos nada, hay 3 formas principales:

Convierta bloques en elementos en línea. En este caso, las propiedades del bloque se pierden, por lo que esta opción casi nunca se utiliza.

Haz los elementos necesarios en bloque-línea. Este es un tipo especial en el que el elemento conserva sus propiedades, pero al mismo tiempo permite ubicar otros bloques cerca.

Haga que los elementos floten usando la propiedad flotante.

Centrémonos en estas opciones. No consideraremos Flexbox, visualización de mesa y otros aspectos. Entonces, digamos que tenemos 3 subtítulos.

Título 1

Título 2

Título 3

Naturalmente, todas las propiedades CSS deben escribirse en archivo separado(style.css), que debe estar conectado al documento html. En este archivo escribiré un estilo minimalista para que nuestros subtítulos sean simplemente visibles.

h3(antecedentes: #EEDDCD;)

h3 (

antecedentes: #EEDDCD;

Aquí están en la página:

Se comportan como bloques. Cada uno está ubicado en su propia línea, hay sangrías entre ellos. Si lo deseas, también puedes configurar cualquier relleno interno y hacer lo que quieras.

Convirtámoslo en líneas e inmediatamente agreguemos sangrías. Para hacer esto, el selector h3 necesita agregar las siguientes propiedades:

pantalla: en línea; relleno: 30px;

Hay 2 problemas principales que surgen al utilizar esta técnica. La primera es la sangría mínima. Se forma debido al hecho de que en el código hay un espacio entre los bloques, que forma esta sangría. Si es necesario solucionar este problema, existen 2 opciones principales:

En html, coloque el código de los bloques requeridos en una línea sin espacios

Agregue un margen negativo a la derecha de -4 píxeles. Eso es lo que ocupa un espacio.

El segundo problema es que si los elementos tienen diferentes alturas pueden surgir problemas de visualización. Considerándolo todo, Mejor opción- bloques flotantes. En lugar de display: inline-block escribimos esto:

Bloques en línea usando el marco.

Diré de inmediato que si va a utilizar cualquier marco CSS normal (por ejemplo, Bootstrap), entonces todo es mucho más sencillo. Todo el código CSS responsable de organizar los elementos ya ha sido escrito y todo lo que tienes que hacer es configurar las clases correctas. Para hacer esto, simplemente aprenda el sistema de cuadrícula y podrá crear plantillas responsivas de varias columnas sin mucha dificultad. Al menos será mucho más fácil que escribir CSS desde cero.

Otro desafío de escribir código desde cero surge cuando se necesita un diseño responsivo. Por supuesto, puedes implementarlo tú mismo mediante consultas de medios, pero será mucho más difícil si tienes una plantilla compleja.

Por ejemplo, cuando tienes pantallas grandes debería haber 4 columnas, en las del medio - 3, y en las del medio - 3, y en las teléfonos móviles— 2. Con la ayuda de frameworks como Bootstrap, o más bien con la ayuda de su grid, implementar algo como esto es cuestión de apenas unos minutos.

Trasladando suavemente el tema al marco Bootstrap, una vez más señalaré que si se enfrenta a la tarea de diseñar una plantilla adaptativa compleja, entonces es simplemente un pecado no utilizar la cuadrícula. Ni siquiera necesitas conectarte para hacer esto. versión completa marco: puede personalizarlo y detenerse ahí solo en lo que realmente necesita.

Puede aprender a trabajar con el marco utilizando . Allí se explica la teoría, pero lo más importante es la práctica. estas inventando 3 plantilla adaptativa y obtén una gran experiencia que te permitirá diseñar sitios web por encargo o para ti mismo. Y si desea familiarizarse con las ventajas y capacidades del marco de forma gratuita, le sugiero que consulte nuestra serie de artículos sobre Bootstrap, así como sobre diseño de diseño simple. Le deseo éxito en el diseño y creación de sitios web en general.

Tarea

Haz una línea horizontal en la página.

Solución

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 normal.

Usando una etiqueta

puede dibujar una línea horizontal, cuya apariencia depende de los atributos utilizados, así como del navegador. La etiqueta es un elemento de bloque, por lo que la línea siempre comienza con nueva línea, y luego todos los elementos se muestran en Proxima linea. Gracias a los muchos atributos de las etiquetas.
La línea creada a través de esta etiqueta es fácil de administrar. Si además conectas el poder de los estilos, agregar una línea a un documento se convierte en una tarea sencilla.

Línea predeterminada

mostrado en color gris y con efecto volumen. Este tipo de línea no siempre se adapta 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 mediante estilos. Sin embargo, los navegadores tienen enfoques mixtos a este problema, lo que significa que tendrás que usar varias propiedades de estilo a la vez. En particular, las versiones anteriores navegador de Internet Explorer usa la propiedad color para el color de la línea y otros navegadores usan color de fondo. Pero eso no es todo, debe especificar que el grosor de la línea (propiedad de altura) sea distinto de cero y eliminar el marco alrededor de la línea estableciendo la propiedad del borde en ninguno. Al reunir todas las propiedades del selector hr, obtenemos una solución universal para navegadores populares (ejemplo 1).

Ejemplo 1: línea horizontal

HTML5 CSS 2.1 IE Cr Op Sa Fx

Color de línea horizontal

Cadena de texto

Resultado este ejemplo mostrado en la Fig. 1.

Arroz. 1. Línea horizontal de color

Saludos a todos los lectores. De vez en cuando, los maestros se enfrentan al problema de cómo hacer una línea horizontal o vertical usando HTML o con usando CSS. Esto es lo que les contaré hoy.

Líneas en CSS

Hay varias formas de hacer líneas. Una de esas formas es utilizar CSS. O mejor dicho, usando Border. Veamos un ejemplo.

Y esto es lo que sucederá como resultado.

Línea horizontal y vertical usando css.

Se pueden dibujar líneas en CSS usando el operador Borde. Si solo necesita un rectángulo con un ancho de marco fijo, simplemente puede usar este operador y darle un valor. Por ejemplo borde:5px sólido #000000; significará que los bordes del bloque tienen un ancho igual a 5 píxeles de color negro.

Sin embargo, si necesita establecer no todos los límites, sino solo algunos, entonces debe especificar qué límites son necesarios y qué valor tendrá cada uno de ellos. Estos son los operadores:

  • border-top: establece el valor del borde superior
  • border-bottom: establece el valor del borde inferior
  • border-left: establece el valor del borde izquierdo
  • border-right: establece el valor del borde derecho.

Línea vertical y horizontal en HTML

Puede crear líneas en el propio HTML. Para hacer esto, puedes usar la etiqueta hr.

En este caso, se dibujará una línea horizontal, de un píxel de alto y de ancho completo.

Pero a esta etiqueta también se le pueden dar algunos valores.

  • Ancho– establece el valor del ancho de línea.
  • Color– establece el color de la línea.
  • Alinear– establece la alineación a izquierda, centro, derecha
  • Tamaño– establece el valor del grosor de la línea en píxeles.

Usando la etiqueta hr, también puedes establecer una línea vertical. Pero en este caso tendrás que volver a recurrir a los estilos.

En este caso, se dibujará una línea vertical de cien píxeles de alto, un píxel de grosor y cinco píxeles con sangría.

Conclusión.

Bueno, ahora sabes cómo puedes establecer una línea vertical y horizontal. Las líneas se pueden configurar como en sitios normales, con usando HTML y configúrelo en un sitio que utilice un CMS, por ejemplo, WordPress, pero en este caso, deberá cambiar al modo HTML.

Bueno, si tienes más preguntas, hazlas en los comentarios.