Línea vertical CSS
Ejemplo 1
Estamos utilizando el código Visual Studio para generar un nuevo archivo. Se abre el archivo en blanco y debemos elegir un idioma. Primero estamos haciendo el código HTML, por lo que estamos eligiendo el idioma HTML. Después de esto, el archivo producido es un archivo HTML. No necesitamos dar una extensión de archivo al guardarlo. Ahora, coloque las etiquetas HTML básicas (o puede poner el "!"Marca para generar automáticamente estas etiquetas). Si pones "!"Y luego presione" Enter ", obtendrá todas las etiquetas fundamentales de HTML inmediatamente. En el cuerpo, puedes ver que hay un encabezado y un contenedor Div. El "V1" es el nombre del contenedor Div. También vinculamos este archivo HTML con el CSS utilizando la etiqueta "Enlace" en la "Cabeza" de este código HTML.
Estamos decorando el encabezado y utilizando la propiedad "Decoración de texto" y estableciéndola en "Subrayar". Entonces, al usar esta propiedad, el encabezado estará subrayado. También usamos la propiedad de "color" que establece el color del texto del encabezado y lo establece en "Blue-Violet". En la siguiente línea, tenemos la propiedad de "Fuente-Familia" que establecemos como "Times New Roman". Luego, colocamos el nombre del contenedor Div, que es "V1" y dibujamos la línea vertical en este contenedor Div. Podemos dibujar la línea vertical usando la propiedad "borde".
Por lo tanto, estamos utilizando esta propiedad de la propiedad "fronterizo-izquierda" que nos ayuda a dibujar una línea vertical. Como es la propiedad "fronterizo-izquierda", tenemos que establecer el "ancho", "tipo" y "color" para que esta propiedad: "10px" en su "ancho", "sólido" en "tipo" y "Rojo" en "color". Presentará una línea vertical en la pantalla del ancho de 10 px y en rojo. También establecemos la "altura" de esta línea vertical como "400px". Ahora, vamos a producir la salida de este código haciendo clic en el botón derecho del mouse y luego seleccionando "Abrir en el navegador predeterminado". O puede usar el acceso directo que es "Alt+B" para obtener la salida.
La salida se muestra a continuación. Puedes ver la línea vertical. Esta línea se representa en el lado izquierdo, ya que hemos utilizado la propiedad "borde-izquierda" para dibujar esta línea vertical.
Ejemplo 2
En el ejemplo 2, agregamos un párrafo en el código HTML anterior. Ahora tenemos un encabezado, un párrafo y un contenedor DIV en este código HTML. Después de esto, estamos procediendo al archivo CSS para generar el código CSS.
Decora el encabezado un poco aplicando la propiedad "Decoración de texto" y configurándola en "Dunta" y usando "Rojo" como el valor de la propiedad "Color". El "argelino" se usa como la "familia de fuentes". Ahora, aplique algo de estilo al párrafo y establezca su "tamaño de fuente" en "20px". Utilizamos "verde" como el valor de la propiedad "color". Además, utilice "Calibri" como una "familia de fuentes". La palabra clave "en negrita" se utiliza aquí como el "Font-Weight".
Use el DIV llamado "V1" y coloque la propiedad "fronterizo-izquierda". Esta propiedad ayuda a dibujar una línea vertical dentro del contenedor Div. El "ancho" de la línea vertical es "10px". Esta línea aparece en tipo "sólido" porque establecemos "sólido" como el tipo de propiedad fronteriza. El color de la línea vertical es "naranja". La "altura" determina la altura de la línea que establecemos como "400px". La "posición" de la línea vertical es "absoluta". Establecimos la "izquierda" en "50%" para que esta línea vertical aparezca en la media del lado izquierdo del 50% en el centro. El "margen-izquierda" es "-3px". Esta propiedad se utiliza para definir el espacio fuera del objeto en el lado izquierdo. También establecemos la "parte superior" de la línea vertical como "50px".
La línea vertical aparece en el 50% del lado izquierdo de la pantalla de salida porque establecemos este valor en el CSS y hemos utilizado la propiedad "Border-izquierda" para dibujar esta línea.
Ejemplo 3
Ahora, vamos a dibujar dos líneas verticales. Entonces, colocamos dos contenedores DIV diferentes en este código HTML. Usaremos cada div para dibujar líneas verticales por separado. El encabezado y las etiquetas del párrafo son las mismas que anteriores y simplemente cambiamos el texto que está escrito en las etiquetas del párrafo.
En este caso, la "familia de fuentes" es "argelina" para el encabezado. Establezca el "tamaño de fuente" del párrafo en "20px" y aplique más estilo. Para el "color", utilizamos el "púrpura". Además, use "Times New Roman" como una "familia de fuentes". La palabra clave "en negrita" se usa como "Font-Weight". También "subrayamos" el texto del párrafo utilizando "Decoración de texto". Utilizamos la propiedad "fronteriza-izquierda" en el Div llamada "V1."Este atributo permite que se dibuje una línea vertical dentro del contenedor Div. El "ancho" de la línea vertical es "12px" y la línea es "sólida" en apariencia ya que el tipo de propiedad fronteriza es "sólida". En este caso, la línea vertical es de color "azul". La altura de la línea especifica en la "altura", que pusimos a "400px". La "posición" de la línea vertical es "absoluta". Establecimos la "izquierda" en "50 por ciento", por lo que esta línea vertical se mostrará en el lado izquierdo del 50 por ciento, que está en el medio. El "-3px" es el "margen-izquierda."El" superior "aquí es" 130px ".
Ahora, nuevamente usamos las mismas propiedades para el segundo div al crear otra línea vertical en el segundo div. Establecemos la propiedad "fronterizo-izquierda" en "12px sólido verde" y la "altura" para esta línea es la misma que la primera línea vertical que es "400px". Establecemos su propiedad "izquierda" en "20%" y esta línea aparecerá en el 20% en el lado izquierdo. El "margen-izquierda" y la "superior" es lo mismo que la primera línea vertical.
Podemos ver que dos líneas verticales se renderizan en la pantalla de salida. Ambos se representan en una posición diferente en la salida a medida que establecemos esta posición en el código CSS.
Ejemplo 4
Ponemos un rumbo y un div en el cuerpo y también escribimos algún texto en el contenedor div. También dibujaremos una línea vertical en CSS y vincularemos ambos archivos.
Ajuste la propiedad de "decoración de texto" a "subrayar" y "verde" como el "color" para agregar un toque adicional al encabezado. La "familia de fuentes" del encabezado es "argelina" en este ejemplo y está alineado en el "centro". En el DIV, utilizamos el atributo "fronterizo". Dentro del contenedor Div, este atributo permite dibujar una línea vertical. El "ancho" de la línea vertical es "10px" y la línea parece "sólida" ya que el tipo de propiedad de la frontera es "sólida". La línea vertical es de color "Goldenrod" en este código. La "altura" indica la altura de la línea, que ajustamos a "500px". Usamos el color "marrón" para el "color". Alterar el "tamaño de fuente" del texto a "23px" y agregarle más decoración. La palabra clave "en negrita" se utiliza como el "font-peso" aquí. Además, como una "familia de fuentes", use "sans-serif".
En esta captura de pantalla, la línea vertical se representa en el lado derecho de la pantalla de salida porque hemos utilizado la propiedad "fronteriza" en este ejemplo.
Conclusión
El objetivo de presentar esta guía es ayudarlo a comprender la "línea vertical" en CSS. Hemos repasado esta noción en detalle y le hemos dado varios ejemplos de cómo hemos dibujado esta línea vertical en CSS. Hemos explicado que hemos utilizado la propiedad "fronterizo-izquierda" o "fronterizo" para representar esta línea vertical en la pantalla de salida. Hemos escrito aquí sobre cómo renderizar líneas verticales. Hemos usado cuatro ejemplos distintos aquí, y hemos dado la salida en esta guía.