تبدیل متن (Text Transformation)
«تبدیل متن (Text Transformation)» یعنی نمایش حروف با حالت دلخواه. بدون تغییر متنِ اصلی در HTML، می توان حروف را بزرگ، کوچک، یا کلمه ها را سربزرگ کرد.
تعریف ویژگی text-transform
ویژگی «text-transform» حالت حروف را کنترل می کند. این ویژگی متن را در خروجی بزرگ حرف، کوچک حرف، یا «ابتدای هر کلمه بزرگ» نشان می دهد. محتوا در HTML تغییر نمی کند.
مقادیر اصلی text-transform
none— بدون تغییر. متن همان طور نمایش داده می شود.capitalize— حرف اول هر کلمه بزرگ می شود.uppercase— همه حروف بزرگ می شوند.lowercase— همه حروف کوچک می شوند.
مثال عملی: تبدیل حروف با CSS
سه کلاس مختلف می سازیم و روی پاراگراف ها اعمال می کنیم.
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
<p class="uppercase">hello world</p>
<p class="lowercase">Hello World</p>
<p class="capitalize">hello world</p>
گام های عملی سریع
- عنصر هدف را انتخاب کن.
- کلاس مناسب را تعریف کن.
- مقدار text-transform را تنظیم کن.
برای موضوعات نزدیک، صفحه تزئین متن و تراز متن را هم ببین.
جمع بندی سریع
- text-transform فقط نمایش را عوض می کند.
- uppercase همه را بزرگ می کند.
- lowercase همه را کوچک می کند.
- capitalize اول هر کلمه را بزرگ می کند.
- none یعنی بدون تغییر.