📝 فهم سمة class في HTML: المفتاح السحري لتنسيق موقعك 🗝️

اليوم سنتعلم عن واحدة من أهم السمات في لغة HTML، وهي سمة class. هذه السمة هي بمثابة بطاقة تعريف أو علامة نضعها على العناصر، تسمح لنا بتجميعها وتنسيقها بطريقة سهلة ومنظمة. هيا بنا نكتشفها معاً! 🚀

🔍 ما هي سمة class؟

تخيل أن لديك مجموعة من الكتب 📚 في مكتبة. يمكنك وضع علامة (مثلاً ملصق أصفر) على جميع كتب القصص، وعلامة أخرى (مثلاً ملصق أزرق) على جميع كتب العلوم. سمة class في HTML تشبه هذه الملصقات تماماً!

  • الغرض: تُستخدم class لإعطاء اسم أو "فئة" لعنصر HTML واحد أو أكثر.
  • الاستخدام: نستخدمها عندما نريد تطبيق نفس التنسيق أو نفس السلوك على مجموعة من العناصر المتشابهة.
  • القاعدة: يمكن لعنصر واحد أن ينتمي إلى أكثر من class، ويمكن لـ class واحدة أن تُطبق على أكثر من عنصر.

ببساطة، الـ class هو وسيلتنا للقول: "يا CSS، جميع العناصر التي تحمل هذا الاسم، أريد أن تظهر بهذه الطريقة!" ✨

✏️ كيفية كتابة سمة class في HTML

كتابة سمة class بسيطة جداً. نضعها داخل وسم الفتح للعنصر الذي نريد إعطاءه هذه الفئة.

<p class="مهم">هذه فقرة مهمة.</p>
<div class="صندوق تنبيه">هذا صندوق تنبيه.</div>
<h2 class="عنوان-رئيسي مميز">هذا عنوان رئيسي مميز.</h2>

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

  1. القيمة: نكتب اسم الفئة بعد class= داخل علامتي اقتباس "".
  2. أسماء متعددة: يمكننا إعطاء العنصر أكثر من فئة واحدة، نفصل بينها بمسافة فقط (مثل المثال الثالث: "عنوان-رئيسي مميز").
  3. تسمية الفئات: يُفضل استخدام أسماء تصف الغرض من الفئة (مثل important, note, header) وليس الشكل (مثل red-text, big-font). هذا يجعل الكود أكثر وضوحاً وقابلية للصيانة.

🎨 ربط class مع CSS للتنسيق

الآن، كيف نستخدم هذه الفئة لتغيير الشكل؟ هذا هو دور CSS! نذهب إلى ملف CSS (أو قسم <style> داخل HTML) ونستهدف الفئة التي أنشأناها.

الطريقة: نكتب نقطة . ثم اسم الفئة، ثم نضع الأقواس المعقوفة {} وبداخلها خصائص التنسيق.

لنطبق ذلك على الأمثلة السابقة:

<!DOCTYPE html>
<html>
<head>
    <style>
        /* استهداف الفئة "مهم" وتطبيق لون أحمر */
        .مهم {
            color: red;
            font-weight: bold;
        }

        /* استهداف الفئة "صندوق" وتطبيق خلفية وخارج */
        .صندوق {
            background-color: lightblue;
            padding: 15px;
            border: 1px solid blue;
            margin: 10px;
        }

        /* استهداف الفئة "مميز" وتطبيق خط مائل */
        .مميز {
            font-style: italic;
        }
    </style>
</head>
<body>
    <p class="مهم">هذه الفقرة ستظهر باللون الأحمر والخط العريض.</p>
    <div class="صندوق">هذا الصندوق له خلفية زرقاء فاتحة وحواف.</div>
    <h2 class="عنوان-رئيسي مميز">هذا العنوان سيكون مائلاً (بسبب class="مميز").</h2>
    <p class="مهم صندوق">هذه الفقرة تجمع بين فئتين: ستكون حمراء وعريضة ولها خلفية صندوق!</p>
</body>
</html>

شرح المثال:

  • .مهم { color: red; } تخبر المتصفح: "جميع العناصر التي تحمل class="مهم"، اجعل لون نصها أحمر".
  • العنصر الأخير <p class="مهم صندوق"> يحمل فئتين، لذا سيطبق عليه جميع قواعد التنسيق الخاصة بكل من .مهم و .صندوق.

⚖️ class مقابل id: ما الفرق؟

قد تتساءل: أليس لدينا سمة id أيضاً؟ نعم، لكن هناك فرقاً كبيراً وجوهرياً:

الميزة class id
التكرار يمكن استخدامه مرات عديدة في الصفحة. يجب أن يكون فريداً ولا يتكرر في الصفحة.
الرمز في CSS نستهدفه بنقطة . (مثال: .my-class) نستهدفه بعلامة المربع # (مثال: #my-id)
الغرض الرئيسي التنسيق: تجميع عناصر متعددة لتنسيقها بنفس الطريقة. التعريف الفريد: تحديد عنصر واحد دقيق للربط أو للتعامل معه بـJavaScript.

خلاصة: استخدم class عندما تريد تطبيق نفس الشكل على مجموعة عناصر. استخدم id عندما تريد تحديد عنصر واحد محدد بشكل فريد (مثل ربط رابط بقسم معين في الصفحة).

🧪 مثال عملي بسيط: تنسيق قائمة مهام

لنرى كيف يمكن لـ class أن ينظم صفحتنا. سننشئ قائمة مهام بسيطة:

<!DOCTYPE html>
<html>
<head>
    <style>
        .task {
            padding: 10px;
            margin: 5px;
            border-left: 5px solid grey;
        }
        .completed {
            border-left-color: green;
            text-decoration: line-through;
            color: #888;
            background-color: #f0fff0;
        }
        .urgent {
            border-left-color: red;
            font-weight: bold;
            background-color: #fff0f0;
        }
    </style>
</head>
<body>
    <h2>قائمة المهام 📋</h2>
    <div class="task">شراء الخضروات</div>
    <div class="task completed">كتابة تقرير العمل ✅</div>
    <div class="task urgent">اتصال هام بالمكتب</div>
    <div class="task urgent completed">تسليم المشروع النهائي ✅</div>
</body>
</html>

في هذا المثال:

  • كل مهمة لها class="task" لتعطيها الشكل الأساسي (حشوة وحافة).
  • المهام المكتملة تأخذ class="completed" لتعطيها خطاً في المنتصف ولوناً أخضر.
  • المهام العاجلة تأخذ class="urgent" لتظهر باللون الأحمر والخط العريض.
  • المهمة الأخيرة تجمع بين urgent و completed، فتأخذ خصائص كلا الفئتين! هذا يظهر قوة استخدام أكثر من class.

🎯 خلاصة الدرس

تعلمنا اليوم أن سمة class هي:

  1. وسيلة تجميع: لوضع عناصر متعددة في مجموعة واحدة.
  2. أداة تنسيق: لاستهداف هذه المجموعات بسهولة عبر CSS وتطبيق أنماط متطابقة عليها.
  3. قابلة للتكرار: يمكن استخدام نفس اسم الفئة مرات عديدة في الصفحة.
  4. قابلة للجمع: يمكن للعنصر الواحد الانتماء إلى عدة فئات.

تذكر: التفكير في تقسيم عناصر صفحتك إلى "فئات" منطقية هو الخطوة الأولى نحو تصميم ويب منظم وسهل الصيانة. 🏗️