text-transform

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

منظور اندازه حروف نیست بلکه صحبت از حروف کوچک و بزرگ مثلا زبانی مثل زبان انگلیسی می باشد.

 

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

 

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

 

 

 

 

none

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

 

capitalize

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

 

uppercase

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

 

lowercase

همه حروف کلمه تبدیل به کاراکترهای کوچک می شوند.

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

 
دموی زیر را بررسی کنید:

 

See the Pen text-transform by Mojtaba Seyedi (@seyedi) on CodePen.