تحويل النصوص (Text Transform) يسمح لك بالتحكم في طريقة عرض الحروف في النص، مثل جعلها كلها كبيرة أو كلها صغيرة أو جعل الحرف الأول كبيرًا.
1. جعل جميع الحروف كبيرة (Capital Letters)
نستخدم الخاصية text-transform مع القيمة uppercase.
مثال:
text-transform: uppercase;
هذا يحوّل كل الحروف إلى حروف كبيرة، سواءً كانت مكتوبة بحروف صغيرة أو كبيرة في الكود.
2. جعل جميع الحروف صغيرة
نستخدم:
text-transform: lowercase;
هذا يجعل كل الحروف تظهر بحروف صغيرة.
3. جعل أول حرف من كل كلمة كبير
نستخدم:
text-transform: capitalize;
في هذه الحالة، الحرف الأول من كل كلمة في النص سيصبح حرفًا كبيرًا.
4. عدم تغيير النص (الوضع الطبيعي)
لإبقاء النص كما هو مكتوب دون أي تحويل، نستخدم:
text-transform: none;
مثال عملي كامل
/* كل النص بحروف كبيرة */
h1 {
text-transform: uppercase;
}
/* كل النص بحروف صغيرة */
p {
text-transform: lowercase;
}
/* أول حرف من كل كلمة كبير */
h2 {
text-transform: capitalize;
}
الواجب العملي
- أنشئ عنوان (
<h1>) واجعله يظهر بحروف كبيرة باستخدامuppercase. - أنشئ فقرة (
<p>) واجعلها كلها بحروف صغيرة باستخدامlowercase. - أنشئ عنوان فرعي (
<h2>) وجعل أول حرف من كل كلمة كبيرًا باستخدامcapitalize. - لاحظ كيف يختلف شكل النص حسب التحويل الذي تطبقه.