✨ تحويل وتزيين النصوص في CSS: اجعل نصوصك أكثر جاذبية! 🎨

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

🧩 ما هي خاصية text-transform؟

خاصية text-transform تسمح لك بالتحكم في حالة الأحرف (Capitalization) للنص دون الحاجة لتغيير النص الأصلي في ملف HTML. هذا مفيد جداً للحفاظ على تناسق المظهر في موقعك بالكامل.

/* مثال أساسي لـ text-transform */
.heading {
    text-transform: uppercase; /* يحول كل الحروف لكبيرة */
}

.subtitle {
    text-transform: lowercase; /* يحول كل الحروف لصغيرة */
}

.name {
    text-transform: capitalize; /* يحول أول حرف من كل كلمة لكبير */
}

🔤 قيم خاصية text-transform الشائعة

هناك أربع قيم رئيسية يمكنك استخدامها مع هذه الخاصية:

  1. none (الافتراضي): يعرض النص كما هو مكتوب في HTML.
  2. uppercase: يحول جميع الأحرف إلى كبيرة (A B C).
  3. lowercase: يحول جميع الأحرف إلى صغيرة (a b c).
  4. capitalize: يحول أول حرف من كل كلمة إلى حرف كبير.
/* مثال تطبيقي */
p.normal {
    text-transform: none; /* النص: Hello World -> Hello World */
}

p.upper {
    text-transform: uppercase; /* النص: Hello World -> HELLO WORLD */
}

p.lower {
    text-transform: lowercase; /* النص: Hello World -> hello world */
}

p.cap {
    text-transform: capitalize; /* النص: hello world -> Hello World */
}

🖌️ ما هي خاصية text-decoration؟

خاصية text-decoration تستخدم لإضافة خطوط زخرفية فوق النص أو تحته أو خلاله. أشهر استخدام لها هو إزالة الخط التحتي من الروابط (<a>)، ولكن بإمكانها فعل أكثر من ذلك بكثير!

/* إزالة الخط التحتي من الروابط (استخدام شائع) */
a {
    text-decoration: none;
}

🎯 خصائص text-decoration المفصلة

في الإصدارات الحديثة من CSS، أصبح بإمكاننا التحكم بكل جانب من جوانب الزخرفة على حدة باستخدام الخصائص التالية:

  1. text-decoration-line: يحدد نوع الخط (تحت، فوق، خلال النص).
  2. text-decoration-color: يحدد لون الخط.
  3. text-decoration-style: يحدد نمط الخط (صلب، متقطع، etc.).
  4. text-decoration-thickness: يحدد سمك الخط.
/* أمثلة على text-decoration-line */
.underline {
    text-decoration-line: underline; /* خط تحت النص */
}

.overline {
    text-decoration-line: overline; /* خط فوق النص */
}

.line-through {
    text-decoration-line: line-through; /* خط في منتصف النص (شطب) */
}

/* دمج أكثر من خط */
.under-over {
    text-decoration-line: underline overline; /* خط فوق وتحت النص */
}

/* أمثلة على text-decoration-style */
.solid-line {
    text-decoration-line: underline;
    text-decoration-style: solid; /* خط صلب (افتراضي) */
}

.dotted-line {
    text-decoration-line: underline;
    text-decoration-style: dotted; /* خط منقط */
}

.wavy-line {
    text-decoration-line: underline;
    text-decoration-style: wavy; /* خط متموج */
}

🌟 مثال شامل يجمع بين الخصائص

لنطبق ما تعلمناه في مثال عملي واحد يجمع بين هذه الخصائص لإنشاء تنسيق نصي جميل.

<!-- HTML -->
<p class="fancy-heading">مرحباً بك في موقعي</p>
<a href="#" class="nice-link">انقر هنا للمزيد</a>

/* CSS */
.fancy-heading {
    text-transform: uppercase;
    text-decoration-line: overline underline;
    text-decoration-color: #3498db;
    text-decoration-style: wavy;
    text-decoration-thickness: 2px;
}

.nice-link {
    text-decoration: none; /* الطريقة المختصرة لإزالة الخط */
    color: #e74c3c;
    font-weight: bold;
}

في هذا المثال، قمنا بتحويل عنوان الفقرة إلى أحرف كبيرة وإضافة خط متموج أزرق اللون فوقه وتحته. كما أزلنا الخط التحتي القياسي من الرابط وجعلناه بلون مختلف وسميك.

💡 ملخص سريع

  • text-transform: تتحكم في حالة الأحرف (كبيرة/صغيرة).
  • text-decoration-line: تحدد مكان الخط الزخرفي (تحت/فوق/خلال النص).
  • text-decoration-style: تحدد نمط الخط (صلب/منقط/متموج).
  • يمكنك استخدام الخاصية المختصرة text-decoration لتعيين كل شيء في سطر واحد.