تسجيل الدخول | تسجيل

الدورات التدريبية| HTML

  1. الرئيسية


الدرس السابع

الفئات    Classes:

 

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

 ستحصل جميع العناصر التي لديها نفس اسم الفئة علي نفس تنسيق الأنماط  style.

 

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

<div class="cities">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="cities">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="cities">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

 

 

             block  الطريقة السابقة تستخدم لعناصر المحتوي

 

 اما العناصر المضمنة inline Elements   تكتب اسم الفئة بالطريقة التالية .

 

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

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

<*/body>
<*/html>

 

 

 

 

يمكن ان يحتوي العنصر الواحد علي اكثر من اسم فئة بشرط الفصل بينها بمسافة

 

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

 

 

                                                             

لا يشترط في اسم الفئة في النمط ان تكون العناصر من نفس النوع يمكن ان تشترك عناصر مختلفة في نفس اسم الفئة .

 

<h2 class="city">Khartoum</h2>
<p class="city"> Khartoum is the capital of Sudan</p>