CSS pre -tag
Eksempel 01:
La oss komme i gang med det første eksemplet på artikkelen vår. Vi må starte dette eksemplet HTML -kode med bruk av “HTML” Basic Tag. Hodemerket fortsetter med bruken av en tittelkode i den, i.e. “CSS Pre”. For å forstå HTML -skriptet fullt ut, må vi se på kroppsdelen på websiden vår først. Overskriften på størrelsen 1 initialiseres i kroppen. Etter det blir et "div" -element kastet av for å lage en ny seksjon og legge til noen andre elementer i det. Denne DIV -delen inneholder en overskrift av størrelsen 2. Etter overskriften brukes en spennmerke for å lage et nytt spenn i "div" -delen. Dette spennet inneholder en lang tekstdata i den.
Etter alle disse setningene følges spenn -taggen tett av stengingen av "div" -merket. Liket på vår HTML -side er fullført. Etter dette må vi ta en titt på CSS -stylingen av denne HTML -koden i stilkoden. Spennelementet brukes til å style det deretter. Attributtet “White-Space” brukes med "Pre" -verdien. "Pre" -verdi -attributtet brukes her for å bevare alle mellomrom og linjeskift som "spenn" -elementet inneholder i det. Etter det er fontfamilien satt til monospace, og visningsegenskapen tildeler "blokkering" -verdien. Fontstørrelsen er satt til 20 piksler med fargen brun. Mens bakgrunnsfargen er satt til “Bisque”. Det er andre skriftfamilier som brukes i stylingen som skal brukes i dette spennet. Hodemerket er fullført, og vi kan kjøre koden vår med VS -koden.
Utgangen for denne HTML -siden i Chrome -nettleseren er gitt i følgende bilde. Du kan se at siden opprettet en ny seksjon og la til et spennelement i den. Spanelementet inneholder noen linjer som innhold mens linjen går i stykker og rom er alle bevart på grunn av bruken av "Pre" -attributtet som en verdi for "White Space" -egenskapen til CSS.
Eksempel 02:
Innenfor forrige eksempel har vi tatt en titt på bruken av "Pre" -attributtet som verdien av den hvite rom-egenskapen. Nå bruker vi den som en tag i HTML -filen. Vi starter dette eksemplet med samme HTML-, hode- og kropps tag -format. Innenfor kroppskoden til dette eksempelkoden bruker vi den enkle overskriften til størrelsen 1 etterfulgt av "pre" -koden som inneholder et veldig stort tekstinnhold i den. Dette innholdet inneholder linjeredler og mellomrom mellom ordene.
Etter dette bruker vi en annen overskrift av størrelsen 1 for å oppgi at forelementet inneholder fast bredde og høyde. “Div” -elementet brukes her for å lage en ny seksjon etter overskriften. Stilmerket brukes i “Div” åpningsmerket for å style “Div” -delen til en bredde på 300 piksler, overløp satt til bil, høyde på 200 piksler og en bakgrunnsfarge på lysegrønn. Denne "div" -delen inneholder en "pre" -kode i den for å vise noen sett med linjer på en ganske annen stil måte i stedet for å bruke noen tekstlinjer som et innhold. Dette stilte innholdet "Pre" -taggen vises i følgende bilde. Pre-taggen og "div" -merket er stengt her.
Etter det lukker vi “Body” og “HTML” -merker fordi denne koden ikke inneholder noe styling mer enn det grunnleggende som vi allerede har gitt i nettet. Denne koden er klar til å bli utført i Visual Studio -koden ved hjelp av “Run” -alternativet.
Utgangen fra denne HTML -koden vises nedenfor i følgende bilde. Det viser tydelig bruken av standard pre-tag på de enkle tekstene som inneholder rommene. Bruddene viser innholdsteksten slik den er uten en eneste karakterendring. Bruken av fast bredde og høyde for "div" -delen forhindrer ikke "pre" -merket for å vise dataene som den er. Etter overskriften 2 viser den grønne bakgrunnen med Scrollbar de samme stildataene som er spesifisert med "Pre" -koden.
Eksempel 03:
La oss ha vårt siste eksempel på denne artikkelen som inneholder en pre-tag i den. HTML -koden starter med samme format - HTML -taggen og hodemerket som følger "Tittel" -merket for å gi en HTML -side et nytt navn. Deretter bruker bruken av en kroppskode for å legge til noen elementer som skal vises på nettleserskjermen. Etter å ha brukt hodemerket, bruker vi overskriften på størrelsen 1 i kroppen til en HTML -side. Figurs taggen brukes før "pre" -tagbruken. Forhåndsapparatet er stylet med brun bakgrunn, hvit tekstfarge, en bredde på 600 piksler, en polstring på 10 piksler og en skriftstørrelse på 16 piksler via inline styling.
Vi legger til skiltet mindre enn og større enn HTML -siden ved å bruke søkeordtegnene som LT, GT og formen til en ku skapt av noen spesialtegn sammen med noen tekster. Pre-taggen er nå fullført, og vi initialiserte "figcaption" -merket for å tegne formen som vi dannet innenfor pre-taggen. IDen for figcaption-taggen er spesifisert som "kum-caption", og den inneholder 2 linjer med data med noen mellomrom og linjeskift. Figursappen, kroppskoden og HTML -kodene er lukket etter det. Vi bruker denne koden i VS -koden for å utføre den.
Utgangen viser at overskriften er atskilt fra den separate "Div" -delen. Denne DIV-delen inneholder en kuform med en brun bakgrunn og den gitte bildeteksten på slutten av denne bildelignende figuren. Rommene fjernes fra bildeteksten.
Konklusjon
Denne artikkelen handler om bruken av forhånds tagene i HTML -koden på flere måter for å tillate linjeskift og mellomrom av en eller annen grunn. Vi prøvde noen eksempler for å demonstrere bruken av den på den enkleste og best mulig måten. Vi prøvde å bruke nøkkelordet "Pre" som attributtverdien til den hvite rom-egenskapen innen et av eksemplene våre. Innenfor resten av eksemplene prøvde vi det som en egen tagg for å demonstrere det som fungerer tydeligere og effektivt.