آموزش اسکرچ به صورت آنلاین

تغییر بزرگی و کوچکی حروف در CSS – ویژگی text-transform

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

نحوه استفاده از ویژگی text-transform و تغییر حالت حروف در CSS

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

h1 {
  text-transform: uppercase;
}

در مثال بالا مقدار uppercase برای این ویژگی باعث می‌شود حروف هدینگ های سطح اول (المان های <h1>) به حروف بزرگ تبدیل شود. فرض کنید یک المان <h1> به صورت زیر در یک سند HTML قرار دارد:

<h1>Heading 1</h1>

در تصویر زیر می‌توانید نتیجه قانون CSS فوق روی این المان <h1> را مشاهده کنید.

نتیجه استفاده از ویژگی text-transform در CSS برای بزرگ کردن حروف متن

برای ویژگی text-transform می‌توانید از مقادیر رایج زیر استفاده کنید:

  • none: این مقدار، مقدار پیشفرض برای ویژگی text-transform است و بزرگی و کوچکی حروف متن را تغییر نمی‌دهد.
  • capitalize: این مقدار، کاراکتر اول تمام کلمات را به حروف بزرگ (یا uppercase) تبدیل می‌کند. سایر حروف کلمات به همان شکلی که هستند باقی می‌ماند.
  • uppercase: این مقدار، تمام کاراکترها را به حروف بزرگ تبدیل می‌کند.
  • lowercase: این مقدار، تمام کاراکترها را به حروف کوچک (یا lowercase) تبدیل می‌کند.

بازگشت به فهرست مجموعه آموزشی CSS

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *