شرح السمة class

سمة class هي إحدى سمات عناصر HTML التي تستخدم لتحديد مجموعة من العناصر التي يتم تنسيقها بنفس الطريقة. يمكن استخدام السمة class للوصول إلى العناصر وتنسيقها باستخدام CSS، وكذلك لتطبيق سلوك خاص على العناصر باستخدام الجافا سكريبت.
يتم تعريف السمة class بوضع كلمة "class" في عنصر HTML وتعيين القيمة المناسبة لها. يمكن أن تتكون القيمة المعينة للسمة class من أي مجموعة من الأحرف والأرقام والرموز، ويفضل تسمية السمة بشيء يمكن فهمه بسهولة.
يمكن استخدام السمة class لتطبيق تنسيق محدد على مجموعة من العناصر HTML. ولتحديد عنصر HTML باستخدام السمة class يمكن استخدام النقطة (.) مع القيمة المعينة للسمة class. على سبيل المثال، إذا كان هناك مجموعة من الفقرات تحمل السمة class "paragraph"، يمكن استخدام CSS لتطبيق التنسيق عليها عن طريق الكتابة كما يلي:

HTML

<p class="paragraph">this is paragraph number 1</p>
<p class="paragraph">this is paragraph number 2</p>
<p class="paragraph">this is paragraph number 3</p>

الآن سنستدعي نفس القيمة الموجودة في السمة class وقبلها علامة الهاش (.) في لغة CSS:

CSS

.paragraph {
    font-size: 16px;
    color: #333;
    line-height: 1.5;
}

ويمكن استخدام السمة class أيضًا لتطبيق سلوك محدد على العناصر HTML باستخدام الجافا سكريبت. على سبيل المثال، يمكن استخدام الكود التالي في الجافا سكريبت لتحويل الصفحة إلى وضع الليلي عند الضغط على زر يحمل السمة class "toggle":

JavaScript

document.querySelector(".toggle").addEventListener("click", function() {
    document.body.classList.toggle("night-mode");
});

ويعتبر استخدام السمة class أحد الطرق الرئيسية لتحديد مجموعة من العناصر HTML في صفحات الويب، وتعتبر واحدة من الأدوات الأساسية لتنسيق وتحكم في التصميم والتنظيم العناصر في صفحات الويب. علاوة على ذلك، يمكن استخدام السمة class لتعيين أكثر من قيمة واحدة لنفس العنصر HTML، ويتم فصل كل قيمة بمسافة. على سبيل المثال، يمكن تعيين السمة class بالشكل التالي لعنصر HTML واحد:

HTML

<div class="box red-border large-text">content</div>

ويمكن استخدام CSS لتطبيق التنسيق المحدد على العنصر المعين بالشكل التالي:

CSS

.box {
    padding: 10px;
}

.red-border {
    border: 1px solid red;
}

.large-text {
    font-size: 20px;
}

بهذه الطريقة، يتم تطبيق تنسيق الحاوية العامة padding على جميع العناصر التي تحمل السمة class "box"، وتطبيق تنسيق الحدود الحمراء على العناصر التي تحمل السمة class "red-border"، وتطبيق حجم الخط الكبير على العناصر التي تحمل السمة class "large-text".
الخلاصة: تعد السمة class أداة مهمة لتنظيم العناصر في صفحات الويب وتحديد تنسيقات مختلفة لمجموعات من العناصر. ويمكن استخدامها بالتزامن مع CSS والجافا سكريبت لتحقيق التنسيق والسلوك المناسبين للعناصر الهامة في صفحات الويب.

وهكذا إنتهينا من درسنا أو مقالتنا المتواضعة أتمنى أنك فهمت و وفقك الله أتمنى دعمنا بمشاركة الدرس لكي تعم الفائدة.