CSS ny linje
er ansvarlig for å lage pauser i innholdet, men CSS har sine måter å style effekten på gjenstandene i kroppen. I denne artikkelen vil vi se hvordan vi ved å bruke CSS kan legge til en ny linje i HTML -koden.
Eksempel 1:
For å implementere fenomenet en linjepause, bruker vi et enkelt eksempel for å utdype konseptet. Et enkelt program demonstrerer først HTML -tekstene uten avstand, og hvordan det ser ut til å bruke teksten i avsnittet eller en spennkode uten å bruke de blanke rommene. Først kommer kroppsdelen av HTML. En overskrift
blir lagt til seksjonen. Ved å bruke to spennmerker bruker vi den enkle teksten til den. En spennmerke fungerer som
Paragraf -tag. Lukk HTML -kroppen. Denne taggen inneholder ikke CSS eller noe annet innholdskode. Bare to linjer er erklært å få ønsket utgang.
Lagre koden til tekstfilen med en HTML -utvidelse og utfør den i nettleseren.
Du vil se at de to setningene uten linjepause vises, selv om de er skrevet på separate linjer. Men det spiller ingen rolle siden hver spennlinje vises på de samme linjene.
Eksempel 2:
Det finnes en CSS -egenskap som brukes på HTML -innholdet for å legge pausene i dem. Det er vognreturkarakteren (\ a). Det er delt inn i to elementer som er “:: før” og “:: etter” pseudo-elementer som er nevnt i klassene til CSS.
Dette er effekten som brukes enten i både elementene eller ved å bruke noen av dem. Til å begynne med går vi for å bruke et etterelement til teksten. La oss se hvordan det fungerer.
I kroppsdelen brukes det samme innholdet som en overskrift, og deretter blir to spennmerker brukt. Denne gangen er en ID for CSS nevnt i spennet. Denne IDen bruker alle effektene som er erklært inne i hodedelen av HTML -kroppen. Nå, lukk kroppen. Bruk stilmerker i hodet til å lage den interne CSS. Inne i taggene, bruk IDen som brukes og følg ":: etter" -type av vognreturkarakter. Inne i denne ID -beskrivelsen bruker vi innholdsegenskapen som bare er karakteren "\ a". Det forårsaker ingenting annet enn en ny linje til den eksisterende teksten. Ved å bruke dette vises begge setningene på separate linjer. En annen eiendom som er skrevet i beskrivelsen er "White-Space". Dette hvite rommet er alltid tatt i en pre-type.
#innhold1 :: etterInnhold: "\ A";
White-Space: Pre;
Denne stil -IDen påvirker spenninnholdet på en slik måte at to setninger ikke vises på samme linje. "Etter" -elementet forårsaker en pause av en linje mellom to setninger. Som navnet erklærer, er pausen etter den første linjen.
Lagre koden og utfør den i nettleseren for å se den resulterende websiden som er opprettet.
Du vil se at vi på denne måten opprettet en ny linje ved å bruke en CSS -eiendom.
Eksempel 3:
I dette eksemplet vil vi bruke begge elementene i vognreturkarakteren. La HTML -kroppsseksjonen være i måten det var i forrige eksempel, men med en enkelt endring ved å legge til en Content2 ID inne i taggen i det andre spennet. Dette forårsaker effekter på begge spennettene. Det er bare endring i stilmerker i hodeseksjonen. Innholdet1 -ID er den samme som "etter" -elementet inni seg.
Men innholdet2 -idet har "før" elementet i karakteren med det.
#innhold2 :: førInnhold: "\ A";
White-Space: Pre;
Som stilbeskrivelsen viser, blir førelementet brukt på det andre spennet. I første spenn brukte vi Conent1 ID. På grunn av Content1 ID opprettes plassen etter det første spennet. Men på grunn av Content2 ID med "før" -elementet, har det andre spennet en ny linje før andre setning. Dette skyldes "før" -elementet som er erklært i Content2 ID.
Ved henrettelse vil du se at det er et gap på en blank linje mellom to setninger. "After" -effekten blir brukt av den første Conten1 -IDen, mens "før" -effekten blir brukt av Content2 ID samlet.
Eksempel 4:
Et annet eksempel på en CSS-ny linje er erklært her som innebærer å bruke en CSS-egenskap der hvit-rom-effekten får en verdi av forhåndslinjen. Denne forhåndsverdien skaper et gap før HTML-innholdet det brukes. La oss nå vurdere følgende eksempel:
I kroppsdelen av HTML, to overskrifter,
og
, er gitt. Etter disse overskriftene er et avsnitt erklært med hvert ord i en egen linje.
Nå, i hodet, etter å ha gitt tittelen på siden, brukes en intern CSS for å ha en stilkode. Inne i stilkoden bruker vi et avsnittsmerke for å bruke skriftfargen på teksten sammen med hvitrommet-egenskapen.
PFargen oransj;
White-Space: Pre-Line;
Denne "pre-line" -koden forårsaker en tom linje før avsnittet har startet.
Ved henrettelse vil du se at plassen opprettes før avsnittet har startet.
Eksempel 5:
Dette eksemplet er ganske forskjellig fra de tidligere eksemplene fordi vi ikke bare vil bruke en tom ny linje her, men også legge til den nye teksten til de nye linjene som genereres før. I kroppsdelen opprettes to overskrifter -
og
. Etter disse brukes et avsnittsmerke for å lage teksten med to ledd.
Inne i hodeseksjonen bruker vi et avsnitt for stylingsformålet.
P :: førFargen rød;
Innhold: "Linuxhint \ A"
"Artikkel på linjepause";
Display: Block;
White-Space: Pre
Denne effekten inkluderer skriftfargen og innholdet som vi ønsker å legge til hvert avsnitt etter at den blanke linjen er lagt til. Den hvite rom-egenskapen får en "pre" -verdi for å legge til et tomt rom før avsnittet.
Lagre koden og utfør filen. Du vil se at før hvert avsnitt blir en tom linje lagt til, og etter det blir innholdet lagt til etter det tomme rommet.
Konklusjon
CSS New Line er en beskrivelse av å lage en ny linje ved å bruke noen funksjoner i CSS som er erklært med en hvilken som helst HTML -funksjon. Gjennom CSS -effektene kan en ny linje legges til før, etter eller mellom HTML -innholdet. Vi implementerte de forskjellige eksemplene for å utdype konseptet kort. I starten brukes et eksempel på et HTML -avsnitt uten et rom. Deretter, ved å bruke den samme koden, la vi til en CSS -egenskap til karakteren. Et "vognreturkarakter" brukes til å legge til nye linjer mellom innholdet som vi erklærer i HTML -kroppen. Dette tegnet kan legges til direkte eller med det nye innholdet som skal legges til.