Når vi skriver en artikel eller et dokument, har vi ofte brug for, at nogle tegn er i specifikke tilfælde. På en webside anvendes HTML-elementet, hvis tekst skal transformeres, med CSS-egenskaben ' tekst-transformation ”. Denne egenskab sparer også tid på en sådan måde, at efter tilføjelse af alle tegnene kan deres kasus omdannes på én gang.

Dette indlæg vil lære dig, hvordan vi kan ændre tekstsager med CSS. Så lad os starte!

Hvordan tekst med store og små bogstaver ved hjælp af CSS?

I CSS er ' tekst-transformation ” egenskab styrer tekstens store bogstaver. Det bruges også til at konvertere tekst til store eller små bogstaver.

tekst-transformer egenskabsværdier

De mulige værdier for CSS-teksttransformeringsegenskaben er angivet nedenfor:

• • “ store bogstaver ”: Denne værdi gør alle tegn i elementets tekst med store bogstaver.
  • “ små bogstaver ”: Denne værdi ændrer elementets tekst til små bogstaver.
  • “ kapitalisere ”: Denne værdi ændrer hvert ords første bogstav med stort.
  • “ ingen ”: Denne værdi begrænser elementets tekst til ændring.
  • “ initial ”: Denne værdi indstiller standardværdien.
  • “ du arver ”: Denne værdi indstiller sin værdi fra dets overordnede element.

Analyser eksemplet nedenfor!

Eksempel: Omdannelse af tekst til store og små bogstaver

Tilføj først et div-element med klassenavnet ' boks ”. Inden i brødteksten skal du tilføje tre overskriftstags

,

og

, hvor teksten i

-overskriften er med store bogstaver,

er med små bogstaver, og den tredje er også med små bogstaver.

Nedenfor er HTML-koden:

< div klasse = 'boks' >
< h1 > små bogstaver: VELKOMMEN TIL LINUXHINT h1 >
< h2 > store bogstaver: velkommen til linuxhint h2 >
< h3 > kapitalisere: velkommen til linuxhint h3 >
div >

Stilkasse div

.boks {
højde: 200px;
bredde: 80 % ;
kant: 4px fast #e4cfcf;
baggrundsfarve: kadetblå;
margen: 1px auto;
polstring: 10px;
}

Den div, der er oprettet i ovenstående HTML-fil, er nu stylet med CSS-egenskaber, der er forklaret nedenfor:

• • “ højde ” bruges til at indstille højden på div.
  • “ bredde ” bruges til at indstille bredden af ​​div.
  • “ grænse ” egenskaben bruges til at anvende grænsen omkring elementet, som er 4px bredde, solid line type og #e4cfcf farve.
  • “ baggrundsfarve ” angiver elementets baggrundsfarve.
  • “ margen ” egenskab justerer plads på hver side af elementet.
  • “ polstring ” egenskaben bruges til at producere plads omkring indholdet af div-elementet eller inden for elementets kant.

Nedenstående kodeblokke angiver, at alle overskriftselementerne er stylet med forskellige værdier af teksttransformeringsegenskaberne. Elementet

anvendes med egenskaben text-transform med værdien sat som ' små bogstaver ”:

h1 {
tekst-transform: små bogstaver;
}

Elementet

anvendes med egenskaben text-transform med værdien sat som ' store bogstaver ”:

h2 {
tekst-transform: store bogstaver;
}

For

-elementet er værdien af ​​tekst-transform egenskaben sat som ' kapitalisere ”:

h3 {
tekst-transform: skrive med store bogstaver;
}

Ved at angive den ovennævnte kode omdannes teksten i den første overskrift til små bogstaver og den anden overskrift til store bogstaver. der henviser til, at det første bogstav i hvert ord er stort i den tredje overskrift:

Store! Vi har med succes lært at omdanne teksten til store bogstaver, små bogstaver og alt med store bogstaver.

Konklusion

Teksttransformeringsegenskaben i CSS styrer tekstens store bogstaver og bruges til at ændre bogstaverne i dokumentets tekst. Denne egenskab gælder for alle elementer, hvor værdierne af denne egenskab kan være store bogstaver, små bogstaver, store bogstaver eller ingen. Denne blog har forklaret proceduren for at konvertere tekst til store og små bogstaver ved hjælp af CSS-teksttransformeringsegenskaben.