خصائص الصفحة HTML

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

class يحدد هذا الخصائص اسم الصفحة (classname).

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

انظر أيضًا إلى:

دليل تعليم HTML:خصوصیات HTML

دليل تعليم CSS:قواعد CSS

دليل CSS:انتخابگر .class CSS

دليل HTML DOM:مетод HTML DOM getElementsByClassName()

دليل HTML DOM:خصائص HTML DOM className

دليل HTML DOM:خصائص HTML DOM classList

دليل HTML DOM:مجموعه Style DOM HTML

مثال

مثال 1

استخدام خاصية 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">لاحظوا، هذا هو فقرة مهمة.:)</p>
</body>
</html>

جرب الآن

يقدم لك الموقع أدناه أمثلة إضافية.

النحو

<element class="classname">

قيمة الخاصية

القيمة الوصف
classname

تحديد اسم أو عدة أسماء كلاسات للعنصر.

إذا كنت ترغب في تحديد عدة كلاسات، يمكنك فصل الأسماء بالفضاءات.

هذا يسمح لك بتجميع عدة كلاسات لعدة عناصر HTML.

على سبيل المثال：<span class="left important">

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

  • يجب أن تبدأ بالحرف A-Z أو a-z.
  • يمكن أن يتبعها: الأحرف (A-Za-z)、الأرقام (0-9)、الخط المائل ("-") وأشرطة السيناريو ("_").

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

مثال 2

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

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">عنوان 1</h1>
<p>فقرة واحدة.</p>
</body>
</html>

جرب الآن

مثال 3

استخدام JavaScript لإضافة لون الخلفية الأصفر إلى العنصر الأول الذي يحتوي على class="example" (الواقع 0).

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

جرب الآن

مثال 4

استخدام JavaScript برای افزودن کلاس "mystyle" به عنصر با شناسه "myDIV":

document.getElementById("myDIV").classList.add("mystyle");

جرب الآن

دعم المتصفحات

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم