Når vi skriver en artikkel eller et dokument, trenger vi ofte at noen tegn er i spesifikke tilfeller. På en nettside brukes HTML-elementet hvis tekst må transformeres med CSS-egenskapen ' tekstforvandling '. Denne egenskapen sparer også tid på en slik måte at etter å ha lagt til alle karakterene, kan dekselet deres transformeres samtidig.

Dette innlegget vil lære deg hvordan vi kan endre teksttilfeller med CSS. Så la oss starte!

Hvordan tekst med store og små bokstaver ved hjelp av CSS?

I CSS er ' tekstforvandling ” egenskap kontrollerer bruken av store bokstaver i teksten. Den brukes også til å konvertere tekst til store eller små bokstaver.

tekst-transform egenskapsverdier

De mulige verdiene for CSS-teksttransformeringsegenskapen er oppført nedenfor:

• • ' stor bokstav ”: Denne verdien gjør alle tegn i elementets tekst med store bokstaver.
  • ' små bokstaver ”: Denne verdien endrer elementets tekst til små bokstaver.
  • ' bruk store bokstaver ”: Denne verdien endrer hvert ords første bokstav med stor bokstav.
  • ' ingen ”: Denne verdien begrenser elementets tekst for endring.
  • ' første ”: Denne verdien angir standardverdien.
  • ' du arver ”: Denne verdien setter verdien fra det overordnede elementet.

Analyser eksempelet nedenfor!

Eksempel: Transformering av tekst til store og små bokstaver

Først legger du til et div-element med klassenavnet ' eske '. Inne i brødteksten legger du til tre overskriftstagger

,

og

, der teksten til

-overskriften er med store bokstaver,

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

Nedenfor er HTML-koden:

< div klasse = 'eske' >
< h1 > små bokstaver: VELKOMMEN TIL LINUXHINT h1 >
< h2 > store bokstaver: velkommen til linuxhint h2 >
< h3 > bruk store bokstaver: velkommen til linuxhint h3 >
div >

Stilboks div

.eske {
høyde: 200px;
bredde: 80 % ;
kantlinje: 4px solid #e4cfcf;
bakgrunnsfarge: kadettblå;
margin: 1px auto;
polstring: 10px;
}

Div-en opprettet i HTML-filen ovenfor er nå stilt med CSS-egenskaper som er forklart nedenfor:

• • ' høyde ” brukes til å stille inn høyden på div.
  • ' bredde ” brukes for å stille inn bredden på div.
  • ' grense ”-egenskapen brukes til å bruke rammen rundt elementet, som er av 4px bredde, hellinjetype og #e4cfcf-farge.
  • ' bakgrunnsfarge ' spesifiserer elementets bakgrunnsfarge.
  • ' margin ” egenskap justerer plass på hver side av elementet.
  • ' polstring ”-egenskapen brukes til å produsere plass rundt innholdet i div-elementet eller innenfor elementets kantlinje.

Kodeblokkene nedenfor indikerer at alle overskriftselementene er stilt med forskjellige verdier for teksttransformeringsegenskapene.

-elementet brukes med egenskapen text-transform med verdien satt som ' små bokstaver ':

h1 {
tekst-transform: små bokstaver;
}

-elementet brukes med egenskapen text-transform med verdien satt som ' stor bokstav ':

h2 {
tekst-transform: store bokstaver;
}

For

-elementet settes verdien til teksttransformeringsegenskapen som ' bruk store bokstaver ':

h3 {
tekst-transform: bruk store bokstaver;
}

Ved å oppgi den ovennevnte koden, blir teksten i den første overskriften omdannet til små bokstaver og den andre overskriften til store bokstaver. Mens den første bokstaven i hvert ord er stor i den tredje overskriften:

Flott! Vi har med suksess lært hvordan vi transformerer teksten til store og små bokstaver og alt med store bokstaver.

Konklusjon

Teksttransformeringsegenskapen til CSS kontrollerer bruken av store og små bokstaver i teksten og brukes til å endre tilfellene i dokumentets tekst. Denne egenskapen gjelder for alle elementer, der verdiene til denne egenskapen kan være store bokstaver, små bokstaver, store bokstaver eller ingen. Denne bloggen har forklart prosedyren for å konvertere tekst til store og små bokstaver ved å bruke CSS-teksttransformeringsegenskapen.