بناء جملة CSS
أنت تعرف الآن أن CSS هو ما يتحكم في مظهر عناصر HTML. في هذه الجلسة سنركّز على قواعد كتابة القاعدة الواحدة، لتقرأ الأنماط وتكتبها بثقة، وتعرف تماماً أين تُوضع الأقواس والنقطتان والفاصلة المنقوطة دون تخمين.
ما هو بناء جملة CSS؟
بناء جملة CSS هو الشكل الثابت الذي تُكتب به قاعدة التنسيق. وتكاد كل قاعدة نكتبها يومياً تسير على النهج نفسه: تحدّد أولاً ما تريد تنسيقه (المحدّد)، ثم تفتح كتلة التصريحات بالقوس {، وتكتب تصريحاً واحداً أو أكثر، وتغلق الكتلة بالقوس }. وكل تصريح (declaration) يربط خاصية بقيمة.
تشريح قاعدة CSS
فكّك القاعدة إلى أجزاء لكل منها اسم. فإذا صرت تعرف اسم كل جزء، سهُل عليك جداً أن تكتشف الأخطاء الإملائية والنحوية في الكود.
📊 أجزاء قاعدة CSS
| الجزء | مثال | الدور |
|---|---|---|
| المحدّد (selector) | p |
يحدّد العناصر التي تنطبق عليها القاعدة |
| كتلة التصريحات | { … } |
تضم تصريحاً واحداً أو أكثر بين قوسين معقوفين |
| التصريح (declaration) | color: teal; |
تعليمة واحدة من زوج خاصية–قيمة، وتنتهي عادةً بـ ; |
| الخاصية (property) | color |
الجانب الذي تريد تغييره في المظهر |
| القيمة (value) | teal |
ما تعيّنه لهذه الخاصية |
| النقطتان / الفاصلة المنقوطة | : / ; |
النقطتان تفصلان الخاصية عن القيمة، والفاصلة المنقوطة تُنهي معظم التصريحات |
قاعدة بأجزائها الظاهرة
هذه أبسط قاعدة ممكنة، وتظهر فيها كل الأجزاء الأساسية. سنتعمّق في المحدّدات في جلسات لاحقة؛ أما هنا فهدفنا أن تتقن البنية الصحيحة.
قاعدة CSS بأجزائها الظاهرة
cssp {
color: teal;
}اقرأها من اليسار إلى اليمين
p— المحدّد (يشمل كل الفقرات){…}— كتلة التصريحاتcolor— الخاصية:— تفصل الخاصية عن القيمةteal— القيمة;— تُنهي التصريح
المسافات وفواصل الأسطر مرنة. يمكنك كتابةp{color:teal;}في سطر واحد، وسيتعامل معها المتصفح بالطريقة نفسها. لكن الأفضل في التعلّم والعمل ضمن فريق أن تكتب القاعدة على عدة أسطر لتبقى مقروءة.
عدة تصريحات في كتلة واحدة
يمكن للقاعدة الواحدة أن تضبط خصائص كثيرة للمحدّد نفسه. اكتب كل تصريح في سطر مستقل وانهِه بفاصلة منقوطة.
عدة تصريحات في كتلة واحدة
css.note {
color: #0f172a;
background-color: #e0f2fe;
padding: 1rem;
border-radius: 0.5rem;
}لماذا تعمل هذه القاعدة؟
.noteمحدّد class (سنتدرّب على الـ classes أكثر لاحقاً)- أربعة تصريحات تشترك في كتلة تصريحات واحدة
- يطبّق المتصفح كلها على العناصر التي تحمل
class="note" - نسيان الفاصلة المنقوطة بين تصريحين قد يجعل الخاصية التالية لا تُطبَّق
تجميع المحدّدات
إذا احتاجت عدة محدّدات إلى التنسيق نفسه، فاكتبها مفصولة بفواصل. تكفي كتلة تصريحات واحدة لها جميعاً.
تجميع المحدّدات
cssh1, h2, h3 {
font-family: Georgia, serif;
color: #1e293b;
}متى تجمع المحدّدات؟
التجميع يغنيك عن تكرار الكود ونسخه ولصقه حين يُراد للعناوين (أو لعناصر أخرى) أن تتشارك المظهر نفسه. وإذا احتاج أحد المحدّدات لاحقاً إلى تنسيق خاص به، فأفرد له قاعدة مستقلة بدلاً من تحميل المجموعة ما لا يخصها.
قائمة مراجعة لعلامات الترقيم
احتفظ بهذه القائمة القصيرة في ذهنك أثناء الكتابة:
- الأقواس المعقوفة تحيط بكتلة التصريحات
- النقطتان تقعان بين الخاصية والقيمة
- الفاصلة المنقوطة تُنهي كل تصريح (وهي لازمة قبل التصريح التالي، ومن الجيد كتابتها بعد الأخير أيضاً)
- الفواصل تفصل المحدّدات المجمّعة — لا الخصائص
- أسماء الخصائص ومعظم القيم النصية لا تتأثر بحالة الأحرف، لكن المتعارف عليه كتابتها بأحرف صغيرة
جرّبها بنفسك
- أنشئ ملفاً باسم
syntax.htmlفيه فقرة<p class="note">Syntax practice</p>وكتلة<style>داخل head. - أضف قاعدة
.noteذات التصريحات المتعددة من هذه الجلسة. - غيّر
background-colorإلى#fef3c7، ثم احفظ وحدّث الصفحة. - أضف تصريحاً خامساً هو
font-size: 1.125rem;داخل الكتلة نفسها، ثم احفظ وحدّث الصفحة مرة أخرى. - تأكد من تغيّر لون الخلفية وحجم الخط معاً. وإن لم يتغيرا، فراجع الأقواس والفواصل المنقوطة.
أخطاء شائعة
- كتابة
color tealدون نقطتين — لا يستطيع المتصفح فهم التصريح - نسيان
{أو}فتبقى التصريحات خارج الكتلة ويتجاهلها المتصفح - حذف الفاصلة المنقوطة بين تصريحين فلا تُطبَّق الخاصية الثانية
- وضع فاصلة بين الخاصية والقيمة (
color, teal) بدل النقطتين - كتابة خاصية وحدها دون محدّد أو أقواس — فهذه ليست قاعدة مكتملة
الخلاصة
- بناء جملة CSS = محدّد + كتلة تصريحات
{ }تضم تصريحات - صيغة التصريح:
property: value; - يمكن للكتلة الواحدة أن تضم تصريحات كثيرة للمحدّد نفسه
- الفواصل تجمع المحدّدات التي تتشارك التنسيق نفسه
- الدقة في الأقواس والنقطتين والفاصلة المنقوطة تجنّبك أخطاء صامتة لا تظهر لك رسالة عنها
- تدرّب بتعديل القيم وإضافة التصريحات، ثم حدّث الصفحة وانظر النتيجة
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى