دليل HTML

مجملة HTML

خصائص class في HTML

قيمة الخاصية class هي قائمة بالفئات (classes) للعنصر المفصولة بالفضاءات، مما يسمح للCSS والJavaScript بالاختيار والوصول إلى العناصر المحددة باستخدام مبدأ الاختيار الفئوي (class selectors) أو طرق DOM (document.getElementsByClassName).

خصائص العالمية لـ HTML

مثال على الإنترنت

استخدام خصائص class في مستند HTML:

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>موقع دروس الأساسيات (oldtoolbag.com)</title>
<style>
h1.intro {
　　　　color: blue;
}
p.important {
　　　　color: green;
}
</style>
</head>
<body>
<h1 class="intro">عنوان 1</h1>
<p>فقرة.</p>
<p class="important">لاحظ أن هذا هو فقرة مهمة. :)</p>
</body>
</html>

اختبار لـ ‹/›

على الرغم من عدم وجود متطلبات لاسم فئة class، يفضل مطورو الويب استخدام الأسماء التي تعبر عن الغرض السيميائي للعنصر بدلاً من الأسماء التي تصف الطريقة التي يتم عرض العنصر بها (حتى لو كان العنصر مائلًا، فإن اسم فئة class لا يجب أن يكون italics). يجب أن تكون الأسماء السيميائية منطقية حتى لو تغيرت طريقة عرض الصفحة.

تطابق المتصفحات

IEFirefoxOperaChromeSafari

دعم جميع المتصفحات الشائعة لخصائص class

التعريف والاستخدام

تُحدد خصائص class اسم الفئة للعنصر.

تُحدد خصائص class اسمًا أو أكثر من الفئات للعنصر.

خصائص class عادةً تستخدم للإشارة إلى جدول الأنماط. ولكن، يمكن استخدام JavaScript أيضًا من خلال HTML DOM لتغيير العناصر HTML التي تحتوي على فئة معينة.

الفرق بين HTML 4.01 و HTML5

في HTML5، يمكن استخدام خاصية class في أي عنصر HTML (سيكون تأكيد أي عنصر HTML. ولكن ليس بالضرورة أن يكون مفيدًا).

في HTML 4.01، لا يمكن استخدام خاصية class في: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, و <title>.

النحو

　　 <element>

قيمة الخاصية

القيمة	الوصف
classname	تحديد اسم الكلاس للعنصر. إذا كنت ترغب في تحديد عدة كلاسات لعدة عناصر، فاستخدم مسافات بين الأسماء. <span>. العنصر HTML يسمح باستخدام عدة كلاسات. قواعد الاسم: يجب أن يبدأ بـ A-Z أو a-z يمكن أن يكون التالي: (A-Za-z)، أرقام (0-9)، العارضة ("-")، وأسطر ("_") في HTML، اسم الكلاس هو معتمد على الحالة

مزيد من الأمثلة

إضافة عدة كلاسات إلى العنصر
كيفية إضافة عدة كلاسات في عنصر HTML.

خصائص العالمية لـ HTML

HTML: <template> العنوان