بنية CSS

البنية الأساسية لقواعد CSS

تتكون أنماط CSS من مجموعة من مجموعات القواعد، كل منها يحتوي على مُحدد وكتلة إعلان. يحلل المتصفح هذه القواعد ويُطبقها على العناصر المقابلة في مستند HTML.

البنية الأساسية للقواعد هي:

مُحدد {
  خاصية1: قيمة1;
  خاصية2: قيمة2;
  /* المزيد من الإعلانات... */
}

شرح المكونات

المُحدد: المُحدد هو جوهر CSS، يُستخدم "لتحديد" عناصر HTML التي تريد تنسيقها. يمكن أن يكون اسم علامة HTML أو اسم فئة أو اسم معرف أو تركيبة مُحددات أكثر تعقيداً.

كتلة الإعلان: محاطة بأقواس متعرجة {}، تحتوي على إعلان واحد أو أكثر.

إعلان: يتكون من خاصية وقيمة مفصولين بنقطتين إنجليزية :، وكل إعلان ينتهي بفاصلة منقوطة إنجليزية ;.

الخصائص: الخصائص هي ميزات محددة في CSS تُستخدم لتعريف أنماط العناصر. كل خاصية لها اسم يصف نوع النمط المراد تعديله، مثل color وborder وfont-size وغيرها.

القيم: تُحدد التأثير البصري المحدد للخاصةية، مكونة من أرقام بوحدات أو كلمات مفتاحية.

مثال كامل

مثال

<style>
h1 {
  color: blue;
  font-size: 24px;
  text-align: center;
}
</style>
<h1>عنوان المستوى الأول</h1>

هذا القول يعني: حدد جميع عناصر <h1> في الصفحة، وغيّر لون نصها إلى أزرق، واجعل حجم الخط 24 بكسل، واجعلها محاذاة للوسط.

تعليقات CSS

تعليقات CSS تستخدم بنية /* محتوى التعليق */. المتصفح لا يُحلل محتوى التعليقات. CSS لديه فقط هذا النوع من التعليقات — سواء كانت سطراً واحداً أو عدة أسطر، كل شيء يوضع بين /* */.

مثال

<style>
/* هذا تعليق سطر واحد */

/*
  هذا تعليق
  متعدد الأسطر
*/

p {
  color: red; /* يمكن كتابته أيضاً بعد الإعلان */
}
</style>
<p>هذا مثال على فقرة.</p>

التعليقات مفيدة جداً في التطوير — يمكنك استخدامها لشرح ما تفعله أنماط معينة، أو "تعطيل" بعض الأنماط مؤقتاً للتصحيح.

ملاحظات البنية

1. الفواصل المنقوطة هي فواصل

كل إعلان يجب أن ينتهي بفاصلة منقوطة إنجليزية ;، تخبر المتصفح أن الإعلان مكتمل. الفاصلة المنقوطة بعد الإعلان الأخير يمكن حذفها، لكن يُنصح بإضافتها من أجل الاتساق ولتسهيل إضافة أنماط جديدة لاحقاً.

مثال

<style>
/* ✅ مُوصى به: فواصل منقوطة بعد كل إعلان */
h1 {
  color: red;
  font-size: 20px;
}

/* ❌ غير مُوصى به: سهل نسيان الفواصل المنقوطة */
h2 {
  color: blue
  font-size: 18px /* هذا سيُسبب خطأً */
}
</style>
<h1>عنوان المستوى الأول</h1>
<h2>عنوان المستوى الثاني</h2>
<span class="demo-blue">نص أزرق</span>

2. النقطتان بين أسماء الخصائص والقيم

يجب أن تكون النقطتان إنجليزية :. يمكن أن توجد مسافات بين اسم الخاصية والنقطتين، لكن يُنصح بالحفاظ على نمط متسق.

3. استخدام علامات التنصيص

بعض قيم الخصائص (مثل أسماء الخطوط) التي تحتوي على مسافات تحتاج إلى التفاف بعلامات التنصيص:

مثال

<style>
p {
  font-family: "Microsoft YaHei", "宋体", sans-serif;
}
</style>
<p>هذا مثال على فقرة.</p>

4. حساسية حالة الأحرف

أسماء خصائص CSS وقيمها غير حساسة لحالة الأحرف في معظم الحالات، لكن الأحرف الصغيرة تُستخدم تقليدياً. الاستثناء الوحيد هو أن بعض القيم (مثل أسماء الخطوط ومسارات URL) قد تحتاج للحفاظ على حالتها الأصلية.

مثال

<style>
/* ✅ مُوصى به: أحرف صغيرة متسقة */
p {
  color: red;
}

/* 🔄 الأحرف الكبيرة تعمل أيضاً، لكن غير مُوصى به */
P {
  COLOR: RED;
}
</style>
<p>هذا مثال على فقرة.</p>
<p>مثال على المحتوى</p>

أخطاء البنية الشائعة

المبتدئون غالباً يرتكبون الأخطاء التالية عند كتابة CSS — انتبه لتجنبها:

❓ أسئلة شائعة

📖 ملخص

• بنية CSS بسيطة في الواقع: المُحددات تحدد العناصر، وكتلات الإعلان تحتوي على الخصائص والقيم
• أتقن هذه البنية الأساسية، وستتمكن من قراءة وكتابة أي قاعدة CSS
• تذكر: كل إعلان ينتهي بفاصلة منقوطة، وأسماء الخصائص والقيم مفصولة بنقطتين، والتعليقات محاطة بـ/* */

📝 تمارين

1. أنشئ ملف HTML باستخدام علامة <style> لتعيين نص أحمر وحجم خط 28px لعناصر h1، ونص أزرق وحجم خط 16px لعناصر p.
2. أضف تعليقات في كود النمط تشرح ما يفعله كل نمط.
3. اكتب عمداً إعلاناً واحداً بشكل خاطئ (مثلاً اكتب colour بدلاً من color)، وافتح الصفحة في متصفح، وشاهد ما تعرضه لوحة الأنماط في أدوات المطور.