CSS
HTML
COMPONENTS
CODE HUB
CSS Text Transform Generator
Konfiguráció
Szöveg átalakítása
Osztály
Előnézet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Kód
ReadyTools Academy
Tanulj HTML-t, CSS-t és JavaScriptet teljesen ingyen a ReadyTools Academy keretében.
Kövesd a tanulásodat, fejlődj a saját tempódban, és szórakozz közben! 🎯
Kezdj beleCSS Text Transform Generator
A CSS-ben a text-transform tulajdonságot a HTML-elemen belüli szöveg nagybetűs írásmódjának szabályozására használják. Lehetővé teszi a szöveg nagy- és kisbetűs írását, illetve minden szó első karakterének nagybetűs írását. Ez a tulajdonság hasznos lehet a szöveg egységes stílusának és formázásának eléréséhez.
A text-transform tulajdonság a következő értékeket veheti fel:
none: Nincs nagybetűs írásmód.
.no-transform {
text-transform: none;
}
uppercase: Minden szöveget nagybetűvé alakít.
.uppercase-text {
text-transform: uppercase;
}
lowercase: Minden szöveget kisbetűvé alakít.
.lowercase-text {
text-transform: lowercase;
}
capitalise: Minden szó első karakterét nagybetűvel írja.
.capitalize-text {
text-transform: capitalize;
}
Íme egy példa arra, hogyan használhatja a text-transform tulajdonságot a szöveg nagybetűvé alakítására:
.uppercase-text {
text-transform: uppercase;
}
Ebben a példában:
- A .text-indent-element osztály a szöveg első sorának behúzását 20 pixelre állítja be. Használhat más hosszegységeket is, például ems-t vagy százalékot.
A text-transform tulajdonság hasznos a szöveg konzisztenciájának fenntartásához, egy adott szövegformázási stílus érvényesítéséhez, valamint a weboldal tartalmának vizuális kialakításának javításához.