Mis tahes artiklit või dokumenti kirjutades vajame sageli teatud märke, et need oleksid konkreetsetel juhtudel. Veebilehel rakendatakse HTML-i elementi, mille tekst vajab teisendamist, koos CSS-i atribuudiga ' teksti teisendus ”. See omadus säästab ka aega nii, et pärast kõigi märkide lisamist saab nende tähtede korraga teisendada.

See postitus õpetab teile, kuidas saame CSS-iga tekstijuhte muuta. Niisiis, alustame!

Kuidas kirjutada CSS-i abil teksti suur- ja väiketähtedega?

CSS-is on ' teksti teisendus ” atribuut juhib teksti suurtähtede kasutamist. Seda kasutatakse ka teksti teisendamiseks suur- või väiketähtedeks.

text-transform Property Values

CSS-i teksti teisendamise atribuudi võimalikud väärtused on loetletud allpool.

• • “ suurtähtedega ”: see väärtus muudab elemendi tekstis kõik tähemärgid suurtähtedeks.
  • “ väiketähtedega ”: see väärtus muudab elemendi teksti väiketähtedeks.
  • “ suurtähtedega kirjutama ”: see väärtus muudab iga sõna esimest tähte suureks.
  • “ mitte ühtegi ”: see väärtus piirab elemendi teksti muutmist.
  • “ esialgne ”: see väärtus määrab vaikeväärtuse.
  • “ pärida ”: see väärtus määrab selle väärtuse emaelemendist.

Analüüsige allolevat näidet!

Näide: teksti teisendamine suur- ja väiketähtedeks

Esmalt lisage element div klassi nimega ' kasti ”. Keha sisse lisage kolm päise silti

,

ja

, kus päise

tekst on kõik suurtähtedega,

on väiketähtedega ja kolmas on samuti väiketähtedega.

Allpool on HTML-kood:

< div klass = 'kast' >
< h1 > väiketähed: TERE TULEMAST LINUXHINTI h1 >
< h2 > suurtähed: tere tulemast linuxhinti h2 >
< h3 > suurtäht: tere tulemast linuxhinti h3 >
div >

Style box div

.kast {
kõrgus: 200 pikslit;
laius: 80 % ;
ääris: 4 pikslit ühtlane #e4cfcf;
taustavärv: kadetsinine;
veeris: 1px auto;
polster: 10px;
}

Ülaltoodud HTML-failis loodud div on nüüd kujundatud CSS-i atribuutidega, mida on kirjeldatud allpool:

• • “ kõrgus ” kasutatakse lahtri kõrguse määramiseks.
  • “ laius ” kasutatakse lahtri laiuse määramiseks.
  • “ piir ” atribuuti kasutatakse 4 piksli laiuse, pideva joonega ja värvi #e4cfcf elemendi ümber oleva äärise rakendamiseks.
  • “ taustavärv ” määrab elemendi taustavärvi.
  • “ marginaal ” atribuut kohandab ruumi elemendi igal küljel.
  • “ polsterdus ” atribuuti kasutatakse ruumi loomiseks elemendi div sisu ümber või elemendi äärise sees.

Allolevad koodiplokid näitavad, et kõik pealkirja elemendid on kujundatud erinevate tekstiteisendusomaduste väärtustega. Elementi

rakendatakse atribuudiga text-transform väärtusega ' väiketähtedega ”:

h1 {
text-transform: väiketähed;
}

Elementi

rakendatakse atribuudiga text-transform väärtusega ' suurtähtedega ”:

h2 {
text-transform: suurtähtedega;
}

Elemendi

puhul on atribuudi tekstiteisendus väärtuseks seatud ' suurtähtedega kirjutama ”:

h3 {
text-transform: suurtähtedega;
}

Eespool nimetatud koodi sisestamisel muudetakse esimese pealkirja tekst kõik väiketähtedeks ja teine ​​päis suurtähtedeks. Arvestades, et iga sõna esimene täht on kolmandas pealkirjas suurtähtedega:

Suurepärane! Oleme edukalt õppinud, kuidas muuta teksti suurtähtedeks, väiketähtedeks ja suurtähtedeks.

Järeldus

CSS-i teksti teisendamise atribuut kontrollib teksti suurtähtede kasutamist ja seda kasutatakse dokumendi teksti tähtede muutmiseks. See atribuut kehtib kõigi elementide puhul, mille väärtused võivad olla suurtähed, väikesed tähed, suurtähed või mitte ühtegi. See ajaveeb on selgitanud teksti teisendamist suur- ja väiketähtedeks, kasutades atribuuti CSS text-transform.