منتدى الابداع العربي

للإبداع لمسات ! ... ولمسـات الإبــداع إختصاصـنا !
 
الرئيسيةالرئيسية  المنشوراتالمنشورات  البوابةالبوابة  التسجيلالتسجيل  دخولدخول  


المطابقة والتجميع للعناصر class وid
 

 المطابقة والتجميع للعناصر class وid

اذهب الى الأسفل 
كاتب الموضوعرسالة
JoryAbdallah
سوبر الإبداع 

JoryAbdallah

انثى
السمك
عدد المساهمات : 126400
نقاط النشاط : 142117
السٌّمعَة : 3006
بلد العضو : المطابقة والتجميع للعناصر class وid Saudi-10
العمر : 35

المطابقة والتجميع للعناصر class وid Empty
مُساهمةموضوع: المطابقة والتجميع للعناصر class وid   المطابقة والتجميع للعناصر class وid Emptyالإثنين نوفمبر 28, 2016 11:34 pm

المطابقة والتجميع للعناصر 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

في وثيقة التصميم.

ملخص

في هذا الدرس تعلمنا كيف نستخدم المنتقي من نوع
الكود:
class
و
الكود:
id
، يمكنك الآن أن تحدد خصائص محددة لعناصر معينة.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://taqnyiat.ahlamontada.com/
Âñå ÀsLń Môŝibă
عضو محترف 

Âñå ÀsLń Môŝibă

انثى
القوس
عدد المساهمات : 1202
نقاط النشاط : 1287
السٌّمعَة : 8
بلد العضو : المطابقة والتجميع للعناصر class وid Algeri10
العمر : 19

المطابقة والتجميع للعناصر class وid Empty
مُساهمةموضوع: رد: المطابقة والتجميع للعناصر class وid   المطابقة والتجميع للعناصر class وid Emptyالأربعاء ديسمبر 28, 2016 2:04 pm

شكرا جزاكي الله خيرا


اتمنى ان اكون سبب سعادة لمن حولي
وأن لااكون وجعا لاحد
...ربماآ انا لااستطيع إسعآد أحد ..ولكن اقسم انني لا احب ايذاء احد
الرجوع الى أعلى الصفحة اذهب الى الأسفل
BouJemAA
عضو ذهبي 

BouJemAA

ذكر
عدد المساهمات : 2452
نقاط النشاط : 3670
السٌّمعَة : 29
بلد العضو : المطابقة والتجميع للعناصر class وid Morocc10

المطابقة والتجميع للعناصر class وid Empty
مُساهمةموضوع: رد: المطابقة والتجميع للعناصر class وid   المطابقة والتجميع للعناصر class وid Emptyالخميس ديسمبر 29, 2016 8:59 pm

بارك الله فيك


المطابقة والتجميع للعناصر class وid Untitl15
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Mr Robot
سوبر الإبداع 

Mr Robot

ذكر
القوس
عدد المساهمات : 35481
نقاط النشاط : 37581
السٌّمعَة : 108
بلد العضو : المطابقة والتجميع للعناصر class وid Lebano10
العمر : 35

المطابقة والتجميع للعناصر class وid Empty
مُساهمةموضوع: رد: المطابقة والتجميع للعناصر class وid   المطابقة والتجميع للعناصر class وid Emptyالثلاثاء مارس 21, 2017 2:01 am

بارك الله بيك
واصل
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Princess Abir
عضو ذهبي 

Princess Abir

انثى
الثور
عدد المساهمات : 2130
نقاط النشاط : 2168
السٌّمعَة : 9
بلد العضو : المطابقة والتجميع للعناصر class وid Algeri10
العمر : 20

المطابقة والتجميع للعناصر class وid Empty
مُساهمةموضوع: رد: المطابقة والتجميع للعناصر class وid   المطابقة والتجميع للعناصر class وid Emptyالثلاثاء مارس 21, 2017 2:02 am

طرح مميز يعطيك العافية


المطابقة والتجميع للعناصر class وid 21484110
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.ibda3araby.com
abuahmad
عضو محترف 

abuahmad

ذكر
السرطان
عدد المساهمات : 1485
نقاط النشاط : 1637
السٌّمعَة : 4
العمر : 54

المطابقة والتجميع للعناصر class وid Empty
مُساهمةموضوع: رد: المطابقة والتجميع للعناصر class وid   المطابقة والتجميع للعناصر class وid Emptyالأربعاء مايو 10, 2017 9:13 am

موضوع رائع



وطرح مميز



شكرا

الرجوع الى أعلى الصفحة اذهب الى الأسفل
Picasso-Des
سوبر الإبداع 

Picasso-Des

ذكر
الجدي
عدد المساهمات : 10775
نقاط النشاط : 11119
السٌّمعَة : 136
بلد العضو : المطابقة والتجميع للعناصر class وid Ioao10
العمر : 37

المطابقة والتجميع للعناصر class وid Empty
مُساهمةموضوع: رد: المطابقة والتجميع للعناصر class وid   المطابقة والتجميع للعناصر class وid Emptyالسبت يونيو 16, 2018 11:15 pm

يعطيكم العافية على الطرح المطابقة والتجميع للعناصر class وid 837876428
كل الاحترام المطابقة والتجميع للعناصر class وid 433646733
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://medialive.pro
Mohamed Sobhi
عضو ذهبي 

Mohamed Sobhi

ذكر
الاسد
عدد المساهمات : 3330
نقاط النشاط : 3996
السٌّمعَة : 57
بلد العضو : المطابقة والتجميع للعناصر class وid Egypt10
العمر : 24

المطابقة والتجميع للعناصر class وid Empty
مُساهمةموضوع: رد: المطابقة والتجميع للعناصر class وid   المطابقة والتجميع للعناصر class وid Emptyالسبت يوليو 21, 2018 11:45 am

درس اكثر من رائع شكرا لك على الطرح
لا تحرمنا من جديدك وردة حمراء


المطابقة والتجميع للعناصر class وid P_947wjtlk1
الرجوع الى أعلى الصفحة اذهب الى الأسفل
مصطفى ستيتان
عضو محترف 

مصطفى ستيتان

ذكر
عدد المساهمات : 1130
نقاط النشاط : 1203
السٌّمعَة : 11
بلد العضو : المطابقة والتجميع للعناصر class وid Ioao10

المطابقة والتجميع للعناصر class وid Empty
مُساهمةموضوع: رد: المطابقة والتجميع للعناصر class وid   المطابقة والتجميع للعناصر class وid Emptyالإثنين يوليو 23, 2018 9:04 am

جزاكم الله كل خير 


سبحان الله والحمدلله ولا إله إلا الله 
 
المطابقة والتجميع للعناصر class وid Do
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.elmanal.com
D.YouSSef
سوبر الإبداع 

D.YouSSef

ذكر
الدلو
عدد المساهمات : 6124
نقاط النشاط : 7079
السٌّمعَة : 34
بلد العضو : المطابقة والتجميع للعناصر class وid Morocc10
العمر : 52

المطابقة والتجميع للعناصر class وid Empty
مُساهمةموضوع: رد: المطابقة والتجميع للعناصر class وid   المطابقة والتجميع للعناصر class وid Emptyالخميس أغسطس 30, 2018 3:49 am

جزاك الله خيراعلى العطاء
والدرس الجميل والمفيد
 واصل تالقك
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Abir_ Dj
عضو ذهبي 

Abir_ Dj

انثى
الثور
عدد المساهمات : 2032
نقاط النشاط : 2095
السٌّمعَة : 8
بلد العضو : المطابقة والتجميع للعناصر class وid Algeri10
العمر : 20

المطابقة والتجميع للعناصر class وid Empty
مُساهمةموضوع: رد: المطابقة والتجميع للعناصر class وid   المطابقة والتجميع للعناصر class وid Emptyالخميس أغسطس 30, 2018 4:07 am

موضوع رائع
يعطيك العافية
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.ibda3araby.com
 
المطابقة والتجميع للعناصر class وid
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى الابداع العربي ::  تقنيات احلى منتدى ::  تقنيات أحلى منتدى :: دروس تعلم لغات البرمجة-
انتقل الى:  
جميع الحقوق محفوظة لمنتدى الإبداع العربي 2020