تغییر بزرگی و کوچکی حروف در 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 می‌توانید از مقادیر رایج زیر استفاده کنید:

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

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