Tekstformatering i CSS forklart
Tekstformateringen består av egenskaper som farge, justering, dekorasjon, innrykk, avstand og mange flere. Hensikten med denne guiden er å opplyse viktigheten av tekstformatering i CSS og utforske egenskapene som kan brukes til tekstformatering.
Hva slags tekstformatering i CSS støttes?
Tekstformateringen er assistert av flere egenskaper som er beskrevet her, og syntaks for disse egenskapene er også definert.
Justering: Den justerer teksten ved hjelp av syntaksen skrevet nedenfor.
velger tekst-align: verdi;Verdien av tekst-align kan være:
- Til høyre: Tekst ville være på høyre side av elementet
- til venstre: venstre margin på linjene er rett
- Senter: Teksten vil være i sentrum og venstre/høyre marginer vil være lik
- Justify: Teksten er ordnet på en måte som venstre og høyre marginer holdes rette og lik
Eksempel:
Teksten er igjen
Teksten er sentrert tilpasset
Teksten er riktig justert
Tekst er berettiget
Fire CSS -klasser er opprettet, "venstre" -klasse representerer venstre justering av tekst. Tilsvarende brukes "riktig", "cent" og "bare" til å justere teksten til høyre, sentrert og rettferdiggjort.
Produksjon
Avstand mellom bokstavene: Det brukes til å definere rommet mellom bokstaver i et ord i PX, EM, MM eller CM.
velger brev-pacing: verdi;Eksempel: For å sjekke funksjonaliteten til egenskapen Letter-Pacing, har vi brukt følgende kode.
Brevavstand er 5px
Brevavstand er 0.5em
Brevavstand er 1 mm
I koden ovenfor opprettes CSS-klassene for å angi bokstavavstand i PX, EM og MM.
Produksjon
Ord-avstand: Denne egenskapen brukes til å legge til plass mellom ordene til en linje.
velger Word-SPACING: verdi;Eksempel: Ordet avstand er gitt ved hjelp av følgende kodelinjer.
Hvert ord blir atskilt med 10px
En CSS -klasse er opprettet for å skape et 10px mellomrom mellom ord.
Produksjon
Farge: Dette definerer fargen på tekst som brukes ved hjelp av å følge syntaks.
velger farge: verdi;Verdien av fargeegenskap kan være,
- Navn på fargen i.e., rød appelsin
- Heksadesimal verdi av fargen (#00000)
Eksempel: Det som er gitt nedenfor, utøves for å sette fargen på
tekst til rødt.
Velkommen til Linuxhint
Produksjon
Dekorasjon: Dekorasjonen utføres for å utføre handlinger på tekst som understreking, gjennomføring, overlinje og ingen.
velger tekst-dekorasjon: verdi;Verdien kan være ett av følgende
- gjennomføring: En horisontal linje er plassert på teksten
- Overlinje: En linje er tegne over teksten
- Understrek: Den horisontale linjen er plassert under linjen
- Ingen: Ingen linje ville bli plassert
Eksempel:
understreket tekst
Linje gjennom tekst
Overlinet tekst
Ovennevnte kode består av tre CSS -klasser og tre avsnitt. CSS -klassene “Un”, “LT” og “OV” representerer dekorasjonsstilen og brukes i tre forskjellige avsnitt.
Produksjon
Innrykk: CSS -innrykk utføres til innrykk (holder teksten på spesifikt rom fra marginen) den første linjen i avsnittet.
velger tekst-indent: verdi;Verdien kan være i mm, cm, em, px.
Eksempel: Her har vi brukt innrykkegenskapen (i PX, EM og CM) på forskjellige avsnitt i koden.
Innrykk er satt til 25px
Innrykk er satt til 1em
Innrykk er satt til 1 cm
Ovennevnte kode inneholder tre CSS -klasser, og hver klasse indikerer teksten i forskjellige måleenhet.
Produksjon
Transformasjon: Tekstenes tilfelle administreres ved hjelp av transformasjonsegenskaper etterfulgt av syntaksen gitt her.
velger tekst-transform: verdi;Verdien kan være ett av følgende
- store bokstaver: For å endre bokstavene til store bokstaver
- Små bokstaver: Endrer bokstavene til små bokstaver
- Bevis: det brukes til å kapitalisere den første bokstaven i hvert ord
Eksempel: Du kan sjekke funksjonaliteten til teksttransformasjonen fra den under-uttalte koden.
Konvertering til lavere tilfelle
Konvertere til overvurdering
Første ord vil være fanget
Den ovennevnte koden inneholder tre CSS-klasser som er ment å transformere teksten til avsnittet til lavere tilfelle, øvre sak og kapitalisere skjema.
Produksjon
Linjehøyde: Høyden på tekstlinjene kan defineres ved hjelp av egenskapen til linjehøyde i PX, CM, EM og MM.
velger line-height: verdi;Eksempel: Følgende kodelinjer viser bruken av linjehøydeegenskaper for å justere høyden på tekstlinjer.
linjehøyde er 25px
Linjehøyde er 2em
linjehøyde er 1 cm
Ovennevnte kode bruker linjehøyden i PX, EM og CM. Dessuten er grensestilen til avsnittet satt til solid (for bedre å forstå linjehøyde-konseptet).
Produksjon
Tekstretning: Skrivingsretningen til teksten i CSS kan administreres ved å bruke retningsegenskapen.
velger retning: verdi;Verdien kan være RTL (høyre til venstre), LTR (venstre til høyre), initial (), og arve (hentet fra overordnede element).
Eksempel:
Tekstretning er høyre til venstre
Det opprettes en CSS -klasse som lar deg sette retningen fra høyre til venstre.
Produksjon
Tekstskygge: Skyggen av teksten praktiseres og legger skygge med forskjellige egenskaper.
velger tekst-skygge: verdi1 Value2 Value3;Verdiene er beskrevet som følger
- Verdi1 representerer skyggeens horisontale størrelse
- Value2 definerer skyggeens vertikale størrelse
- Value3 brukes til fargene på skyggen, og det kan være nøyaktig fargens navn, RGB/RGBA -kombinasjonen av en farge, hex -verdien på en farge.
Eksempel: Følgende kode angir en farget vertikal og horisontal skygge.
En rød skygge av 1px er gitt
En CSS -klasse som heter “SH” er opprettet som skaper en 1px tykk rød skygge på den medfølgende teksten.
Produksjon
Etter å ha gått gjennom denne delen, ville du ha fått forståelsen av forskjellige tekstformaterende egenskaper levert av CSS.
Konklusjon
Tekstformateringen i CSS lar deg forskjønne teksten ved å bruke egenskapene. Denne artikkelen gir arbeid og bruk av alle tekstformateringsegenskapene støttet av CSS. Hver eiendom blir styrt av syntaksen den følger, og et eksempel er også gitt for å forstå bruken. Denne omfattende guiden vil gjøre det mulig for deg å bruke alle slags mulige tekstformater i CSS.
Hold kontakten med Linuxhint for mer informative guider på CSS og HTML.