بنية كود CSS - تعلم قواعد الكتابة (Syntax)

مرحباً بك في الدرس الأهم في رحلة تعلم CSS. إذا كنت تعتبر HTML هي "مواد البناء"، فإن CSS هي "لغة التصميم". وكأي لغة في العالم (مثل العربية أو الإنجليزية)، تمتلك CSS قواعد نحوية (Grammar) وقواعد ترقيم صارمة. في هذا الدرس، لن نتحدث عن الألوان أو الأحجام فحسب، بل سنتعلم "كيف نكتب الجملة البرمجية" بشكل صحيح حتى يفهمها المتصفح. سنتعلم سر الأقواس {}، ولماذا نضع النقطتين :، وما هي كارثة نسيان الفاصلة المنقوطة ;. هذا الدرس هو دليلك لتكتب كوداً نظيفاً، خالياً من الأخطاء، وتفهم كل رمز تكتبه يداك.

التشريح الأساسي: مما تتكون جملة CSS؟

لنتخيل أننا نعطي أمراً لرسام. نقول له: "يا رسام، ارسم السماء (الموضوع) بلون أزرق (الصفة)". في CSS، الأمر مشابه جداً. تتكون أي قاعدة CSS (Rule Set) من جزأين رئيسيين لا ثالث لهما.

1. المُحدد (The Selector)

هو الجزء الذي يسبق الأقواس. وظيفته تحديد "من" هو العنصر الذي نريد تغيير شكله.

هل تريد تغيير الفقرات p؟
أم العناوين h1؟
أم عنصر محدد باسم معين .my-box؟

المتصفح ينظر للمحدد أولاً، ثم يبحث في صفحة HTML عن كل العناصر التي تطابق هذا المحدد ليطبق عليها الأوامر.

2. كتلة التصريح (Declaration Block)

هي المنطقة المحصورة بين القوسين المعقوفين { ... }. داخل هذا الصندوق، نكتب التعليمات. وتتكون التعليمات من زوجين:

الخاصية (Property): "ماذا" تريد أن تغير؟ (مثلاً: اللون color، حجم الخط font-size).
القيمة (Value): "كيف" تريد أن تغيره؟ (مثلاً: أحمر red، كبير 20px).

اختر - الجزء في كود CSS المسؤول عن تحديد "العنصر" المراد تنسيقه في صفحة HTML يسمى:
(أ) الخاصية (Property). (ب) القيمة (Value). (ج) المحدد (Selector). (د) الوسم (Tag).

الإجابة: (ج) المحدد (Selector). (هو الذي يختار العنصر قبل بدء التنسيق).

رموز الترقيم: الأقواس والنقاط والفواصل (مهم جداً)

هذا الجزء هو أكثر ما يسبب مشاكل للمبتدئين. لغة CSS لا تفهم المسافات البيضاء بقدر ما تفهم الرموز. دعنا نفكك وظيفة كل رمز.

1. الأقواس المعقوفة { Curly Braces }

الوظيفة: تعمل كحاوية أو "صندوق". تخبر المتصفح: "كل الأوامر الموجودة داخل هذين القوسين تابعة للمحدد الموجود قبلهما".

نفتح القوس { بعد اسم المحدد مباشرة.
نغلق القوس } بعد الانتهاء من كتابة جميع الخصائص.
خطأ شائع: نسيان إغلاق القوس يسبب توقف قراءة باقي أكواد CSS في الملف بالكامل!

2. النقطتان الرأسيتان : (Colon)

الوظيفة: الفصل بين "الخاصية" و "القيمة".

تقرأها وكأنك تقول "تساوي" أو "هي". عندما تكتب color: red، كأنك تقول للمتصفح: "اجعل خاصية اللون تساوي أحمر".

بدون النقطتين، سيظن المتصفح أن color red هي كلمة واحدة غير مفهومة وسيتجاهل السطر.

3. الفاصلة المنقوطة ; (Semicolon) - ملكة الأخطاء

الوظيفة: إنهاء السطر البرمجي. تخبر المتصفح: "انتهى هذا الأمر، استعد للأمر التالي".

لماذا هي مهمة؟ المتصفح لا يرى نهايات الأسطر كما نراها نحن. لو كتبت الكود كله في سطر واحد، سيعمل بشرط وجود الفواصل المنقوطة. بدونها، سيدمج المتصفح الأوامر مع بعضها وتحدث فوضى.

مثال يوضح دور الرموز


/* المحدد: نختار العناوين h1 */
h1 {  /* بداية صندوق الأوامر */
    
    color: blue;       /* الخاصية : القيمة ; (انتهى الأمر الأول) */
    font-size: 30px;   /* الخاصية : القيمة ; (انتهى الأمر الثاني) */
    text-align: center; /* الخاصية : القيمة ; (انتهى الأمر الثالث) */

} /* إغلاق صندوق الأوامر */

اختر - ماذا يحدث إذا نسيت وضع الفاصلة المنقوطة (;) في نهاية سطر CSS؟
(أ) سيقوم المتصفح بإصلاح الخطأ تلقائياً دائماً. (ب) لن يتم تطبيق السطر التالي من الكود لأنه سيدمج مع السطر الحالي. (ج) سيتحول لون النص إلى الأسود. (د) سيتم حذف العنصر من الصفحة.

الإجابة: (ب) لن يتم تطبيق السطر التالي من الكود. (لأن المتصفح لن يعرف أين انتهى الأمر الأول وأين بدأ الثاني).

المحددات (Selectors): كيف تخاطب العناصر؟

كيف نكتب اسم المحدد بشكل صحيح؟ هل نضع نقطة؟ هل نضع شباك؟ هذا يعتمد على نوع التحديد الذي تريده.

1. محدد الوسم (Tag Selector) - بدون رموز

إذا كنت تريد استهداف عنصر HTML مباشرة (مثل div, p, h1, body)، اكتب اسمه كما هو بدون أي رموز قبله.

مثال: p { } سيستهدف كل الفقرات في الصفحة.

2. محدد الكلاس (Class Selector) - النقطة (.)

الكلاس هو سمة نضعها في HTML لتمييز مجموعة من العناصر (مثل: <div class="box">).

في CSS، لكي نخبر المتصفح أننا نتحدث عن "كلاس"، يجب أن نضع نقطة . قبل الاسم.

القاعدة: .اسم_الكلاس { }

مثال: .box { } سيستهدف أي عنصر يحمل كلاس اسمه box.

3. محدد المعرف (ID Selector) - الشباك (#)

الـ ID هو سمة لتمييز عنصر واحد فريد (مثل: <div id="header">).

في CSS، لكي نخبر المتصفح أننا نتحدث عن "ID"، يجب أن نضع علامة الشباك (الهاشتاج) # قبل الاسم.

القاعدة: #اسم_المعرف { }

مثال: #header { } سيستهدف العنصر الفريد الذي يحمل ID اسمه header.

جدول مقارنة الرموز في المحددات


/* استهداف مباشر للوسم (بدون رموز) */
button {
    padding: 10px;
}

/* استهداف كلاس (نقطة قبل الاسم) */
.btn-danger {
    background-color: red;
}

/* استهداف آي دي (شباك قبل الاسم) */
#main-nav {
    background-color: black;
}

الكلاس (Class) vs المعرف (ID): الفرق الجوهري

السؤال الذي يحير الملايين: "لماذا يوجد لدينا ID و Class طالما الاثنان يقومان بالتنسيق؟". الجواب يكمن في "التكرار" و "الهدف".

مقارنة تفصيلية

وجه المقارنة	الكلاس (Class) (.)	المعرف (ID) (#)
التكرار في HTML	يمكنك إعطاء نفس اسم الكلاس لعدد لا نهائي من العناصر في نفس الصفحة.	يجب أن يكون فريداً تماماً. لا يجوز أن يحمل عنصران نفس الـ ID في نفس الصفحة.
الرمز في CSS	نقطة ( . )	شباك ( # )
الاستخدام الأمثل	للأنماط المتكررة (مثل الأزرار، الكروت، النصوص الملونة).	للعناصر الهيكلية الرئيسية الوحيدة (مثل: الهيدر، الفوتر، القائمة الرئيسية) أو للتعامل مع جافاسكريبت.
تعدد القيم	يمكن للعنصر أن يحمل أكثر من كلاس: `class="btn large red"`	العنصر يحمل ID واحد فقط: `id="my-btn"`

اختر - أي من الجمل التالية صحيحة بخصوص الـ Class والـ ID؟
(أ) يمكن استخدام نفس الـ ID لأكثر من عنصر في الصفحة. (ب) يمكن للعنصر الواحد أن يمتلك أكثر من Class في نفس الوقت. (ج) الـ Class يبدأ برمز # في CSS. (د) الـ ID يستخدم للعناصر المتكررة بكثرة.

الإجابة: (ب) يمكن للعنصر الواحد أن يمتلك أكثر من Class في نفس الوقت. (عن طريق وضع مسافة بينهم داخل وسم HTML).

تجميع المحددات والتعليقات (Advanced Basics)

ماذا لو كنت تريد تطبيق نفس التنسيق على الـ h1 والـ h2 والـ p في نفس الوقت؟ هل نكتب الكود ثلاث مرات؟ بالطبع لا.

1. التجميع (Grouping) - الفاصلة العادية

يمكنك وضع أكثر من محدد قبل الأقواس المعقوفة، مع الفصل بينهم بـ فاصلة عادية (,).

المعنى: طبق هذا الكلام على "هذا، وهذا، وهذا".

2. التعليقات (Comments)

التعليقات هي نصوص تكتبها لنفسك لتتذكر وظيفة الكود، والمتصفح يتجاهلها تماماً.

طريقة الكتابة: تبدأ بـ /* وتنتهي بـ */.

يمكن كتابتها في سطر منفصل أو بجانب الكود.

مثال على التجميع والتعليقات


/* هذا تعليق: سنجعل كل العناوين والفقرات بنفس نوع الخط */
h1, h2, p {
    font-family: Arial, sans-serif;
    color: #333;
}

.special-box {
    border: 1px solid red; /* تعليق جانبي: حدود حمراء */
}

أخطاء شائعة يقع فيها المبتدئون

حتى المحترفون يقعون في هذه الأخطاء البسيطة التي قد تدمر التصميم. راجعها جيداً.

قائمة الأخطاء القاتلة

نسيان النقطة (.) قبل الكلاس: يكتب المبتدئ box { } بدلاً من .box { }. النتيجة: المتصفح يبحث عن وسم اسمه <box> ولا يجده، فلا يطبق شيئاً.
استخدام : بدلاً من = في HTML: في HTML نكتب class="name"، لكن في CSS نكتب color: red;. لا تخلط بين اللغتين.
الأخطاء الإملائية: كلمة colour خطأ (يجب أن تكون color)، وكلمة backgound خطأ. حرف واحد ناقص يعني أن الكود لن يعمل.
المسافات في أسماء الكلاسات: لا يجوز تسمية كلاس في CSS بـ .big box. إذا كان لديك كلاس بمسافة في HTML، يجب ربطه بـ .big.box أو استخدام الشرطة .big-box.

اختر - ما هو الرمز الصحيح لكتابة "تعليق" (Comment) لا يقرأه المتصفح في ملف CSS؟
(أ) // تعليق. (ب) . (ج) /* تعليق */. (د) # تعليق.

الإجابة: (ج) /* تعليق */. (الرمز // يستخدم في لغات مثل JS وليس CSS القياسية، والرمز  لـ HTML).