Borde en línea de CSS

Los bordes en línea y de contorno son las dos propiedades básicas del diseño de cualquier contenido creado en un cuerpo HTML, ya sea una pieza de texto, forma o imagen. Un lenguaje de marcado de hipertexto es la combinación de código utilizado para crear un contenido en una página web. Este contenido está diseñado y alineado a través de etiquetas adicionales utilizando la hoja de estilo en cascada.

Un borde en línea es una propiedad que se agrega al contenido HTML para resaltar esa porción específica al dar un color o cualquier propiedad sólida o punteada al borde. Este tutorial contiene algunos ejemplos de creación y diseño de un borde en línea de CSS.

Ejemplo # 1: estilo en línea de borde discontinuo

Primero, explicamos la sección de estilo CSS dentro de la etiqueta de la cabeza. El estilo interno contiene las ID y las clases para aplicar el estilo al contenido relevante que se desarrolla dentro del cuerpo HTML. Usamos la clase de estilo "H1" para encabezarse 1 y aplicarle un color púrpura. El estilo anidado es para el div. Esto se aplica por el ancho y el contenedor en píxeles. Es una caja de contenedores que se utiliza para almacenar los diferentes contenidos dentro de él. Entonces, escribimos un texto simple dentro de la clase Div.

Se aplica un borde a cualquier característica del HTML. En este ejemplo, aplicamos un borde a la clase Div alrededor del texto que usamos. Entonces, la declaración de estilo para el borde se aplica en la clase Div. Se crea "One" que se menciona dentro de la etiqueta DIV para que todos los efectos del borde se apliquen al contenedor DIV.

Hay tres estilos básicos de contenido que se aplican al div. Uno es el tipo de borde, que es sólido o punteado. Seleccionamos el borde sólido con un color negro que tiene un ancho de 5 píxeles.

La siguiente propiedad es propiedad de la línea fronteriza. Esta propiedad de estilo se elige como discontinua. Esto significa que las líneas verticales del borde están discontinuas, mientras que las líneas horizontales son simples sólidas. Si no mencionamos ninguna propiedad de estilo de las fronteras, entonces, por defecto, se selecciona como un borde sólido. El color del fondo en el div se establece como rosa. Esto se hace para discriminar la parte DIV desde el fondo de toda la página web.

Código de estilo HTML:

Conduciendo hacia la parte del cuerpo HTML, diseñamos cada contenido del HTML en el centro de la página web. Primero, se usa la etiqueta de estilo. El color BG que representa el color de fondo de la página web se establece dentro de la etiqueta del cuerpo. Se declara un título. Después de aplicar un pequeño descanso, para escapar de una sola línea en el HTML, la etiqueta Div se declara con la clase de Declaración de CDD.

Código de carrocería HTML:

Esta declaración de clase es responsable de aplicar todos los efectos de estilo relacionados con el borde. Ahora, cierre todas las etiquetas y guarde el archivo de texto. Ejecute este archivo en el navegador para ver el resultado de este código.

Producción:

Verá que el color BG se aplica junto con los encabezados. Se diseña un DIV con el borde que tiene una naturaleza sólida, con el estilo en línea del borde como discontinuo. Entonces, al usar un valor de propiedad en línea discontinua, podemos obtener una salida como esta.

Ejemplo #2: estilo sólido en línea de borde con modo de escritura horizontal

Dentro de la parte del cuerpo del HTML, el código HTML es casi el mismo que utilizamos en el ejemplo anterior. Se escribe un código dentro de la etiqueta central, con un div declarado. Dentro del div, se usa una etiqueta de párrafo que tiene un texto sin formato, con una clase como una declaración de estilo. Un nombre de clase "Texto de ejemplo" es responsable de todos los efectos. Y los cambios aplicados al párrafo

son el caso fronterizo. Cierre todas las etiquetas y vaya a la parte de la cabeza para diseñar el contenido dentro del Div con un borde.

Código de carrocería HTML:

Vaya a la etiqueta de estilo dentro de la sección de la cabeza. Agregamos primero el CSS al contenedor Div. El color de fondo se aplica al DIV con la altura y el ancho para crear una caja en el fondo.

Código de estilo HTML:

Como agregamos una clase de texto de ejemplo al párrafo dentro del div, ahora aplicamos el estilo de borde al texto. En esta clase, usamos un estilo del modo de escritura al párrafo. Por ejemplo, usamos un modo de escritura vertical. El texto aparece comenzando de arriba hacia abajo en lugar del estilo horizontal predeterminado que es de izquierda a la derecha.

Además, la frontera tiene como un color púrpura sólido. La propiedad de estilo en línea del borde se establece como sólida. Entonces, el borde es una forma de rectángulo sólido alrededor del texto en una dirección vertical. Ahora, ejecutamos el código en el navegador.

Producción:

Verá que se crea una visualización vertical del texto. Este texto tiene un borde a su alrededor que tiene una especialidad de espesor sólido de 5 píxeles y estilo de borde en línea sólido.

Teniendo en cuenta el mismo ejemplo anterior, aplicamos algunos efectos diferentes al código. Aplicar el modo de escritura de la manera opuesta utilizando el estilo de borde y los cambios de estilo en línea puede causar un efecto diferente en el texto que estamos utilizando para resaltar el HTML.

Código de estilo:

En el caso de Div, el ancho y la altura se incrementan para formar una caja rectangular grande. Del mismo modo, también cambiamos los valores dentro del ".clase de expulsión de la clase "para aplicar los efectos en el borde.

Usamos el modo de escritura del texto, ya que es la propiedad de texto, en una dirección horizontal. Significa que el texto es como la línea predeterminada que comienza desde la dirección izquierda a la derecha. El borde se establece como salpicado con 5 píxeles en el ancho y la magenta. Mientras que el estilo en línea del borde se toma como la misma propiedad sólida. Todos los demás efectos, como el color de fondo, son los mismos y todo el código dentro de los mismos son los mismos.

Producción:

Cuando ejecute el archivo en el navegador, verá que se crea una línea de texto horizontal junto con un borde con una línea punteada. De esta manera, podemos crear los bordes que varían en forma y estilo.

Conclusión

El estilo de borde en línea juega un papel esencial en el estilo del borde del texto y la imagen, o cualquier tipo de forma. Intentamos en este tutorial proporcionarle los mejores ejemplos de los bordes CSS en línea utilizando el código HTML y el estilo CSS dentro del archivo. Al principio, dimos una visión general del lenguaje frontal HTML y CSS. En la sección de implementación, primero implementamos el borde alrededor del texto con propiedades en línea de borde especificadas. El borde depende del estilo de escritura; se forma según el estilo de texto. Por ejemplo, para el estilo de escritura vertical del texto, el borde está en la dirección vertical.