أحدث البرامج التعليمية وتطوير الشبكة
 

HTML class Attribute

❮ السابق التالي ❯

مثال

استخدام من class سمة في وثيقة HTML:

<html>
<head>
<style>
h1.intro {
    color: blue;
}

p.important {
    color: green;
}
</style>
</head>
<body>

<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph. :)</p>

</body>
</html>
انها محاولة لنفسك »

أكثر "انها محاولة لنفسك" الأمثلة أدناه.

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

و class تحدد سمة واحدة أو أكثر classnames لعنصر.

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

دعم المتصفح

السمة
class نعم فعلا نعم فعلا نعم فعلا نعم فعلا نعم فعلا

الخلافات بين HTML 4.01 و HTML5

في HTML5، و class السمة يمكن استخدامها علىأي عنصر HTML (سوف تحقق على أي عنصر HTML. ومع ذلك، فإنه ليس من المفيد بالضرورة).

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

بناء الجملة

<elementclass="classname">

السمة القيم

القيمة وصف
classname يحدد واحدة أو أكثر من أسماء فئة لعنصر. لتحديد فئات متعددة، فصل أسماء فئة مع الفضاء، على سبيل المثال <span class="left important"> . هذا يسمح لك الجمع بين عدة فئات المغلق للعنصر HTML واحدة.

قواعد التسمية:

  • يجب أن تبدأ بحرف AZ أو az
  • يمكن أن تتبعها: رسائل (A-Za-z) ، الأرقام (0-9) ، الواصلات ("-") ، وسفلية ("_")
  • في HTML، كل القيم حساسة لحالة الأحرف

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

مثال

إضافة فئات متعددة لعنصر HTML واحد:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
    color: blue;
    text-align: center;
}

.important {
    background-color: yellow;
}
</style>
</head>
<body>

<h1 class="intro important">Header 1</h1>
<p>A paragraph.</p>

</body>
</html>
انها محاولة لنفسك »

صفحات ذات صلة

درس HTML: سمات HTML

CSS دروس: CSS المختارون

CSS المرجعي: CSS .class محدد

HTML DOM المرجعي: HTML DOM getElementsByClassName() الطريقة

HTML DOM المرجعي: HTML DOM className الملكية

HTML DOM المرجعي: HTML DOM classList الملكية

HTML DOM المرجعي: كائن HTML DOM ستايل


❮ السابق التالي ❯