منتدى الحاسب والجوال العربي
منتدى الحاسب والجوال العربي
كلمة الإدارة  

اهلاً وسهلاً، بك يا " ‏زائر "

نعتزر عن المشكلات التي حدثت في الفترة الفائتة كنا نجري إعادة تكويد وإزالة الصور التالفة والأكواد الزائدة لتقديم أفضل تجربة تصفح لك

أهلا وسهلا بك زائرنا الكريم, أنت لم تقم بتسجيل الدخول بعد! يشرفنا أن تقوم بالدخول أو التسجيل إذا رغبت بالمشاركة في المنتدى

hozaifa01

الدرس 7 في لغة CSS العناصر class وid

حذيفة احمد

حذيفة احمد

المدير العام
المدير العام
الدرس 7 في لغة CSS العناصر class وid Emptyالبلد البلد : الدرس 7 في لغة CSS العناصر class وid Sd10
الجنس : ذكر
عدد المساهمات : 1501
نقاط : 4362
مخالفات مخالفات : ليس لديه مخالفات
الدرس 7 في لغة CSS العناصر class وid

الدرس 7: المطابقة والتجميع للعناصر class وid
في بعض الأحيان تود أن تفعل خصائص ما على مجموعة أو فريق من العناصر، في هذ الدرس سنلقي نظرة على كيفية استخدام الفئات
الكود:
class
والمعرفات
الكود:
id
لتحديد خصائص معينة لعناصر مختارة.
كيف تختار لوناً محدداً لعنوان يختلف عن بقية العناوين في موقعك؟ كيف يمكنك أن تجمع بين روابط مختلفة وكل مجموعة تضعها في قسم مختلف وكل قسم له تصميم خاص؟ هذه أمثلة سنجيب عليها في هذا الدرس.

تجميع العناصر باستخدام الفئات "class"

لنقل بأن لدينا قائمتين من الروابط لأصناف مختلفة من الثمار، الخضار والفواكه، القائمتين في ملف HTML ستكونان بهذا الشكل:

الكود:

   <p>الخضار:</p>
   <ul>
   <li><a href="ab.htm">يقدونس</a></li>
   <li><a href="cd.htm">جزر</a></li>
   <li><a href="ef.htm">خيار</a></li>
   </ul>

   <p>فواكه:</p>
   <ul>
   <li><a href="gh.htm">تفاح</a></li>
   <li><a href="ij.htm">أناناس</a></li>
   <li><a href="kl.htm">بطيخ</a></li>
   </ul>
   



نريد أن تكون قائمة روابط الخضروات باللون الأصفر، وقائمة الفواكه باللون الأحر وبقية الروابط تبقى باللون الأزرق.
لإنجاز هذا نقسم الروابط إلى مجموعتين، يمكن فعل ذلك بتحديد فئة لكل رابط باستخدام الخاصية
الكود:
class
.
لنقم بتحديد فئات للمثال أعلاه:

الكود:

   <p>خضار:</p>
   <ul>
   <li><a href="ab.htm" class="veg">بقدونس</a></li>
   <li><a href="cd.htm" class="veg">جزر</a></li>
   <li><a href="ef.htm" class="veg">خيار</a></li>
   </ul>

   <p>فواكه:</p>
   <ul>
   <li><a href="gh.htm" class="fru">تفاح</a></li>
   <li><a href="ij.htm" class="fru">أناناس</a></li>
   <li><a href="kl.htm" class="fru">بطيخ</a></li>
   </ul>
   


يمكن الآن تحديد خصائص محددة للروابط التي تتبع فئة الخضروات أو الفواكه بهذا الشكل:

الكود:

   a {
      color: blue;
   }

   a.veg {
      color: #FFBB00;
   }

   a.fru {
      color: #800000;
   }
   



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

تحديد معرف خاص لعنصر معين من خلال id

بالإضافة إلى تجميع العناصر من خلال الفئات، لعلك ترغب في تحديد معرف لخاصية محددة، هذا يمكن إنجازه من خلال الخاصية
الكود:
id
.
المميز في الخاصية
الكود:
id
هو عدم إمكانية وجود عنصرين يستخدمانه في نفس الملف، أي لا يمكن لعنصرين أن يستخدما معرفاً
الكود:
id
واحداً في نفس الصفحة، كل معرف
الكود:
id
يجب أن يكون مميزاً وفريداً، أما غير ذلك فعليك استخدام الفئات
الكود:
class
، دعنا نلقي نظرة على مثال محتمل لكيفية استخدام المعرف
الكود:
id
:

الكود:

   <h1>فصل 1</h1>
   ...
   <h2>فصل 1.1</h2>
   ...
   <h2>فصل 1.2</h2>
   ...
   <h1>فصل 2</h1>
   ...
   <h2>فصل 2.1</h2>
   ...
   <h3>فصل 2.1.2</h3>
   ...
   


المثال أعلاه قد يكون عناوين لوثيقة ما تقسم الصفحة إلى أبواب وفصول، من الطبيعي أن نحدد لكل فصل معرفاً خاصاً
الكود:
id
كما في المثال الآتي:

الكود:

   <h1 id="c1">فصل 1</h1>
   ...
   <h2 id="c1-1">فصل 1.1</h2>
   ...
   <h2 id="c1-2">فصل 1.2</h2>
   ...
   <h1 id="c2">فصل 2</h1>
   ...
   <h2 id="c2-1">فصل 2.1</h2>
   ...
   <h3 id="c2-1-2">فصل 2.1.2</h3>
   ...
   


لنقل أن عنوان الفصل 1.2 يجب أن يكون باللون الأحمر، يمكن إنجاز ذلك في CSS بهذا الشكل:

الكود:

   #c1-2 {
      color: red;
   }
   



كما ترى في المثال أعلاه يمكن تحديد خصائص معينة لعنصر معين باستخدام #id في وثيقة التصميم.

#1 - كتب 11/1/2016, 10:52
https://h-mob.yoo7.com/ https://www.facebook.com/hozaifa01 https://twitter.com/hozaifa01

صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى

IP



جميع الحقوق محفوظة لـ © منتدى الحاسب والجوال العربي