بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
رأينا في الدرس الماضي أن كود css يتكون من المعرف selector وقاعدة css التي تتكون من الخاصية property و قيمتها value ، أنظر الصورة التالية:
سنتعرف أولا على أنواع المعرفات selectors ، وهي كثيرة ولكن يمكن تصنيفها ضمن نوعين رئيسيين:
1-المعرفات البسيطة Simple selectors .
2-المعرفات المعقدة Advanced selectors .
ليكن مثلا كود html التالي:
الكود بسيط جدا كل ما فيه رأيناه في دورة html ، وفي العلامة link أشرنا لمسار ملف css الذي من المفترض أن يكون في نفس المجلد الموجود به ملف html ، والجديد هنا هو الخاصية media التي أعطيناها القيمة screen التي تعني شاشة ، وهناك أنواع أخرى من media مثل print سنشرحها إن شاء الله في دروس متقدمة.
وينقسم صنف المعرفات البسيطة simple selectors إلى أربعة أنواع :
Type selectors
وهو كتابة علامة html مباشرة وأمامها قاعدة css ، وكمثال عملي سنؤثر على body ونجعل إتجاه الصفحة من اليمين إلى اليسار ، وسنغير لون h1 و p :
لاعليك من القواعد الآن ركز فقط على المعرف.
ويمكن جمع أكثر من علامة في معرف واحد لكي نعطيها تنسيقا واحدا فقط نفصل بينها بالفاصلة ، سنجرب ذلك مع h1 و p لنعطيهما لونا واحدا :
كما ترى تغير لون كليهما إلى الأخضر ، وقد فازت هذه القاعدة رغم وجود قاعدة اللون الأزرق لأنه في css القاعدة الأخيرة هي التي تفوز إلا في حالات معينة سنشرحها في حينها.
Id selectors
وهو يشير إلى العنصر عن طريق الخاصية id التي يحملها ، ونرمز له بالهاشتاغ # ، وفي مثالنا الذي نشتغل عليه لدينا id واحد سميناه block وهو الذي يضم كل المحتوى الباقي ، وسنرى كيف يمكننا أن نعطيه أبعادا وحدودا ونضع له خلفية :
Class selectors
وهو يشير إلى العنصر عن طريق الخاصية class التي يحملها ، ونرمز لها بالنقطة ثم نكتب طبعا إسم الكلاس ، والكلاس كما هو معروف يمكن تكرارها بنفس القيمة في الصفحة وعطى عادة للعناصر التي تأخذ نفس التنسيق اختصارا لكود css .
وفي مثالنا لدينا كلاس سميناها item وهي موجودة ضمن block وتضم h1 و p ، سنعطيها تنسيقا مختلفا حتى نميزها عن block :
Compound selectors
وهو نوع مركب من أكثر من عنصر ، بحيث يشير إلى عنصر داخل عنصر آخر ، ويستخدم لتخصيص عنصر ما بتنسيق ينفرد به عن أي عنصر آخر يشبهه في الصفحة ، بمعنى كما في مثالنا يمكننا تخصيص h1 بالإشارة إلى أنه موجود داخل الكلاس item الموجود بدوره داخل block وهكذا فإن أي h1 آخر في الصفحة لن يأخذ التنسيق الذي خصصنا به هذا h1 بالذات الذي أشرنا إلى مكان وجوده.
ويكتب هذا المعرف من اليسار إلى اليمين ويقرأ من اليمين إلى اليسار :
لاحظ جيدا ، واقرأها من اليمين إلى اليسار هكذا: h1 التي بداخل item التي بداخل block ، وخصصناه باللون الأحمر ، ولو كان لدينا h1 آخر في الصفحة خارج الكلاس item أو خارج block فلن يظهر باللون الأحمر.
في الدرس القادم سنبدأ في استخدام الخصائص والقيم لتنسيق النصوص ، أتمنى أن تنال دورة أساسيات لغة css إعجابكم ، ودمتم في رعاية الله وحفظه.