CSS forlot eiendom

Et CSS -språk har flere effekter som skal brukes som en kode på HTML -innholdet som er erklært å danne en webside. Et HTML -språk skaper objekter og CSS -design og gir dem stil ved å bruke flere effekter og verdier. En av egenskapene til CSS er justeringen og retningen til HTML -innholdet. I denne artikkelen vil vi snakke om en av egenskapene som ofte brukes til å justere HTML -objektene.

Venstre eiendom

CSS tilbyr justering av HTML -innhold i hver retning. En av dem er venstre eiendom. Navnet indikerer at det refererer til venstre retning, og denne retningen er knyttet til den horisontale justeringen. Hvis et HTML -objekt ikke får noen eiendom av posisjon, blir ikke denne eiendommen brukt på det objektet. Med andre ord, denne egenskapen er ikke for objekter som ikke er posisjonert.

Syntaks
Den grunnleggende syntaks for venstre egenskap kan være:
Venstre: Lengde | Prosentandel | Auto | Initial | Arve;

Verdien kan være av fem typer. Vi vil forklare hver type av venstre eiendomsverdi:

• Lengde: Denne variabelen inneholder verdien av CSS Left -egenskapen til ethvert innhold. Verdien kan være et positivt eller negativt tall.
• Prosent: HTML -objektets breddeegenskap.
• Auto: Denne CSS -egenskapen brukes til å sette verdien av denne egenskapen til standard en.
• Opprinnelig: Denne verdien gjør venstre egenskap til sin opprinnelige verdi som standard eller innledningsvis når objektet ble erklært før noen transformasjon ble brukt på den.
• Arve: arve refererer til arven. Verdien av en venstre eiendom er satt fra foreldrene til HTML -objektet.

Nå bruker vi et utdrag av former som flyter tilfeldig på websiden. Alle disse blokkene er div, en beholder opprettet i HTML -kroppen. Hver blokk er i sin retning, noen overlapper hverandre. Mens noen blokker vises uavhengig. Hver av dem er plassert av denne venstre eiendom gjennom CSS ved å bruke enten de relative eller absolutte verdiene. Vi vil diskutere opprettelsen av denne slags former på websider.

Arbeid av CSS Left Property

Noen grunnleggende terminologier som er avgjørende for implementering av venstre eiendom, er beskrevet som følger:

• Venstre eiendom på relativ stilling
  Denne egenskapen brukes på venstre side eller venstre kant av innholdet, og det er derfor den beveger seg til høyre side av sin opprinnelige form. Hvis denne verdien tas i en positiv verdi, flyttes HTML -boksen eller en hvilken som helst form til høyre. Den relative plasseringen av ethvert HTML -objekt er retningen som avhenger av de andre elementene i omgivelsene.
• Venstre eiendom på absolutt posisjon
  For de elementene som har den absolutte verdien for posisjoneringen, flytter denne egenskapen venstre side av elementet til kroppens høyre side. Elementet forskyves fra startposisjonen. Den absolutte verdien er elementets verdi i henhold til bakgrunnen.
• Statisk eiendom
  Denne egenskapen påvirker ikke objektet. Enten vi bruker det på elementet eller ikke, forblir HTML -objektet intakt.

Eksempel 1:
Først må du vurdere kroppsdelen som inneholder HTML -innholdet. Bakgrunnsfargen endres for å forbedre fargene på divene som vi opprettet. En overordnet div -klasse er opprettet og ytterligere to diver er også erklært inne i Parent Div, og danner to barnedømmer. Lukk overordnede Div. Legg til to div.

Hver 5 div er nevnt med CSS -klassene. Disse klassene er erklært inne i hodeseksjonen i HTML -koden.

< div class = :sample1" >lengde

Etter kroppskoden vil vi komme over hodeseksjonen i koden. For det første er skriftfargen på kroppen satt til bred for å gjøre den lett synlig på den svarte bakgrunnen.

Nå snakker vi om den interne CSS som vi brukte her. Hver klasse forklares her for å legge til effekter på DIV. Disse klassene gjelder mer enn enkelteffekter på Div samlet om gangen, og derfor er den interne CSS å foretrekke enn Inline CSS. De fem egenskapene som blir lagt til hver klasse er posisjonstypen, venstre retning og størrelsen på div som påføres som inneholder bredde og høyde i piksler. En grense brukes på divto gjør det til en form. Alle disse klassene har de samme egenskapene, men alle har forskjellige verdier.

.prøve1
Posisjon: Absolutt;
Venstre: 109px;
Bredde: 200px;
Høyde: 100px;
Grense: 5px solid oransje;

Snakker om denne eksemplet1 -klassen, blir stillingen tatt som absolutt. Dette brukes for hver klasse, noe som betyr at hver div blir erklært ved å følge verdiene og ikke avhengig av den andre diven som er erklært i omgivelsene. Venstre eiendom brukes i piksler.

Eksempel2- og Sample3 -klassene brukes med røde og grønne farger.

.prøve2
Venstre: 47%;

Venstre egenskap til Sample2 -klassen er gitt i prosent. For Sample3 -klassen setter vi automatisk retning, noe som betyr at den vises i henhold til antall svinger i HTML -koden.

.Prøve3
Venstre: Auto;

Sample4 -klassen inneholder den rosa grensen og den venstre eiendommen er satt som innledende.

.prøve4
Venstre: Initial;

For siste div tar vi venstre verdi som arve. Alle disse effektene er forståelige når vi utfører koden.

.prøve5
Venstre: arve;

Hver div har en annen farge og annen størrelse. Lagre koden med HTML -utvidelsen. Utfør filen i nettleseren for å se resultatene.

Du vil se at alle fem divene vises på forskjellige steder. Containerne i initialen og arven venstre eiendom kollapset fordi de har de samme dimensjonene.

Eksempel 2:

Tenk på det forrige bildet som er opprettet ved å bruke to DIV -tagger og erklære klassenavnene som vi gjorde i forrige eksempel. Vi vil bare vurdere CSS -kodene. Purple Div inneholder posisjonen som absolutt. Størrelsesegenskapen som inneholder bredde og høyde påføres også den.

Venstre eiendom er gitt i piksler.

.dem-pilla
Posisjon: Absolutt;
Venstre: 4px;

Den andre grønne div vises inne i den ytre lilla div. Dette er på grunn av posisjonsegenskapen som blir tatt som relativ, så denne div vises i henhold til omgivelsene eller den ytre diven.

.Dem-lightgreen
Posisjon: relativ;
Venstre: 8px;

Forskyvningen av den indre div er i henhold til den ytre diven.

Konklusjon

I CSS venstre eiendom hadde vi som mål å beskrive arbeidet med denne retningsfunksjonen på HTML -innholdet. Det er to grunnleggende egenskaper i CSS som er knyttet til hverandre for justering av ethvert HTML -innhold: posisjonen og venstre eiendom. Posisjonsegenskapen kan være absolutt, relativ eller statisk. Mens venstre eiendom kan være auto, arve eller startverdi, enten i piksler eller prosentandel. I denne artikkelen forklarte vi bruken av alle disse effektene separat ved å anvende dem på div og bruke den relative effekten ved å bruke den ene div i den andre.