Propiedad de la izquierda CSS

Un lenguaje CSS tiene varios efectos que aplicar como código en el contenido HTML que se declara para formar una página web. Un lenguaje HTML crea el diseño de objetos y CSS y les agrega estilo aplicando varios efectos y valores. Una de las propiedades de CSS es la alineación y la dirección del contenido HTML. En este artículo, hablaremos sobre una de las propiedades que se usan comúnmente para alinear los objetos HTML.

Propiedad izquierda

CSS ofrece la alineación del contenido HTML en cada dirección. Uno de ellos es la propiedad izquierda. El nombre indica que se refiere a la dirección izquierda, y esta dirección está vinculada con la alineación horizontal. Si a un objeto HTML no recibe ninguna propiedad de posición, esta propiedad izquierda no se aplica a ese objeto. En otras palabras, esta propiedad no es para objetos no posicionados.

Sintaxis
La sintaxis básica de la propiedad izquierda puede ser:
Izquierda: Longitud | Porcentaje | Auto | Inicial | heredar;

El valor puede ser de cinco tipos. Explicaremos cada tipo de valor de propiedad izquierda:

• Longitud: esta variable contiene el valor de la propiedad de CSS Left de cualquier contenido. El valor puede ser un número positivo o negativo.
• Porcentaje: la propiedad de ancho del objeto HTML se toma en la unidad porcentual.
• Auto: esta propiedad CSS se usa para establecer el valor de esta propiedad en la predeterminada.
• Inicial: este valor convierte la propiedad izquierda en su valor original de forma predeterminada o inicialmente cuando el objeto se declaró antes de que se aplicara cualquier transformación.
• Heredar: la herencia se refiere a la herencia. El valor de una propiedad izquierda se establece de los padres del objeto HTML.

Ahora, usamos un fragmento de formas que están flotando al azar en la página web. Todos estos bloques son div, un contenedor creado en el cuerpo HTML. Cada bloque está en su dirección, algunos se superponen entre sí. Mientras que algunos bloques se muestran de forma independiente. Cada uno de ellos está posicionado por esta propiedad izquierda a través de CSS utilizando los valores relativos o absolutos. Discutiremos la creación de este tipo de formas en las páginas web.

Trabajo de la propiedad de CSS Left Left

Algunas terminologías básicas que son esenciales para la implementación de la propiedad izquierda se describen de la siguiente manera:

• Propiedad izquierda en posición relativa
  Esta propiedad se aplica en el lado izquierdo o en el borde izquierdo del contenido y es por eso que se mueve hacia el lado derecho de su forma original. Si este valor se toma en un valor positivo, el cuadro HTML o cualquier forma se mueve a la derecha. La posición relativa de cualquier objeto HTML es la dirección que depende de los otros elementos en sus alrededores.
• Propiedad izquierda en posición absoluta
  Para aquellos elementos que tienen el valor absoluto para el posicionamiento, esta propiedad mueve el lado izquierdo del elemento al lado derecho del cuerpo. El elemento se desplaza de su posición inicial. El valor absoluto es el valor del elemento de acuerdo con el fondo.
• Propiedad estática
  Esta propiedad no afecta el objeto. Si lo aplicamos al elemento o no, el objeto HTML permanece intacto.

Ejemplo 1:
Primero, considere la sección del cuerpo que contiene el contenido HTML. El color de fondo se cambia para mejorar los colores de los divs que creamos. Se crea una clase de Div Padre y también se declaran dos divs dentro del Div Padre, formando dos Divs infantiles. Cerrar el Div Padre. Agrega dos divs.

Cada 5 divs se mencionan con las clases de CSS. Estas clases se declaran dentro de la sección principal del código HTML.

< div class = :sample1" >longitud

Después del código del cuerpo, nos encontraremos con la sección principal del código. Primero, el color de fuente del cuerpo se establece en todo el mundo para que sea fácilmente visible sobre el fondo negro.

Ahora, hablamos sobre el CSS interno que usamos aquí. Cada clase se explica aquí para agregar efectos al div. Estas clases aplican más que los efectos individuales en el DIV colectivamente a la vez, por lo tanto, el CSS interno es preferible que el CSS en línea. Las cinco propiedades que se agregan a cada clase son el tipo de posición, la dirección izquierda y el tamaño del DIV que se aplica que contiene el ancho y la altura en los píxeles. Se aplica un borde al divto, lo convierte en una forma. Todas estas clases tienen las mismas propiedades, pero todas tienen valores diferentes.

.muestra1
Posición: Absoluto;
Izquierda: 109px;
Ancho: 200px;
Altura: 100px;
borde: 5px de naranja sólida;

Hablando de esta clase Sample1, la posición se toma como absoluta. Esto se aplica para cada clase, lo que significa que cada DIV se declara siguiendo los valores y no dependiendo del otro DIV que se declare en su entorno. La propiedad izquierda se aplica en píxeles.

Las clases Sample2 y Sample3 se aplican con colores rojos y verdes.

.muestra2
Izquierda: 47%;

La propiedad izquierda de la clase Sample2 se proporciona en porcentaje. Para la clase Sample3, establecemos la dirección automática, lo que significa que se muestra de acuerdo con el número de sus giros en el código HTML.

.Muestra3
Izquierda: Auto;

La clase Sample4 contiene el borde rosa y la propiedad izquierda se establece como inicial.

.muestra4
Izquierda: inicial;

Para el último div, tomamos el valor de la izquierda como heredado. Todos estos efectos son comprensibles cuando ejecutamos el código.

.muestra5
Izquierda: heredar;

Cada div tiene un color diferente y un tamaño diferente. Ahora, guarde el código con la extensión HTML. Ejecutar el archivo en el navegador para ver los resultados.

Verá que los cinco divs se muestran en diferentes lugares. Los contenedores de la propiedad inicial y de la izquierda se derrumbaron porque tienen las mismas dimensiones.

Ejemplo 2:

Considere la imagen anterior creada mediante el uso de dos etiquetas DIV y declarando los nombres de clase como lo hicimos en el ejemplo anterior. Consideraremos solo las etiquetas CSS. El Purple Div contiene la posición como absoluta. La propiedad de tamaño que contiene el ancho y la altura también se aplica a ella.

La propiedad izquierda se da en píxeles.

.Dem-Purple
Posición: Absoluto;
Izquierda: 4px;

El segundo Div verde se muestra dentro del Div Purple Outer. Esto se debe a la propiedad de posición que se toma como pariente, por lo que este div se muestra de acuerdo con el circuito de circuitos o el Div exterior.

.Dem-Lightgreen
Posición: relativo;
Izquierda: 8px;

El desplazamiento del Div interno está de acuerdo con el Div exterior.

Conclusión

En la propiedad de CSS Left, nuestro objetivo fue describir el funcionamiento de esta característica direccional en el contenido HTML. Hay dos propiedades básicas en CSS que están vinculadas entre sí para la alineación de cualquier contenido HTML: la posición y la propiedad izquierda. La propiedad de posición puede ser absoluta, relativa o estática. Mientras que la propiedad izquierda puede ser automática, heredada o valor inicial, ya sea en píxeles o porcentaje. En este artículo, explicamos el uso de todos estos efectos por separado aplicándolos al DIV y usando el efecto relativo usando un DIV dentro del otro.