Bármilyen cikk vagy dokumentum írásakor gyakran szükségünk van néhány karakterre, hogy konkrét esetekben legyenek. Egy weboldalon az a HTML-elem, amelynek szövegét át kell alakítani, a CSS tulajdonsággal alkalmazza szöveg-átalakítás ”. Ezzel a tulajdonsággal időt takaríthat meg, így az összes karakter hozzáadása után a kis- és nagybetűjük egyszerre átalakítható.

Ebből a bejegyzésből megtudhatja, hogyan változtathatjuk meg a szöveges eseteket CSS-sel. Szóval, kezdjük!

Hogyan írjunk nagy- és kisbetűs szöveget CSS-sel?

A CSS-ben a „ szöveg-átalakítás ” tulajdonság szabályozza a szöveg nagybetűs írását. Szöveg kis- vagy nagybetűssé alakítására is használható.

text-transform Property Values

Az alábbiakban felsoroljuk a CSS text-transform tulajdonság lehetséges értékeit:

• • ' nagybetűs ”: Ez az érték az elem szövegében szereplő összes karaktert nagybetűssé teszi.
  • ' kisbetűvel ”: Ez az érték kisbetűre változtatja az elem szövegét.
  • ' nagybetűvel írjuk ”: Ez az érték megváltoztatja minden szó első betűjét nagybetűvel.
  • ' egyik sem ”: Ez az érték korlátozza az elem szövegét a módosításra.
  • ' a kezdeti ”: Ez az érték beállítja az alapértelmezett értéket.
  • ' örökölsz ”: Ez az érték a szülőelemből állítja be az értékét.

Elemezze az alábbi példát!

Példa: Szöveg átalakítása nagy- és kisbetűssé

Először adjon hozzá egy div elemet az osztálynévvel ' doboz ”. A törzsön belül adjon hozzá három címsorcímkét

,

és

, ahol a

címsor szövege mind nagybetűs, a

kisbetűs, a harmadik pedig szintén kisbetűs.

Alább látható a HTML kód:

< div osztály = 'doboz' >
< h1 > kisbetűs: ÜDVÖZÖLJÜK A LINUXHINT h1 >
< h2 > nagybetűs: üdvözli a linuxhint h2 >
< h3 > nagybetűvel: üdvözöljük a linuxhintben h3 >
div >

Stílusos doboz div

.doboz {
magasság: 200 képpont;
szélesség: 80 % ;
szegély: 4 képpont tömör #e4cfcf;
háttérszín: kadetkék;
margó: 1px auto;
padding: 10px;
}

A fenti HTML-fájlban létrehozott div CSS-tulajdonságokkal van stílusozva, amelyeket alább ismertetünk:

• • ' magasság ” a div magasságának beállítására szolgál.
  • ' szélesség ” a div szélességének beállítására szolgál.
  • ' határ ” tulajdonságot használják az elem körüli szegély alkalmazására, amely 4 képpont széles, folytonos vonal típusú és #e4cfcf színű.
  • ' háttérszín ” határozza meg az elem háttérszínét.
  • ' árrés ” tulajdonság beállítja a helyet az elem minden oldalán.
  • ' párnázás ” tulajdonság arra szolgál, hogy teret hozzon létre a div elem tartalma körül vagy az elem szegélyén belül.

Az alábbi kódblokkok azt jelzik, hogy az összes címsorelem a szövegátalakítási tulajdonságok különböző értékeivel van stílusozva. A

elem a text-transform tulajdonsággal kerül alkalmazásra a következő értékkel: kisbetűvel ”:

h1 {
szöveg-átalakítás: kisbetűk;
}

A

elem a text-transform tulajdonsággal kerül alkalmazásra, a következő értékkel nagybetűs ”:

h2 {
szöveg-átalakítás: nagybetűk;
}

A

elemnél a text-transform tulajdonság értéke ' nagybetűvel írjuk ”:

h3 {
text-transform: nagybetűvel;
}

A fent említett kód megadásával az első címsor szövege kisbetűvé, a második címsor pedig nagybetűvé alakul. Míg a harmadik címsorban minden szó első betűje nagybetűvel van írva:

Nagy! Sikeresen megtanultuk, hogyan alakítsuk át a szöveget nagy-, kis- és nagybetűssé.

Következtetés

A CSS text-transform tulajdonsága szabályozza a szöveg nagybetűs írását, és a dokumentum szövegének kis- és nagybetűinek megváltoztatására szolgál. Ez a tulajdonság minden elemre vonatkozik, ahol ennek a tulajdonságnak az értéke lehet nagybetűs, kisbetűs, nagybetűs vagy semmilyen. Ez a blog ismerteti a szöveg nagy- és kisbetűssé alakításának folyamatát a CSS text-transform tulajdonság segítségével.