CSS ha lasciato la proprietà

Una lingua CSS ha diversi effetti da applicare come codice sul contenuto HTML che viene dichiarato per formare una pagina Web. Un linguaggio HTML crea il design di oggetti e CSS e aggiunge loro stile applicando diversi effetti e valori. Una delle proprietà del CSS è l'allineamento e la direzione del contenuto HTML. In questo articolo, parleremo di una delle proprietà comunemente usate per allineare gli oggetti HTML.

Proprietà a sinistra

CSS offre l'allineamento del contenuto HTML in ciascuna direzione. Uno di questi è la proprietà di sinistra. Il nome indica che si riferisce alla direzione sinistra e questa direzione è collegata all'allineamento orizzontale. Se a un oggetto HTML non viene assegnata alcuna proprietà di posizione, questa proprietà a sinistra non viene applicata a tale oggetto. In altre parole, questa proprietà non è per gli oggetti non posizionati.

Sintassi
La sintassi di base della proprietà sinistra può essere:
A sinistra: lunghezza | percentuale | auto | iniziale | eredità;

Il valore può essere di cinque tipi. Spiegheremo ogni tipo di valore della proprietà sinistra:

• Lunghezza: questa variabile contiene il valore della proprietà sinistra CSS di qualsiasi contenuto. Il valore può essere un numero positivo o negativo.
• Percentuale: la proprietà di larghezza dell'oggetto HTML è presa nell'unità percentuale.
• Auto: questa proprietà CSS viene utilizzata per impostare il valore di questa proprietà su quello predefinito.
• Inizialmente: questo valore trasforma la proprietà sinistra al suo valore originale per impostazione predefinita o inizialmente quando l'oggetto è stato dichiarato prima che qualsiasi trasformazione fosse applicata ad esso.
• Eredità: l'eredità si riferisce all'eredità. Il valore di una proprietà sinistra è impostato dai genitori dell'oggetto HTML.

Ora usiamo un frammento di forme che fluttuano casualmente sulla pagina web. Tutti questi blocchi sono div, un contenitore creato nel corpo HTML. Ogni blocco è nella sua direzione, alcuni si sovrappongono l'un l'altro. Mentre alcuni blocchi vengono visualizzati in modo indipendente. Ognuno di essi è posizionato da questa proprietà sinistra tramite CSS usando i valori relativi o assoluti. Discuteremo la creazione di questo tipo di forme nelle pagine Web.

Funzionante della proprietà di sinistra CSS

Alcune terminologie di base che sono essenziali per l'implementazione della proprietà sinistra sono descritte come segue:

• Proprietà sinistra in posizione relativa
  Questa proprietà viene applicata sul lato sinistro o sul bordo sinistro del contenuto ed è per questo che si sposta sul lato destro della sua forma originale. Se questo valore viene preso in un valore positivo, la scatola HTML o qualsiasi forma viene spostata a destra. La posizione relativa di qualsiasi oggetto HTML è la direzione che dipende dagli altri elementi circostanti.
• Proprietà sinistra in posizione assoluta
  Per quegli elementi che hanno il valore assoluto per il posizionamento, questa proprietà sposta il lato sinistro dell'elemento sul lato destro del corpo. L'elemento viene spostato dalla sua posizione di partenza. Il valore assoluto è il valore dell'elemento in base allo sfondo.
• Proprietà statica
  Questa proprietà non influisce sull'oggetto. Se lo applichiamo all'elemento o no, l'oggetto HTML rimane intatto.

Esempio 1:
Innanzitutto, considera la sezione del corpo che contiene il contenuto di HTML. Il colore di sfondo viene modificato per migliorare i colori dei div che abbiamo creato. Viene creata una classe Parent Div e anche altri due div vengono dichiarati all'interno del Parent Div, formando due figli di figlio. Chiudi il Parent Div. Aggiungi due div.

Ogni 5 div vengono menzionati con le classi CSS. Queste classi sono dichiarate all'interno della sezione testa del codice HTML.

< div class = :sample1" >lunghezza

Dopo il codice del corpo, incontreremo la sezione testa del codice. Innanzitutto, il colore del carattere del corpo è impostato su largo per renderlo facilmente visualizzabile sullo sfondo nero.

Ora parliamo del CSS interno che abbiamo usato qui. Ogni classe è spiegata qui per aggiungere effetti al div. Queste classi si applicano più di singoli effetti sul Div collettivamente alla volta, quindi il CSS interno è preferibile del CSS in linea. Le cinque proprietà aggiunte a ciascuna classe sono il tipo di posizione, la direzione sinistra e le dimensioni del div che viene applicato che contiene la larghezza e l'altezza nei pixel. Un bordo viene applicato al div per renderlo una forma. Tutte queste classi hanno le stesse proprietà ma tutte hanno valori diversi.

.Sample1
Posizione: assoluto;
A sinistra: 109px;
larghezza: 200px;
Altezza: 100px;
Bordo: 5px Solid Orange;

Parlando di questa classe di campione1, la posizione è presa come assoluta. Questo viene applicato per ogni classe, il che significa che ogni div viene dichiarato seguendo i valori e non a seconda dell'altro div che viene dichiarato nei suoi dintorni. La proprietà sinistra viene applicata in pixel.

Le classi Sample2 e Sample3 sono applicate con colori rossi e verdi.

.Sample2
A sinistra: 47%;

La proprietà sinistra della classe Sample2 è riportata in percentuale. Per la classe Sample3, impostiamo la direzione automatica, il che significa che viene visualizzata in base al numero delle sue curve nel codice HTML.

.Sample3
A sinistra: auto;

La classe Sample4 contiene il bordo rosa e la proprietà sinistra è impostata come iniziale.

.Sample4
A sinistra: iniziale;

Per l'ultimo div, prendiamo il valore sinistro come eredità. Tutti questi effetti sono comprensibili quando eseguiamo il codice.

.Sample5
A sinistra: eredità;

Ogni div ha un colore diverso e dimensioni diverse. Ora, salva il codice con l'estensione HTML. Eseguire il file nel browser per vedere i risultati.

Vedrai che tutti e cinque i div vengono visualizzati in diverse posizioni. I contenitori della proprietà iniziale e ereditaria di sinistra sono crollati perché hanno le stesse dimensioni.

Esempio 2:

Considera l'immagine precedente creata utilizzando due tag DIV e dichiarando i nomi della classe come abbiamo fatto nell'esempio precedente. Considereremo solo i tag CSS. Il div viola contiene la posizione come assoluta. La proprietà dimensionale contenente la larghezza e l'altezza è anche applicata ad essa.

La proprietà sinistra è riportata in pixel.

.Dem-Purple
Posizione: assoluto;
A sinistra: 4px;

Il secondo div verde viene visualizzato all'interno del Div viola esterno. Ciò è dovuto alla proprietà di posizione che viene considerata relativa, quindi questo div viene visualizzato in base all'ambiente circostante o al div esterno.

.Dem-Lightgreen
Posizione: relativo;
A sinistra: 8px;

Lo spostamento del Div interno è secondo il Div esterno.

Conclusione

Nella proprietà a sinistra CSS, abbiamo mirato a descrivere il funzionamento di questa caratteristica direzionale sul contenuto di HTML. Esistono due proprietà di base nei CS che sono collegati tra loro per l'allineamento di qualsiasi contenuto HTML: la posizione e la proprietà sinistra. La proprietà di posizione può essere assoluta, relativa o statica. Mentre la proprietà sinistra può essere automatica, eredità o valore iniziale, in pixel o percentuale. In questo articolo, abbiamo spiegato l'uso di tutti questi effetti separatamente applicandoli al div e usando l'effetto relativo usando un div all'interno dell'altro.