Bij het schrijven van een artikel of document hebben we vaak enkele tekens nodig voor specifieke gevallen. Op een webpagina wordt het HTML-element waarvan de tekst moet worden getransformeerd, toegepast met de CSS-eigenschap ' tekst-transformatie ”. Deze eigenschap bespaart ook tijd op een zodanige manier dat na het toevoegen van alle karakters hun hoofdlettergebruik in één keer kan worden getransformeerd.

In dit bericht leer je hoe we tekstcases kunnen wijzigen met CSS. Dus laten we beginnen!

Tekst in hoofdletters en kleine letters gebruiken met CSS?

In CSS is de ' tekst-transformatie ” eigenschap regelt het hoofdlettergebruik van de tekst. Het wordt ook gebruikt om tekst om te zetten in hoofdletters of kleine letters.

tekst-transform Eigenschapswaarden

De mogelijke waarden van de CSS-eigenschap text-transform staan ​​hieronder vermeld:

• • “ hoofdletters ”: Deze waarde maakt alle karakters in de tekst van het element hoofdletters.
  • “ kleine letters ”: Deze waarde verandert de tekst van het element in kleine letters.
  • “ kapitaliseren ”: Deze waarde verandert de eerste letter van elk woord in een hoofdletter.
  • “ geen ”: Deze waarde beperkt de tekst van het element voor wijziging.
  • “ voorletter ”: Deze waarde stelt de standaardwaarde in.
  • “ je erft ”: Deze waarde stelt de waarde in op basis van het bovenliggende element.

Analyseer onderstaand voorbeeld!

Voorbeeld: tekst omzetten in hoofdletters en kleine letters

Voeg eerst een div-element toe met de klassenaam ' doos ”. Voeg in de hoofdtekst drie heading-tags

,

en

toe, waarbij de tekst van de

-header allemaal in hoofdletters is,

in kleine letters en de derde ook in kleine letters.

Hieronder staat de HTML-code:

< div klas = 'doos' >
< h1 > kleine letters: WELKOM BIJ LINUXHINT h1 >
< h2 > hoofdletters: welkom bij linuxhint h2 >
< h3 > kapitaliseren: welkom bij linuxhint h3 >
div >

Stijlbox div

.doos {
hoogte: 200px;
breedte: 80 % ;
rand: 4px effen #e4cfcf;
achtergrondkleur: kadetblauw;
marge: 1px automatisch;
opvulling: 10px;
}

De div die in het bovenstaande HTML-bestand is gemaakt, is nu opgemaakt met CSS-eigenschappen die hieronder worden uitgelegd:

• • “ hoogte ” wordt gebruikt voor het instellen van de hoogte van de div.
  • “ breedte ” wordt gebruikt voor het instellen van de breedte van de div.
  • “ grens ” eigenschap wordt gebruikt om de rand rond het element toe te passen, die een breedte van 4 px, een ononderbroken lijntype en een #e4cfcf-kleur heeft.
  • “ Achtergrond kleur ” specificeert de achtergrondkleur van het element.
  • “ marge ” eigenschap past de ruimte aan elke kant van het element aan.
  • “ opvulling ” eigenschap wordt gebruikt om ruimte te creëren rond de inhoud van het div-element of binnen de rand van het element.

De onderstaande codeblokken geven aan dat alle kopelementen zijn opgemaakt met verschillende waarden van de eigenschappen voor teksttransformatie. Het

-element wordt toegepast met de eigenschap text-transform met de waarde ingesteld als ' kleine letters ”:

h1 {
tekst-transformatie: kleine letters;
}

Het

-element wordt toegepast met de eigenschap text-transform met de waarde ingesteld als ' hoofdletters ”:

h2 {
tekst-transformatie: hoofdletters;
}

Voor het

-element is de waarde van de eigenschap text-transform ingesteld als ' kapitaliseren ”:

h3 {
tekst-transformatie: kapitaliseren;
}

Door de bovengenoemde code op te geven, wordt de tekst van de eerste kop helemaal omgezet in kleine letters en de tweede kop in hoofdletters. Terwijl de eerste letter van elk woord een hoofdletter is in de derde kop:

Super goed! We hebben met succes geleerd hoe we de tekst kunnen omzetten in hoofdletters, kleine letters en allemaal in hoofdletters.

Conclusie

De eigenschap text-transform van CSS bepaalt het hoofdlettergebruik van de tekst en wordt gebruikt om de hoofdletters van de tekst van het document te wijzigen. Deze eigenschap is van toepassing op alle elementen, waarbij de waarden van deze eigenschap hoofdletters, kleine letters, hoofdletters of geen kunnen zijn. Deze blog heeft de procedure uitgelegd voor het converteren van tekst naar hoofdletters en kleine letters met behulp van de CSS-eigenschap text-transform.