CSS -tekstinnrykk

Innrykk er definert som den ekstra plassen i starten av linjen. I CSS er tekst-indenten definert som den ekstra plassen i starten av den første linjen. Vi bruker egenskapen "tekst-indent" for å anvende innrykk på avsnittets første linje. Vi setter verdien i "PX", "EM" eller også i "%". Vi setter også en negativ verdi for denne egenskapen. Når vi bruker denne "tekstinnsikt" egenskapen til CSS, vil den første linjen i blokken eller avsnittet skape litt plass i starten av linjen. Det vil bare sette litt plass i starten av den første linjen og påvirker ikke andre linjer i avsnittet eller blokken. Det skaper ikke plass på de andre linjene bortsett fra den første linjen. I denne opplæringen vil vi bruke denne "tekst-indent" egenskapen og sette de negative og positive verdiene for innrykk.

Eksempel 1: For å bruke denne "tekst-indent" egenskapen i CSS, må vi ha s

ome -data eller avsnitt. For dette må vi først HTML -filen først. I denne opplæringen er programvaren vi bruker den visuelle studiokoden. Yocreate u kan bruke hvilken som helst tekstredigerer eller notisblokk for dette. Når vi bruker denne programvaren, må vi velge språket vi skal skrive koden. Her velger vi “HTML” som språket.

Etter dette skal vi begynne å kode i denne filen. Vi legger også “!”Og ved å trykke på“ Enter ”får vi de grunnleggende kodene til HTML som vi trenger i alle HTML -koder. I kroppen skal vi lage noen "div" -klasser med forskjellige navn. Inne i hver div har vi opprettet et avsnitt ved hjelp av “

" stikkord. Vi lager tre div med forskjellige navn som "A", "B" og "C". Inne i disse divene har vi et avsnitt. Så på denne måten har vi laget tre avsnitt her. Vi vil bruke disse tre avsnittene i alle eksemplene i denne opplæringen. Nå vil vi gå til CSS-filen der vi bruker egenskapen "tekst-indent" og vil anvende innrykk på alle disse avsnittene. Vi koblet også CSS -filen med denne HTML -filen i "Head" -koden til HTML -koden.

Vi bruker "Div" -navnet "A" og bruker deretter "tekst-indent" egenskapen. Så det vil skape en innrykk på den første linjen i Div “A” avsnitt. Den første linjen i dette avsnittet skaper et rom i starten av avsnittslinjen. Vi bruker verdiene i “PX” i denne koden. Vi setter "80px" -verdien for første Div -avsnittet. Så det vil skape “80px” ledig plass på første linje og administrere teksten deretter. Deretter kommer vi til å innrykke Second Div -avsnittet og bruke “B” med “Div”. Deretter skal vi bruke den negative verdien i egenskapen "tekst-indent". For andre ledd bruker vi den negative innrykk for å sette teksten til venstre side.

Etter dette skal vi bruke det siste avsnittet og også bruke egenskapen "tekst-indent" for dette. Vi satte “30px” for tredje ledd i Div. Så, teksten til den første linjen i avsnittet flytter til "30px" til høyre side og skaper et "30px" -rom ved starten av den første linjen. Etter å ha fullført denne koden, lagre den med “.CSS ”File Extension og også med navnet vi har brukt i koblingskoden til“ HTML ”. Kontroller deretter utdataene.

I dette skjermbildet kan du se at første ledd skaper litt plass ved starten av første linje. Her skaper det et "80px" -område som vi har brukt "80px" som verdien av "tekst-indent" egenskap. Se nå på andre avsnitt, noen tekster forsvinner fra skjermen når den beveger seg til venstre på grunn av egenskapen "tekst-indent". Det innrykk dette avsnittet “-70px”, og dette gjelder bare den første linjen i avsnittet. Deretter kommer det siste avsnittet der vi bruker "30px" -verdien til denne egenskapen. I dette avsnittet skaper det plass til "30px" i første linje.

Eksempel 2:

Vi setter overskriften "Font-Family" til "Algerie" og også i "Center" -justering. Vi setter den "fargen" til "maroon". Deretter har vi overskrift 2. For denne overskriften bruker vi "Times New Roman" som "font-family" og "lilla" som "fargen" på fonten. Nå skal vi bruke den "tekst-align" -egenskapen for alle DIV-er separat. Først har vi “div.A ”og vi setter“ tekst-indent ”egenskapsverdiene i“ EM ”. Her er “10EM” satt til First Div-avsnittet, og for den andre diven bruker vi en negativ verdi som “-5em”. Og for den siste diven setter vi den "tekst-indent" verdien til "2em".

Den første linjen i første ledd er innrykket "10M" til høyre side, noe som betyr at det skaper et "10M" -rom i første linje i første ledd. Deretter bruker det en negativ verdi for andre ledd og flytter den første linjen i andre ledd på venstre side. Så noe tekst vises ikke her. Og på den første linjen i tredje avsnitt bruker vi “2em” tekstinnrykk, så det skaper et “2em” -rom eller innrykk i den første linjen.

Eksempel nr. 3:

Vi kommer til å style overskriften her, med "font-family" satt til "Algerie" og samsvare med "senteret". Fargen er her justert til "oransje". Deretter er det overskrift 2, som er satt til “Calibri” som “Font-Family” og “Green” som fontens “Color.”Nå bruker vi den" tekst-align "egenskapen for hver div hver for seg. Først har vi “Div.A, ”og vi bruker prosentandelen“%”for å angi“ tekst-indent ”egenskapsverdier. For det første Div-avsnittet bruker vi en positiv verdi på "20%", og for den andre diven bruker vi en negativ verdi på "-10%". Den "tekst-indent" verdien for den endelige div ble satt til "40%"

Første avsnitts første linje gjelder en "20%" -innrykk som innebærer at den produserer en "20%" -innrykk i første avsnitts første linje. Andre ledd får deretter en negativ verdi, og den første linjen i andre ledd blir flyttet til venstre side som forhindrer at litt tekst vises. Den første linjen i andre avsnitt flytter "10%" til venstre. Vi bruker også "40%" tekstinnrykk på den første linjen i tredje ledd, noe som resulterer i et "10%" -område eller innrykk på den første linjen.

Eksempel 4:

Sett fontfamilien til “Algerie” og “Center” i denne overskriften. Fargen endres til "rød" i dette tilfellet. Da har vi også overskrift 2, som har "calibri" som "font-familie" og "blå" som "fargen" på overskriften. Nå bruker vi "tekst-align" attributtet for hver div separat. Først bruker vi “div. A, ”og vi setter" tekst-indent "egenskapsverdier med piksel til" 50px ". For andre avsnitt setter vi verdien av "tekstindent" i "em" og også negativ. Vi bruker “-3em” for Second Div-avsnittet. For det siste Div -avsnittet setter vi verdien i “%”. Vi setter "30%" for siste avsnitt. I denne koden bruker vi “PX”, “EM” og også “%”.

I første avsnitt bruker vi “50px” i skjermbildet. Det justerer innrykk “50px”. I andre ledd setter vi den negative verdien i “EM” som er “-3em”. Den første linjen er innrykket til venstre side. For det siste avsnittet setter vi verdien i “%” som er “30%”, og du kan se at det innrykk den første linjen i tredje ledd til høyre side.

Konklusjon:

Vi har opprettet denne opplæringen for å utdype "tekstindens" i CSS. Her har vi diskutert hva som er tekst-indent og hvordan du kan angi innrykk i CSS, og hvilken egenskap til CSS vi har brukt til å innrykk for teksten. Som vi har diskutert i denne opplæringen, brukes den "tekst-indent" egenskapen til å anvende innrykk på teksten vår, og vi har brukt negative så vel som positive verdier her i våre eksempler. Denne egenskapen har bare innrykket avsnittets første linje.