في هذا الدرس 6تصفّح المواضيع
في الدرسين السابقين، أدت كتابة قاعدة للعنصر p إلى تلوين جميع فقرات الصفحة دفعةً واحدة دون استثناء. لكن صفحات الويب الواقعية تتطلب دقة أعلى؛ فقد تحتاج إلى تلوين فقرة تحذيرية باللون القرمزي مع إبقاء بقية الفقرات باللون الرمادي الهادئ.
تعمل محددات CSS — CSS Selectors كعناوين استهداف دقيقة تصل بين أوامر التنسيق والعناصر المقصودة داخل شجرة HTML، سواء أردت شمول نوع كامل من الوسوم أو تمييز عناصر متفرقة تشترك في دور واحد أو مخاطبة عنصر وحيد بالصفحة:
يبدأ الاستهداف في CSS بمحددين أساسيين يعملان مباشرةً دون إضافة أي سمات جديدة داخل وسوم HTML:
- محدد الوسم — Type Selector: نكتب فيه اسم الوسم مجرداً من أقواس الزاوية مثل
h1أوh2أوp، فينطبق التنسيق على جميع عناصر ذلك النوع في المستند. - المحدد الشامل — Universal Selector: يُكتب برمز النجمة
*ليستهدف كافة عناصر الصفحة دفعةً واحدة لإرساء قاعدة مبدئية عامة، ثم تخصيص ما نشاء بعدها بمحددات أدق:
يُعد محدد الصنف — Class Selector الأداة الأكثر استخداماً في مشاريع الويب الاحترافية. كل ما عليك فعله هو إضافة السمة class="alert" للعناصر المراد تمييزها في HTML، ثم كتابة نقطة متبوعة باسم الصنف .alert في CSS:
- قابلية التكرار بلا حدود: يمكنك منح نفس الصنف لعشر فقرات وعناوين متفرقة في الصفحة الواحدة لتتشارك النمط ذاته.
- دمج عدة أصناف للعنصر الواحد: افصل بين الأسماء بمسافة داخل السمة مثل
class="note urgent"ليكتسب العنصر خصائص.noteو.urgentمعاً. - تقييد الصنف بوسم معين: كتابة
p.noteمتصلةً بلا مسافة تطبق التنسيق على فقرات<p>الحاملة للصنف فقط دون العناوين.
عندما يوجد عنصر واحد فريد لا يتكرر في الصفحة — مثل العنوان الترحيبي الأعلى id="main-banner" — يمكنك استهدافه في CSS بوضع رمز المربع قبل اسمه #main-banner.
بخلاف الأصناف، يمنع معيار HTML تكرار قيمة id نفسها على عنصرين في الصفحة الواحدة. وفي العمل الهندسي اليومي، يُفضَّل الاعتماد على محددات .class لتنسيق الواجهات، والاقتصاد في استخدام #id للعناصر الفريدة أو الروابط المرجعية حتى تظل أنماطك مرنة وسهلة التعديل.
كثيراً ما تشترك عدة عناصر في التنسيق نفسه؛ كأن ترغب في منح h1 و h2 والصنف .summary اللون الأزرق الداكن ذاته. بدلاً من تكرار الكتلة ثلاث مرات، اجمع المحددات في قائمة واحدة مفصولة بـ الفاصلة الإنجليزية العادية ,!
ويمكنك المزج بحرية بين محددات الوسوم والأصناف والمعرفات داخل التجميع الواحد كما في المثال التطبيقي التالي:
لضمان استقرار محدداتك وسهولة قراءتها في المشاريع الحقيقية، اتبع القواعد القياسية لتسمية الأصناف والمعرفات:
- الأحرف الصغيرة والشرطة الوسطى: اكتب الأسماء المركبة بأحرف إنجليزية صغيرة مفصولة بشرطة مثل
.article-leadأو#site-header؛ فتذكر أن أسماء الأصناف والمعرفات حساسة لحالة الأحرف، ولن يطابق.Cardالسمةclass="card". - عدم البدء برقم: ابدأ الاسم بحرف دائماً مثل
.step-1وتجنب البدء برقم مجرد مثل.1st-stepلأن محللCSSيرفضه. - تسمية الوظيفة لا اللون: اختر اسماً يصف الدور مثل
.error-noticeبدلاً من.red-textحتى يظل الاسم منطقياً إذا غيّرت لون التنبيه مستقبلاً.
| نوع المحدد | صيغة الكتابة | الاستخدام العملي الأنسب |
|---|---|---|
| المحدد الشامل | * | ضبط قيم أولية عامة لجميع عناصر الصفحة |
| محدد الوسم | p أو h1 | تنسيق افتراضي موحد لكل عناصر الوسم |
| محدد الصنف | .card-title | تنسيق مرن قابل لإعادة الاستخدام بلا حدود |
| محدد المعرف | #page-banner | استهداف عنصر وحيد لا يتكرر في المستند |
| تجميع المحددات | h1, h2, .lead | توحيد الخصائص المشتركة دون تكرار الكود |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس المحددات الأساسية الخمسة: محدد الوسم، والمحدد الشامل *، ومحدد الصنف المتكرر .class، ومحدد المعرف الفريد #id، وتجميع المحددات بالفاصلة، مع قواعد التسمية الدلالية القياسية. في الخطوة التالية ننتقل إلى درس كيفية استخدام لغة CSS لتعلم طرق ربط ملفات الأنماط الخارجية والداخلية والسطرية بصفحات HTML.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Type Selector محدد الوسم
- محدد يُكتب باسم وسم HTML مجرداً مثل p أو h1 ليستهدف جميع عناصر ذلك النوع في الصفحة.
- للمراجعة
- 02 Universal Selector المحدد الشامل
- محدد النجمة * الذي يطابق كافة عناصر المستند بأولوية صفرية يسهل تخصيصها لاحقاً.
- للمراجعة
- 03 Class Selector محدد الصنف
- محدد مرن يبدأ بنقطة (.note) ويطبّق التنسيق على أي عدد من العناصر الحاملة لاسم الصنف.
- للمراجعة
- 04 Selector Grouping تجميع المحددات
- ربط عدة محددات بالفاصلة العادية (h1, h2, .lead) لتشترك في كتلة تصريحات واحدة دون تكرار.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 ID ID
- Unique Element Identifier
- معرف فريد لا يتكرر داخل الصفحة الواحدة ويُستهدف في قواعد CSS عبر رمز المربع #.
- للمراجعة
- 02 DOM DOM
- Document Object Model
- شجرة عناصر المستند في الذاكرة التي يفحصها المتصفح لمطابقة محددات CSS.
- للمراجعة
- 03 DRY DRY
- Don't Repeat Yourself
- مبدأ عدم تكرار الكود الذي تحققه محددات الأصناف القابلة لإعادة الاستخدام وتجميع الفواصل.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح محرر تجربة محدد الصنف وأضف السمة class="urgent" إلى الفقرة الثانية العادية لتلاحظ اكتسابها اللون القرمزي وحجم 20px فوراً.
-
في محرر تجميع المحددات، غيّر اللون المشترك للقائمة h1, h2, .summary من navy إلى darkgreen وراقب تحديث العناصر الثلاثة معاً.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.