نمایش خبر

آشنایی با ویژگی text-transform در CSS

آشنایی با ویژگی text-transform در CSS

در ادامه سلسله مقالات آموزش CSS در این مقاله در مورد خصوصیت text-transform در سی اس اس صحبت خواهیم کرد.

با استفاده از ویژگی text-transform می توان تعیین کرد حروف و کلمات حروف از نظر کوچک و بزرگی در چه حالتی نمایش داده شوند.البته منظور از کوچک و بزرگی اندازه حروف نمی باشد بلکه صحبت از حروف کوچک و بزرگ در زبانی مثل زبان انگلیسی می باشد( بنابراین این ویژگی در زبان فارسی کاربردی ندارد).

مقادیر ویژگی text-transform

این ویژگی 5 مقدار را می پذیرد که انها را در کد زیر مشاهده می کنید:

text-transform: none | capitalize | uppercase | lowercase | full-width

none

این مقدار باعث می شود که این ویژگی هیچ تاثیری بر روی کاراکترها نداشته باشد.در واقع کاراکترها به همان صورتی نمایش داده خواهند شد که در کدهای html خود نوشته ایم.

capitalize

این مقدار حرف اول هر کلمه را بزرگ کرده و حروف دیگر کلمه همانطور که در HTML نوشته شده اند باقی می مانند.

uppercase

استفاده از این مقدار برای ویژگی text-transform باعث می شود همه حروف کلمه تبدیل به کاراکترهای بزرگ شوند.

lowercase

استفاده از این مقدار برای ویژگی text-transform باعث می شود همه حروف کلمه تبدیل به کاراکترهای کوچک شوند.

نکته : مقدار این ویژگی توسط فرزندان عنصر به ارث برده می شوند پس در نتیجه فرزندان عنصر نیز رفتار مشابهی برای کاراکترهایشان خواهند داشت. اگر نمی خواهید چنین اتفاقی بیافتد مقدار این ویژگی را برای فرزندان آن عنصر برابر با none قرار دهید.

در دموی زیر نحوه استفاده از ویژگی text-transform را مشاهده می کنید.

امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه آموزش های CSS با ما همراه باشید.

کامنت جدید ...
Sort by:

'