فئات HTML

فئات اتش تي ام ال  Html Classes


يتم استخدام سمة class لتحديد أنماط متساوية للعناصر التي لها نفس اسم الفئة.

لذلك ستحصل جميع عناصر HTML التي لها نفس سمة الفئة على نفس النمط.

لدينا هنا ثلاثة عناصر <div> تشير إلى نفس اسم الفئة:

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
  background-color: gray;
  color: white;
  margin: 25px;
  padding: 2520px;
} 
</style>
</head>
<body>

<div class="cities">
  <h2>طرابلس</h2>
</div>

<div class="cities">
  <h2>مصراته </h2>
</div>

<div class="cities">
  <h2>زوارة</h2>
</div>

</body>
</html>

 


استخدام السمة class على العناصر المضمنة

يمكن أيضًا استخدام سمة class في العناصر المضمّنة:

<!DOCTYPE html>
<html>
<head>
<style>
span.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1> عنوان <span class="note">هام</span> جدا </h1>
<p>هذا نص <span class="note">هام</span> جدا.</p>

</body>

تلميح: يمكن استخدام سمة class على أي عنصر HTML

ملاحظة: اسم class حساس لحالة الأحرف!


عناصر مع فئة محددة

في CSS لتحديد عناصر مع فئة معينة اكتب حرف (.) متبوعًا باسم الفئة:

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 
</style>
</head>
<body>

<h2 class="city"> طرابلس </h2>

<h2 class="city"> مصراته </h2>

<h2 class="city"> زوارة </h2>

</body>

 


فئات متعددة

يمكن أن تحتوي عناصر HTML على أكثر من اسم فئة ويجب فصل كل اسم فئة بمسافة.

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 
.main {
   text-align: center;
} 
</style>
</head>
<body>

<h2 class="city main"> طرابلس </h2>

<h2 class="city"> مصراته </h2>

<h2 class="city"> زوارة </h2>

</body>

في المثال أعلاه ينتمي أول عنصر <h2> إلى كل من فئة "المدينة" والفئة "الرئيسية".


علامات مختلفة بنفس الفئة

يمكن أن يكون للعلامات المختلفة مثل <h2> و <p>اسم الفئة نفسه، وبالتالي تشترك في نفس النمط:

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 

</style>
</head>
<body>

<h2 class="city main"> طرابلس </h2>

<p class="city">عاصمة ليبيا</p>

</body>

دروس لغة Html اخرى