CSS -liste innrykk

Et kaskaderende stilark er et språk som brukes til å forbedre det nåværende innholdet som er opprettet gjennom HTML -språket. Begge språkene fungerer sammen for å danne en webside. HTML er opptatt av å lage og CSS design alle elementene i HTML. HTML har mange innhold som hjelper til med å lage en webside. I dem alle er teksten det grunnleggende innholdet som brukes av hver webside for å vise all form for informasjon. Et av innholdet som brukes til å vise tekst er lister. I denne artikkelen vil vi snakke om lister som har tekst-indent egenskap og hvordan denne egenskapen fungerer på listen.

CSS -lister:

Den vertikale demonstrasjonen av HTML -data enten i en bestilt eller uordnet form er representert gjennom et spesielt HTML -innhold kjent som lister. Innholdet skrevet inne på listen er nevnt med kulene. Etter hvert er lister delt inn i to hovedtyper: en bestilt og en uordnet liste. Hvis vi ønsker å gi nummerering til dataene, er det en bestilt liste

. Dataene med alle typer kule uten tall er en uordnet liste
. Disse to
og
er bare ansvarlig for å vise typen liste. Den enkle syntaksen som brukes til å lage en liste:


• data



Det er et utdrag av en webside som har en uordnet liste. Du kan se at alle dataene er representert og danner en liten liste med kuler som viser at det er en uordnet liste.

CSS Indent eiendom og liste:

Dette er eiendommen som brukes på HTML -innholdet, hovedsakelig på tekst. Den brukes til å fortrenge teksten fra det opprinnelige punktet til et bestemt sted. Denne egenskapen brukes til å søke brukerens oppmerksomhet på spesifikt innhold. Du har kanskje sett noen nettsteder med avsnitt med start fra en avstand sammenlignet med overskriften, noe som gjør det mer fremtredende foran betrakteren. Syntaksen pleide å bruke denne egenskapen er enkel. Vi legger bare til en lengdeparameter til denne egenskapen enten i piksler eller med prosentvise enheter.

Tekst-indent: lengde;

Eksempel 1:
Dette eksemplet omhandler å vise en liste over elementer som genereres som en normal liste, og også en andre liste som inneholder elementer som er fortrengt fra deres opprinnelige posisjon. La oss se HTML -kroppskoden for å opprette en liste.
En overskrift legges til på websiden ved å bruke

overskriftskode. Deretter brukte vi en bestilt liste.



1. punkt


2. punkt



Denne bestilte listen vil opprette standard nummereringssifre med elementene i listekoder. En annen overskrift blir erklært etterfulgt av en bestilt liste igjen. En klasse av CSS er erklært inne i sekundet

.

Dette er bare navnet på CSS -klassen, det er erklært i hodeseksjonen i HTML -koden. Hver gang dette klassenavnet brukes i en hvilken som helst tag, blir alle filtrene eller effektene som er nevnt i denne klassen i stiluttalelsen, brukt.

Inne i hodet blir en tittel gitt til siden. En stilkode brukes til å bruke effektene. Denne typen styling er kjent som intern CSS.

En klasse tilpasset er erklært. Inne i klassebeskrivelsen har vi ikke brukt den tekst-indent egenskapen direkte. Faktisk kan vi innrykk listeelementene ved å bruke polstringseiendommen i enhver dimensjon. Så når vi vil at listen skal vises med innholdet i høyre retning, vil vi bruke padding-venstre egenskap for å innrykk teksten fra venstre posisjon mot høyre retning.

Padding -egenskapen er avstanden til HTML -innholdet fra den spesifiserte grensen til enten det ytre innholdet eller HTML -siden.

Lukk alle taggene på hodet. Lagre filen med HTML -utvidelsen for å opprette en webside i nettleseren når denne filen åpnes med en nettleser. Og når vi åpner den i tekstredigereren, vil den bare vise koden.

Du vil se at en enkel liste vises uten noen inntrykkseffekt fordi vi ikke har brukt CSS -klassenavnet på den. Men den andre listen med et tilpasset innrykk blir dratt mot riktig stilling. Dette er på grunn av polstringseiendommen.

Eksempel 2:
I dette eksemplet bruker vi det samme eksemplet, men med forskjellige CSS -egenskaper for å innrykk teksten på listen. Inne i stilmerket har CSS -klassen en marginegenskap. Denne margen er avstanden til innholdet fra grensen til siden. I dette tilfellet har vi HTML -tekst, så teksten på listen vil bli flyttet i henhold til verdien.

.tilpasset
Margin -venstre: -15px;

I dette eksemplet ønsker vi at listen skal være med venstre margin. Så vi tok marginverdien mot venstre side. Verdien er tatt i et negativt tegn for å gå bakover. Hvis avstanden er tatt med et positivt tegn, vil listen være på høyre side av siden.

Denne stilen brukes igjen på den andre listen vi opprettet med en tilpasset indeksklasse.

Nå vil vi utføre nettsiden for å se resultatet. Du vil se at den bestilte listen sitter fast på venstre side av siden.

Eksempel 3:
Dette eksemplet omhandler bruk av en uordnet liste på websiden. Inne i listen har vi tatt 4 rader med varer. I dette eksemplet vil vi ikke bruke CSS -styling gjennom en klasse. Vi vil ikke bruke innrykket tekstegenskap på hele listen. Enkeltlinjen på listen vil bli utført gjennom den tekst-indent egenskapen. Dette vil bli gjort ved å bruke en annen CSS-egenskap som er en "første-av-type" -egenskap.

Denne egenskapen tar for seg å velge den aller første forekomsten av et element i alt det samme HTML -innholdet. For eksempel vil denne egenskapen bare påvirke den første raden på linjen, uten å nevne navnet på noen liste eller klassen inne i taggen.

Mens vi skriver stiluttalelsen i hodeseksjonen av koden, vil vi bruke

1. Som vi ønsker å bruke effekten på Li.
   Li: First-of-type
   Tekst-indent: 50px;
   List-stil-type: Star;
   

   Det første elementet blir flyttet mot høyre med en spesifisert avstand nevnt ovenfor. Og vi har også gitt et nummer til det elementet for diskriminering.

   Ved utførelsen vil du observere at den første elementet på listen er forskjøvet i riktig retning, og at kulen også blir referert til som et desimaltall.

   Konklusjon

   Denne artikkelen tar sikte på å beskrive formålet og bruken av innrykkegenskapen i listen over HTML -innhold. Vi starter med en kort forklaring av listene og deres typer. Innrykkegenskapen kan brukes på noen av listetypene. Etter det har vi brukt tre grunnleggende eksempler inkludert polstringseffekten, marginen og tekstinntekten påvirker egenskapen ved å bruke den første av CSS-egenskapen. Alle disse eksemplene viser innrykk av hele listen og en enkelt rad på listen også.