CSS Indent Second Line

Et Cascading Style Sheet er et stykke stilkode som legges til HTML -kodene for å forbedre arbeidet og utseendet til HTML -innholdet. Blant mange effekter av CSS er en av de grunnleggende egenskapene ved styling innholdet å bruke et stilark på teksten, inkludert tekstfarge, familie, størrelse og beliggenhet. En av tekstegenskapene til CSS vil bli forklart i denne artikkelen. Dette er en innrykk eiendom. Innrykk betyr forskyvningen av teksten fra et bestemt punkt til et bestemt sted.

Tekstinntrykk av egenskap

Mens du ser på noen pedagogiske nettsteder, må du ha sett slike avsnitt eller tekstbokser som starter med den første linjen fra et avstand fra et helt avsnitt, noe som gjør det mer fremtredende og tiltalende. Dette gjøres ved å gjøre den første linjen i teksten innrykket. Ikke bare den første linjen, men vi kan også innrykke den andre linjen som holder den første linjen intakt. Denne tekstegenskapen er tatt i enten piksel eller prosenter. Syntaksen for innrykk av tekst er:

Tekst-indent: verdi;

Denne egenskapen kan brukes på hvilket som helst HTML -innhold. Imidlertid vil vi bruke denne egenskapen på teksten. HTML og CSS er begge ryggradsspråkene for front-end utvikling og design av en webside. HTML inneholder to grunnleggende seksjoner: Hode- og kroppsseksjoner. Begge disse delene er beskrevet med taggene:

.. .

Alt HTML -innholdet er beskrevet i kroppsseksjonene. Hoveddelen inneholder tittelen på websiden og CSS hvis det er internt CSS. De grunnleggende HTML -kodene som brukes i denne artikkelen vil bli forklart på implementeringstidspunktet. Når vi snakker om CSS -erklæringen, har vi brukt intern CSS mellom tre CSS -typer. CSS -egenskapene er erklært i stilkoden, som er erklært i hodemerket.

Det er flere tilnærminger til å innrykk den andre linjen i HTML -avsnittet. Noen av de enkle metodene er forklart nedenfor.

Eksempel 1

Først brukte vi et eksempel for å anvende CSS -egenskapen til innrykk på en avsnitttekst av HTML. Som artikkelen om artikkelen viser, må vi innrykk den andre linjen i teksten. I dette eksemplet anvendte vi innrykkegenskapen slik at den første linjen i avsnittet forblir den samme på det punktet der den var før. Imidlertid vil avsnittet fra den andre linjen bli innrykket. La oss starte med eksempelkoden. Først må du vurdere kroppsdelen, der en enkel avsnittsmerke brukes til å bruke innrykket.

En enkel overskrift erklært, som vi ikke vil bruke noen effekt. Paragraf -taggen er erklært inne i Div. Det er en beholder som holder HTML -innholdet på et bestemt punkt. Tilsvarende vil vi her erklære en div. En klasse er også erklært her.

I CSS gjøres designen gjennom IDS eller klassene. Alle effektene vi ønsker å bruke er skrevet i klasseerklæringen i CSS -organet. I hodedelen må vi nevne navnet på det punktet hvor vi ønsker å anvende disse effektene.

Lukk alle taggene og HTML -kroppen også. Når HTML -innholdet er erklært, vises et enkelt avsnitt og en overskrift når du kjører siden på nettstedet. Vi vil bruke følgende CSS -kode for å bruke effekter på dette.

På vei mot stilmerket, blir en div for klassen forklart med funksjonene vi ønsker å bruke på denne beholderen. Tekstindenten til -36px brukes, noe som betyr at den første linjen ikke vil bli innrykket. Imidlertid flyttes den første linjen mot venstre sammenlignet med de gjenværende avsnittslinjene. Dette gjøres ved å erklære divens venstre sidepolstring 36px. Begge verdiene er satt i pikselenheter.

div.A
tekst -indent: -36px;
Padding-Left: 36px;

Padding -egenskapen er for det indre innholdet, som den ytre kontrollerer. Dette er avstanden mellom tekstgrensen og DIV -containergrensen. Lagre koden med HTML -utvidelsen og utfør nettsiden på nettleseren på nettleseren.

Du vil se en enkel overskrift. Et avsnitt har den første linjen intakt, men den andre og alle de andre linjene er forskjøvet mot høyre. Den tekstinnsatte egenskapen til CSS gjør dette.

Eksempel 2

Den tekst-indent egenskapen vil bli brukt på overskriften i dette eksemplet. En enkel overskrift erklært. Etter det brukte vi avsnitts -taggen for å legge til tekst i den. ID i DIV -beholderen vil bli brukt på hele divet nøyaktig på samme måte. Effektene beskrevet i klassen ble brukt.

Inne i hodeseksjonen vil en stilkode inneholde ID -funksjonene. Div får en margin og bredden som skal brukes. IDen er erklært med et hasjskilt med det.

For å bruke effekter på avsnittet spesifikt, må vi nevne “P” med ID. Grensen over avsnittet er gitt med farge og størrelse. Padding-topp-effekten blir brukt. Dette er avstanden mellom avsnittet og overskriften. De to til venstre er tekststørrelsen og vekten til avsnittet. Dette vil være uten den innrykkede funksjonen i teksten. Overskriften brukes med den tekstinnlyste egenskapen til -26 piksler og polstring overskriften mot venstresiden med samme verdi med et positivt tegn.

#Container H2
Tekst -indent: -26px;
Padding-venstre: 26px;

Lagre koden og utfør filen for å undersøke utdataene.

Ved utførelsen vil du se at overskriften vises slik at den andre linjen i overskriften er innrykket mot venstre retning. Imidlertid forblir den første linjen den samme.

Merk: For å lage den andre linjen i teksten enten i avsnittet eller overskriften innrykket, må vi ta verdien av tekst-indent i en negativ retning. Samtidig bør polstring av teksten gjøres i venstre retning med den positive verdien. Brukeren skal bekrefte at begge disse verdiene skal være de samme. I begge eksemplene har vi brukt det samme konseptet.

Konklusjon

CSS Indent -egenskapen for den andre linjen er en viktig funksjon i tekstinnhold som brukes på avsnitt og overskrifter for å diskriminere denne teksten fra andre ved å gjøre teksten appellerer til brukeren. Innrykkverdier kan også tas i piksler og prosenter. Denne egenskapen brukes på avsnittets første og andre linjer. Tekstindenten til den andre linjefunksjonen til CSS oppnås ved å ha verdien med et negativt tegn og samme verdi for polstringen med et positivt tegn. Polstringsretningen bør tas som venstre. Vi har brukt to eksempler for å utdype dette tekstinnlyste konseptet som vil være nok til å forbedre kunnskapen din om tekstegenskapene.