2. تشريح قواعد CSS
مجموعة قواعد CSS (Ruleset) هي وحدة البناء الأساسية لأي ملف أنماط. فهي تخبر المتصفح أي عنصر يجب تنسيقه و كيف يتم تنسيقه.
هيكل مجموعة القواعد
تتكون مجموعة القواعد من ثلاثة أجزاء رئيسية:
- المحدد (Selector): العنصر (أو العناصر) التي تريد استهدافها (مثل
pأو.main-headingأو#logo). - كتلة الإعلان (Declaration Block): التعليمات حول كيفية تنسيق العنصر المستهدف (محصورة بين أقواس متعرجة
{}). - الإعلان (Declaration): زوج واحد يتكون من خاصية (Property) و قيمة (Value)، يفصل بينهما نقطتان رأسيتان (
:) وتنتهي بفاصلة منقوطة (;).
css /* 1. Selector / body { / 2. Declaration Block */
/* 3. Declaration (Property: Value;) */ background-color: #f4f4f4; font-family: Arial, sans-serif; margin: 0; }
قواعد النحو الأساسية (Syntax Rules)
- الأقواس المتعرجة: يجب تغليف الإعلانات داخل
{}. - النقطتان الرأسيتان: يتم فصل الخصائص والقيم بنقطتين رأسيتين.
- الفاصلة المنقوطة: يجب أن ينتهي كل إعلان بفاصلة منقوطة (حتى الإعلان الأخير، رغم أنه اختياري، إلا أنه يوصى به بشدة للوضوح وتجنب الأخطاء).
- حساسية حالة الأحرف: خصائص CSS والكلمات المحجوزة ليست حساسة لحالة الأحرف بشكل عام، ولكن القيم (خاصة أسماء الخطوط أو مسارات الملفات) قد تكون حساسة بناءً على البيئة.
كتابة CSS نظيفة
بينما يتجاهل CSS معظم المساحات البيضاء، فإن استخدام إزاحة (Indentation) ثابتة ووضع كل إعلان في سطر خاص يحسن بشكل كبير من سهولة القراءة.
ممارسة سيئة: css h1{color:red;font-size:30px;}
ممارسة جيدة: css h1 { color: red; font-size: 30px; }