خاصية text في CSS ليست خاصية واحدة، بل هي مجموعة من الخصائص تُستخدم لتنسيق النصوص في صفحات الويب. هذه الخصائص تُتيح لك التحكم في مظهر النص من حيث اللون، المحاذاة، المسافة بين الأحرف والأسطر، التزيين (مثل وضع خط تحت النص)، وغيرها.

سأشرح لك أهم خصائص text في CSS:

1. لون النص (color):

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

  • أسماء الألوان (مثل red، blue، green).
  • قيم Hex (مثل #FF0000 للأحمر).
  • قيم RGB (مثل rgb(255, 0, 0) للأحمر).
  • قيم HSL (مثل hsl(0, 100%, 50%) للأحمر).

مثال:

CSS
p {
  color: blue; /* نص الفقرة باللون الأزرق */
}

h1 {
  color: #333; /* عنوان المستوى الأول بلون رمادي داكن */
}

2. محاذاة النص (text-align):

تُستخدم لتحديد محاذاة النص أفقيًا. القيم المُمكنة:

  • left: محاذاة إلى اليسار (القيمة الافتراضية).
  • right: محاذاة إلى اليمين.
  • center: توسيط النص.
  • justify: ضبط النص، أي توزيع المسافات بين الكلمات لجعل سطور النص بنفس الطول.

مثال:

CSS
div {
  text-align: center; /* توسيط النص داخل div */
}

3. تزيين النص (text-decoration):

تُستخدم لإضافة أو إزالة تأثيرات تزيينية للنص. القيم المُمكنة:

  • none: لا يوجد تزيين (تُستخدم لإزالة الخط الافتراضي تحت الروابط).
  • underline: وضع خط تحت النص.
  • overline: وضع خط فوق النص.
  • line-through: وضع خط وسط النص.

مثال:

CSS
a {
  text-decoration: none; /* إزالة الخط تحت الروابط */
}

p {
  text-decoration: underline; /* وضع خط تحت نص الفقرة */
}

يمكن أيضًا استخدام text-decoration كخاصية مُختصرة لتحديد لون ونمط الخط معًا:

CSS
a {
  text-decoration: underline red dotted; /* خط أحمر مُنقط تحت الرابط */
}

4. تحويل حالة الأحرف (text-transform):

تُستخدم لتغيير حالة الأحرف في النص. القيم المُمكنة:

  • uppercase: تحويل النص إلى أحرف كبيرة.
  • lowercase: تحويل النص إلى أحرف صغيرة.
  • capitalize: تحويل الحرف الأول من كل كلمة إلى حرف كبير.
  • none: لا تغيير (القيمة الافتراضية).

مثال:

CSS
h2 {
  text-transform: uppercase; /* تحويل عنوان المستوى الثاني إلى أحرف كبيرة */
}

5. المسافة البادئة للسطر الأول (text-indent):

تُستخدم لتحديد مسافة بادئة للسطر الأول من النص داخل عنصر. تُستخدم عادةً مع الفقرات.

مثال:

CSS
p {
  text-indent: 20px; /* مسافة بادئة 20 بكسل للسطر الأول من الفقرة */
}

6. تباعد الأحرف (letter-spacing):

تُستخدم لتحديد المسافة بين الأحرف في النص.

مثال:

CSS
h3 {
  letter-spacing: 2px; /* مسافة إضافية 2 بكسل بين الأحرف */
}

7. تباعد الكلمات (word-spacing):

تُستخدم لتحديد المسافة بين الكلمات في النص.

مثال:

CSS
p {
  word-spacing: 5px; /* مسافة إضافية 5 بكسل بين الكلمات */
}

8. ارتفاع السطر (line-height):

تُستخدم لتحديد المسافة بين سطور النص. تُؤثر على قراءة النص بشكل كبير.

مثال:

CSS
p {
  line-height: 1.5; /* ارتفاع السطر 1.5 ضعف حجم الخط */
}

باستخدام هذه الخصائص، يمكنك التحكم بشكل كامل في مظهر النص في صفحات الويب وجعله أكثر جاذبية ووضوحًا. من المهم فهم هذه الخصائص واستخدامها بشكل مناسب لتحسين تجربة المستخدم.