CSS -innrykk

“CSS -innrykk er egenskapen til CSS som brukes i DIV -blokken eller en hvilken som helst container for å vise innrykk av den første linjen i teksten. Når CSS -innrykk ikke er nevnt med noen linje, er det som standard for den første linjen i teksten. Det tar verdiene med positive og negative tegn også.

Denne innrykkegenskapen kan brukes på hvilket som helst HTML -innhold, men i denne artikkelen har vi brukt tekst for å innrykk teksten i første linje i avsnittet.”

Jobber med CSS Indent Text Property

Det brukes til å vise antall tomme mellomrom som diskriminerer mellom avsnittene fra venstre eller høyre marginer av det ytre innholdet som for det meste er DIV. Innrykksegenskapen til CSS gjør teksten enkel for programmene å bli lest og forståelig ved å holde teksten på en spesifisert lengde. Dette gir en fengende effekt for teksten for brukeren.

Den grunnleggende syntaksen som brukes til den tekst-indent egenskapen er:

Tekst-indent: lengde;

Eksempel 1

I dette eksemplet vil vi opprette en webside ved hjelp av bare HTML -tekstinnhold i form av overskrifter eller avsnitt. Så først, inne i kroppsseksjonen, bruk overskriften

Tag for å introdusere en overskrift. Etter en pause
, Igjen brukes en overskrift. Break -taggen lager en tom linje og hopper til neste linje for å lage nytt innhold. Etter å ha erklært overskriftene, opprettes en div. En div er en viktig HTML -beholder, da den er en beholder som holder HTML -innholdet på det spesifiserte stedet. Uansett hvilke elementer vi bruker i Div kreves med en bestemt størrelse for å holde alle elementene i den størrelsen henholdsvis. I dette tilfellet har vi nevnt navnet på klassen, som vil bli erklært i hoveddelen av HTML -koden. Alle CSS -stilegenskaper er skrevet i den nevnte klassen som vil bli brukt på DIV og innholdet inne i den.

Inne i diven vil vi ganske enkelt bruke teksten. Enkelt tekstinnhold kan brukes med eller uten avsnittsmerker.

Etter at Div -taggen er lukket, brukes et overskriftsnavn igjen i

. En div vil bli erklært igjen med det nye klassenavnet som vil inneholde CSS for denne klassen separat. Lukk alle taggene og HTML -kroppen også. Tenk nå på CSS -kodene som er erklært i hodedelen, noe som gjør det til en intern CSS. I CSS er to klasser erklært separat; Den første klassen inneholder en tekstinnrykk på 50px med en div bredde på 650px lengde, dette vil holde teksten i denne lengden på div, og den første linjen i teksten vil bli påvirket av denne verdien av innrykk.

.myText
Tekst-indent: 50px;

Tilsvarende, for den andre klassen som er erklært for den andre div, er en tekstindent brukt på teksten i negativ verdi. En lignende bredde lengde påføres også på div.

Lagre nå koden med HTML -utvidelsen for å gjøre den åpen både som en HTML -kode i redaktøren og som en webside i nettleseren.

Du vil se at den første diven som har tekstinnlysningen til 50px har den første linjen i teksten som har flyttet 50px-innlevering fra venstre begynnelsespunkt. Mens den andre diven har 10M, vil teksten bevege seg mot venstre side innrykket av den spesifiserte verdien, noe som gjør at ordene til den første linjen blir skjult.

Eksempel 2

Enheten som brukes til innrykk er ikke alltid i piksler; Det kan også brukes i prosenter. I dette eksemplet er HTML -kroppskoden nesten den samme; Bare overskriftsnavnet er annerledes når de spesifiserer de nye verdiene i prosent. De samme to klassene for CSS vil også bli brukt i koden.

Når du beveger oss mot CSS -hodedelen, har stilkoden klassen til å inneholde en innrykk på 20 prosent verdi og bredde, som vi har gitt i det første eksemplet.

.myText
Tekst-indent: 20%;

Tilsvarende er det erklært andre klasse MyText1 å bruke en stil på den andre div, dette vil ha samme bredde, men innrykket for teksten er 40%. Denne økningen i tekst-indent vil føre til at den første linjen i teksten beveger seg i riktig retning med en endring.

Du kan se at når vi utfører HTML -filen i nettleseren, vil en webside bli dannet med to tekstparagraf. Den første starter nær venstre, mens andre ledd starter fra sentrum av Div.

Eksempel 3

Det tredje og det siste eksemplet handler om den hengende tekst-indent. I dette eksemplet blir den første setningen flyttet i en bakover retning, mens resten av avsnittet fremdeles er i sin posisjon; Forskyvningen er stort sett i en negativ verdi i dette tilfellet for å flytte den første tekstdelen i venstre retning. Tatt i betraktning HTML -kroppen, er det en enkelt overskrift og en div som inneholder teksten. DIV -beholderen har en klasse for å style teksten inni den ved å bruke intern CSS.

< div class = mytext >

Inne i stilkoden i HTML -hodet er klassen som er erklært i DIV -taggen erklært med spesifikasjoner. Den har en tekstinnlysning på -28px. Dette betyr at den første linjen vil starte med en innrykk av en negativ 28. verdi, og flytte teksten til venstre side. Ettersom den negative tekst-indent verdien får teksten til å bevege seg mot den negative siden, har vi forklart den i det første eksemplet, men i motsetning til det eksemplet, der den bevegelige delen av den første linjen ikke var synlig, her dukket hele den første setningen opp i inne Div.

.myText
Tekst -indent: -28px;
Padding-venstre: 28px;

I motsetning til tekstindenten, som det tas i en negativ verdi, blir verdien av padding-venstre tatt positivt fordi hele avsnittet vil passe inni denne divstørrelsen; Dette vil gjøre teksten til den første linjen mer fremtredende mot venstre retning.

Resten av HTML -kroppskoden er den samme, og har en overskrift og en div med en klasse.

Etter å ha lagret koden, kjør den i nettleseren. Du vil se at den første raden i teksten er mot venstre retning, og resten av avsnittet fra den andre linjen er mot høyre.

Konklusjon

Artikkelen forklarer arbeid og bruk av Indent CSS -egenskapen til tekst på websider. Hver gang vi er villige til å beskrive noe gjennom en tekst på nettstedet, enten det handler om nettstedet eller annen informasjon, bruker vi denne innrykkegenskapen for å fortrenge førstelinjeteksten i litt høyre eller venstre retning. I denne artikkelen har vi brukt forskjellige eksempler som forklarer arbeidet med denne innrykkegenskapen i tekstegenskapen til en webside, dannet ved å bruke HTML og CSS sammen.