تصميم مواقع الويب للمبتدئين
سنخصص هذا الجزء الثاني من دورة أساسيات لغة css للمبتدئين للحديث عن المعرفات Selectors ، استخدمنا بعضها في دروس الجزء الأول من الدورة ، لكننا لم نعطها حقها في الشرح ، لم نتحدث عن أنواعها بالتفصيل ، هذا الجزء من أهم أجزاء الدورة ويحتوي على أربع دروس مسجلة فيديو ، أود قبل نشرها الحديث كتابة عن موضوع المعرفات حتى تكون التدوينة مرجعا لمن أراد العودة إليها أو حفظها لديه .
المعرفات Selectors في لغة css تنقسم لنوعين رئيسيين :
1- المعرفات البسيطة Simple Selectors
2- المعرفات المعقدة Advanced Selectors
كل نوع من هاذين النوعين ينقسم أيضا إلى عدة أنواع ، فلو بدأنا بالنوع الأول :
المعرفات البسيطة Simple Selectors
تنقسم إلى أربعة أنواع كل نوع يستدعي عنصر html بطريقة مختلفة :
1- Type Selector : ويكتب عنصر html نفسه كمعرف مثلا :
(h1 أو p أو img) و يمكن كتابة أكثر من واحد مفصول بفاصلة أجنبية
2- Id Selector : ويكتب إسم Id التابع للعنصر مسبوقا بالهاشتاغ # مثلا:
(container#)
3- Class Selector : ويكتب إسم Class التابع للعنصر مسبوقا بالنقطة مثلا :
(container.)
4- Combound Selector : وينقسم بدوره إلى أربعة أنواع .
- Descendant Selector : ويشير لعنصر إبن Child داخل عنصر أب Parent وقد يطول أكثر من ذلك مثلا :
(div p أو parent #child p#)
- Child Selector : ويشير للعنصر الإبن المباشر ولا يؤثر على إبن الإبن يكتب بهذا الشكل كمثال :
(block > p.)
- Adjacent Sibling Selector : ويشير للعنصر الذي يأتي مباشرة بعد العنصر المحدد شريطة أن يشتركا في نفس الأب ، يكتب بهذا الشكل كمثال :
( child + p.)
- General Sibling Selector : شبيه بالمعرف السابق غير أنه يؤثر في كل العناصر المحددة التي تأتي بعد العنصر المحدد مع نفس الشرط وهو الإشتراك في نفس الأب ، ويكتب بالشكل التالي كمثال:
(child ~ p.)
المعرفات المعقدة ( أو المتقدمة ) Advanced Selectors
تنقسم إلى ثلاثة أنواع :
1- Pseudo Classes أو الكلاسات الوهمية وتستخدم لتحديد العناصر في حالات مختلفة فنكتب مثلا a:hover أو a:active أو a:focus بهذه الطريقة نستطيع إعطاء الرابط تنسيقات مختلفة لكل حالة على حدا ، أو نكتب مثلا input:disabled فنميز الحقل الذي يحتوي على attribute خاصية disabled .
2- Pseudo Elements أو العناصر الوهمية وتستخدم للتأثير في جزء من العنصر فنكتب مثلا p::first-letter أو p::first-line ، أو إضافة شيء بعد العنصر أو قبله فنكتب مثلا p::before أو p::after .
3- Attribute Selectors وتستخدم لتحديد العنصر عن طريق خاصية Attribute يحتوي عليها كأن نكتب :
a[target]
للتأثير فقط على الرابط الذي لديه خاصية target وكأن نكتب :
input[type=submit]
للتأثير على زر الإرسال .
هذه كل أنواع المعرفات Selectors في لغة css ، أتركك الآن مع فيديوهات الشرح التفصيلي مع الأمثلة :
في فيديو الدرس الرابع عشر تمت الإشارة بشكل خاطف لأنواع المعرفات البسيطة Simple Selectors التي رأيناها في الدروس الماضية وشرحت بشكل مفصل مع الأمثلة النوع الرابع من هذه المعرفات Combound Selector .
فيديو الدرس الرابع عشر
وفي الدرس الخامس عشر شرحت مع الأمثلة أول أنواع المعرفات المتقدمة وهي Pseudo Classes .
فيديو الدرس الخامس عشر
وفي الدرس السادس عشر شرحت ثاني أنواع المعرفات المتقدمة وهي Pseudo Elements .
فيديو الدرس السادس عشر
وفي الدرس السابع عشر شرحت آخر أنواع المعرفات المتقدمة وهي Attribute Selectors .
فيديو الدرس السابع عشر
نهاية الجزء الثاني من دورة أساسيات لغة css للمبتدئين ، ينتظرنا الكثير بعد ، في الدرس القادم سنشرح Media Types ، وسنبدأ بعد ذلك إن شاء الله في شرح مايسمى Reset و Normalize في css والفرق بينهما ، ثم سنتعرف على مبادئ مهمة جدا في css ، لندخل أخيرا في الخصائص الجديدة في css3 .
دمتم في رعاية الله وحفظه .