تويت
[frame="7 85"]
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
وبعد,
((دورة تعلم لغة CSS))
[/frame]
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
وبعد,
((دورة تعلم لغة CSS))
درس 7:المطابقة والتجميع للعناصر class وid:-
في بعض الأحيان تود أن تفعل خصائص ما على مجموعة أو فريق من العناصر، في هذ الدرس سنلقي نظرة على كيفية استخدام الفئات class والمعرفات id لتحديد خصائص معينة لعناصر مختارة.
كيف تختار لوناً محدداً لعنوان يختلف عن بقية العناوين في موقعك؟
كيف يمكنك أن تجمع بين روابط مختلفة وكل مجموعة تضعها في قسم مختلف وكل قسم له تصميم خاص؟
هذه أمثلة سنجيب عليها في هذا الدرس.
تجميع العناصر باستخدام الفئات "class".
لنقل بأن لدينا قائمتين من الروابط لأصناف مختلفة من الثمار، الخضار والفواكه، القائمتين في ملف HTML ستكونان بهذا الشكل:
شاهد المثال
نريد أن تكون قائمة روابط الخضروات باللون الأصفر، وقائمة الفواكه باللون الأحر وبقية الروابط تبقى باللون الأزرق.
لإنجاز هذا نقسم الروابط إلى مجموعتين، يمكن فعل ذلك بتحديد فئة لكل رابط باستخدام الخاصية class.
لنقم بتحديد فئات للمثال أعلاه:
يمكن الآن تحديد خصائص محددة للروابط التي تتبع فئة الخضروات أو الفواكه بهذا الشكل:
شاهد المثال
كما ترى في المثال، يمكنك أن تحدد خصائص لعناصر معينة تتبع مجموعة محددة باستخدام الفائت .classname في ملف التصميم.
تحديد معرف خاص لعنصر معين من خلال id
بالإضافة إلى تجميع العناصر من خلال الفئات، لعلك ترغب في تحديد معرف لخاصية محددة، هذا يمكن إنجازه من خلال الخاصية id.
المميز في الخاصية id هو عدم إمكانية وجود عنصرين يستخدمانه في نفس الملف، أي لا يمكن لعنصرين أن يستخدما معرفاً id واحداً في نفس الصفحة، كل معرف id يجب أن يكون مميزاً وفريداً، أما غير ذلك فعليك استخدام الفئات class، دعنا نلقي نظرة على مثال محتمل لكيفية استخدام المعرف id:
المثال أعلاه قد يكون عناوين لوثيقة ما تقسم الصفحة إلى أبواب وفصول، من الطبيعي أن نحدد لكل فصل معرفاً خاصاً id كما في المثال الآتي:
لنقل أن عنوان الفصل 1.2 يجب أن يكون باللون الأحمر، يمكن إنجاز ذلك في CSS بهذا الشكل:
شاهد المثال
كما ترى في المثال أعلاه يمكن تحديد خصائص معينة لعنصر معين باستخدام #id في وثيقة التصميم.
ملخص:-
في هذا الدرس تعلمنا كيف نستخدم المنتقي من نوع class وid، يمكنك الآن أن تحدد خصائص محددة لعناصر معينة.
فى الدرس اللاحق إن شاء الله سوف نتعلم التجميع بإستخدام عنصرى <span> و <div>
منقولفي بعض الأحيان تود أن تفعل خصائص ما على مجموعة أو فريق من العناصر، في هذ الدرس سنلقي نظرة على كيفية استخدام الفئات 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> ...
كود:
<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> ...
كود:
#c1-2 {
color: red;
}
كما ترى في المثال أعلاه يمكن تحديد خصائص معينة لعنصر معين باستخدام #id في وثيقة التصميم.
ملخص:-
في هذا الدرس تعلمنا كيف نستخدم المنتقي من نوع class وid، يمكنك الآن أن تحدد خصائص محددة لعناصر معينة.
فى الدرس اللاحق إن شاء الله سوف نتعلم التجميع بإستخدام عنصرى <span> و <div>
[/frame]
تعليق