CSS - Text تنسيق النصوص

CSS - تنسيق النصوص (Text Styling)

🔸 توفّر CSS مجموعة كبيرة من الخصائص لتنسيق النصوص، من حيث المحاذاة، الزخرفة، التحويل، المسافات، والظل.

1️⃣ خاصية color

تُستخدم لتحديد لون النص.

p {
  color: blue;
}

2️⃣ خاصية text-align

تُستخدم لمحاذاة النص داخل العنصر.

• left: المحاذاة لليسار
• right: المحاذاة لليمين
• center: في المنتصف
• justify: ضبط النص على كلا الطرفين

p {
  text-align: justify;
}

3️⃣ خاصية text-decoration

تُستخدم لإضافة زخرفة للنص مثل خط أسفل أو شطب.

• none: بدون زخرفة
• underline: خط أسفل النص
• overline: خط أعلى النص
• line-through: شطب على النص

a {
  text-decoration: underline;
}

4️⃣ خاصية text-transform

تتحكم في طريقة عرض الحروف (كبيرة/صغيرة).

• uppercase: تحويل كل الحروف إلى كبيرة
• lowercase: تحويل كل الحروف إلى صغيرة
• capitalize: جعل أول حرف من كل كلمة كبيرًا

h1 {
  text-transform: uppercase;
}

5️⃣ خصائص المسافات بين الأحرف والكلمات

تشمل:

• letter-spacing: المسافة بين الحروف
• word-spacing: المسافة بين الكلمات

p {
  letter-spacing: 2px;
  word-spacing: 5px;
}

6️⃣ خاصية text-shadow

تُستخدم لإضافة ظل للنص، وتأخذ القيم التالية:

• الإزاحة الأفقية
• الإزاحة العمودية
• درجة التمويه
• لون الظل

h1 {
  text-shadow: 2px 2px 5px gray;
}

💡 ملاحظات مهمة

• التنسيق الجيد للنصوص يُحسن تجربة المستخدم بشكل كبير.
• يفضل تجربة القيم المختلفة للوصول إلى أفضل مظهر.
• يمكن دمج الخصائص للحصول على تأثيرات مخصصة واحترافية.