CSS-padding-venstre eiendom

Hvis du noen gang har vært student i en nettprogrammering, må du ha prøvd HTML- og CSS -kodene. HTML er hypertekstmarkeringsspråket som brukes til å gi det statiske utseendet til websidene. Mens CSS står for Cascading Style Sheet for å gi det estetiske utseendet og følelsen til websiden. CSS -formateringen lar deg legge til et annet utseende og følelse på websiden, jeg.e. Legge til poster, polstring av venstre eller høyre egenskaper, legge til bakgrunnsfargen, dele siden i seksjoner og mange flere. Innenfor denne opplæringen vil vi diskutere om bruken av CSS-padding-venstre-alternativet i CSS-stilkoden, i.e. Sannsynligvis å flytte data til venstre.

Eksempel #01:

La oss starte med det første eksemplet på å bruke padding-venstre-egenskapen i CSS av en HTML-fil. For dette må du opprette en ny Notisblokkfil “Padding-Left” med “.HTML ”utvidelse på slutten. Denne filen kan brukes i notisblokken eller i et hvilket som helst språkverktøy som Visual Studio Code, som det vi gjorde i følgende bilde. Vi starter denne HTML -kodefilen med HTML Standard -taggen "", etterfulgt av Head -taggen.

Hodemerket kan også inneholde tittelkoden. Foreløpig unngår vi bruken av tittelkoden. Innenfor hodemerket bruker vi stilkoden for å bruke CSS -stylingen i HTML -filen. Kroppskoden følger hodemerkene fra og med overskrift 1 til overskrift 6. Innenfor åpningen av overskriftene bruker vi klassen “PG” som identifikator for å bruke stilkoden. Innenfor stilmerket bruker vi klasseobjektet "PG" for hver på vei til styling. Innenfor de krøllete parentesene bruker vi padding-venstre-egenskapen til CSS og setter den til 100 piksler igjen fra linjens start. Dette betyr at overskriftene våre er plassert til 100 piksler langt fra linjens start i stedet for å bli plassert ved linjens start. Stil- og hodemerket er fullført her.

Etter å ha lagret den forrige HTML -koden, begynner vi å feilsøke den. Ettersom denne filen inneholder ".HTML ”utvidelse, den åpnes direkte i standard nettleseren du valgte på første kjøring. Følgende utgang vises på nettlesersiden som inneholder totalt 6 overskrifter plassert i avstanden 100 piksler fra venstre ved starten av hver linje. Hvis vi fjerner venstre polstring fra stilmerket, starter overskriftene fra starten av en linje.

Eksempel #02:

La oss komme tilbake til HTML -koden og oppdatere den litt som vist på følgende. Vi legger til en enkelt overskrift “H1” i kroppen etter “Div” -merker. "Div" -merker brukes til å dele siden i seksjoner. Den første "div" -merket blir instantiert med "id = div" og den indre "div" -merket i den inneholder "greydiv" -klassen for å skille den. Denne "div" -merket inneholder en enkel setning som sier at denne "div" -delen er plassert til 500 piksler fra venstre. Nå, innenfor stilmerket til "Head" -merket, setter vi bakgrunnsfargede eiendommer "rosa" for websiden og plasserer overskriften 1 på avstanden på 500 piksler fra utgangspunktet ved å bruke alternativet Padding-Left. Etter det legger vi til høyden og bakgrunnsfargen for den første delen "Div" av hele siden. Den indre "Div" -delen som brukes av "Greydiv" -klassen brukes til å stille inn "900" -bredden for denne indre Div-delen med bakgrunnsfargegenskapen som er satt til "LightGrey" og Padding-Left-alternativet satt til 500 piksler.

Dette betyr at den indre DIV -seksjonen "tekst" -verdien er plassert til 500 piksler fra venstre side av siden. CSS -stylingen gjøres her, og denne koden er klar til bruk. La oss lagre denne koden ved å bruke CTRL+S og kjøre denne koden ved å bruke "Kjør" -knappen på oppgavelinjen til Visual Studio -koden. Koden utføres og nettleseren åpnes for å vise resultatet for denne HTML -koden.

Chrome -siden viser utdata for denne HTML -koden som vist i følgende bilde. Den viser at sidens farge er satt til rosa og den første "div" -delen er lagt til etter overskriften 1, i.e. Hvit fargeseksjon. Innenfor den første "div" -delen genereres en annen "div" -seksjon, i.e. Grå fargeseksjon. Det kan sees at overskriften 1 og dataene innenfor den indre delingsdelen er plassert 500 piksler bort fra venstre side av siden.

Eksempel #03:

Vi har sett bruken av "piksler" som en enhet for å angi verdien for et alternativ for "padding-venstre" i HTML-koden. Annet enn "PX", kan vi også prøve å bruke prosentvis karakter "%" for å stille inn alternativet for polstring-venstre i CSS for HTML-koden. Dermed la vi til en overskrift "H1" med tittelen "Navn" og opprettet en uordnet liste over totalt 5 elementer på vår webside ved å bruke "UL" -taggen for "Uordnede liste" og "Li" -merket for å sette inn hver post -post på listen.

"Tittel" -klassen er spesifisert for overskrift 1 og "Verdier" -klassen er definert for den uordnede listen. Innenfor "stil" -merket setter vi venstre polstringsverdi for H1 og den uordnede listen til 20% ved å bruke klassenavnene som er definert i taggene. Lagre koden din for å se resultatene.

Etter å ha kjørt denne koden i Visual Studio -koden, lanseres Chrome -nettleseren og følgende utdata vises. "Navn" -overskriften sammen med den uordnede listen over 5 verdier som den inneholder vises som forventet, noe som er 10 prosent unna venstre side. Slik kan alternativet for padding-venstre.

Innenfor de forrige eksemplene prøvde vi CSS -stilkoden innenfor samme fil, men i hodet av filen. Nå bruker vi CSS Styling Inline for følgende HTML -kode. Så innenfor hodemerket bruker vi bare "tittelen" -koden for å legge til tittelen for denne HTML -filen, i.e. Venstre polstring. Innenfor denne filen bruker vi den samme H1 -overskriften og den uordnede listen. Vi styler overskriften 1 og den uordnede listen inline ved å stille inn verdiene for alternativet Polsting-venstre til 12%. Vi setter også grensen til overskriften 1 med fargen, blå fiolett. La oss lagre koden og kjøre den ved å bruke "Kjør" -knappen til VS -koden.

Det gir grensen til overskriften 1 - “Navn”. Også overskriften og den uordnede listen vises 12% unna venstre på siden.

Konklusjon

Innledende avsnitt i denne artikkelen utdyper bruken av CSS i HTML og viser dem måtene å bruke alternativet for padding-venstre i det. Vi diskuterte de enkle, men elegante kodene til HTML i Visual Studio-koden for å vise bruken av alternativet Padding-Left. Vi prøvde også dette alternativet med "PX" og "%" -tegnene i stildelen separat for å se hvordan utdataene endres. For dette prøvde vi å bruke inline og skissere CSS -styling for HTML -kodene.