أساسيات CSS

🎨 فهم أساسيات أوراق الأنماط المتتالية (CSS)

تُعد **CSS (Cascading Style Sheets)** هي اللغة المستخدمة لوصف العرض والتصميم لمستند مكتوب بلغة ترميز مثل HTML. بينما تمنح HTML المحتوى الخاص بك **هيكله**، تمنحه CSS **أسلوبه**. إنها تتحكم في تخطيط صفحات ويب متعددة في وقت واحد، بما في ذلك الألوان والخطوط والمسافات والتصميم المتجاوب (Responsive Design).

إذا كانت HTML هي المخطط الهيكلي للمنزل، فإن CSS هي التصميم الداخلي – اختيار ألوان الطلاء، وترتيب الأثاث، وتحديد الجماليات. من خلال فصل المحتوى (HTML) عن العرض (CSS)، فإنك تجعل مواقع الويب أسهل في الصيانة وأسرع في التحميل وأكثر مرونة للتكيف مع أحجام الشاشات المختلفة.

صيغة CSS: المحددات، الخصائص، والقيم

تتكون قاعدة CSS من **مُحدِّد (Selector)** و **كتلة إعلان (Declaration Block)**. يشير المحدد إلى عنصر HTML الذي تريد تصميمه، وتحتوي كتلة الإعلان على إعلان واحد أو أكثر مفصولة بفواصل منقوطة.

المُحدِّد (Selector): اسم عنصر HTML، أو اسم الفئة (مثل .title)، أو المعرّف (مثل #header) الذي تريد استهدافه.
الخاصية (Property): سمة التصميم التي تريد تغييرها (مثل color، font-size، margin).
القيمة (Value): الإعداد المحدد لتلك الخاصية (مثل blue، 16px، 10px 20px).

/* Example of a CSS Rule */
h1 {
  color: #333333; /* Property: color, Value: #333333 */
  font-size: 24px; /* Property: font-size, Value: 24px */
}

نموذج الصندوق (Box Model) الحيوي في CSS

يتم التعامل مع كل عنصر HTML في صفحة الويب بواسطة المتصفح كصندوق مستطيل. يعد فهم **نموذج صندوق CSS (CSS Box Model)** أمرًا أساسيًا للتخطيط والتباعد. يتكون هذا النموذج من أربع طبقات، من الداخل إلى الخارج:

المحتوى (Content): النص الفعلي أو الصورة.
الحشوة (Padding): المسافة بين المحتوى والحد (Border).
الحد (Border): خط يفصل الحشوة عن الهامش (Margin).
الهامش (Margin): المساحة الشفافة خارج الحد، والتي تفصل العنصر عن العناصر المجاورة له.

كيفية تضمين CSS في HTML

هناك ثلاث طرق رئيسية لتطبيق أنماط CSS على مستند HTML:

ورقة الأنماط الخارجية (مُوصى بها): ربط ملف .css منفصل باستخدام وسم <link> في قسم <head> من HTML.
ورقة الأنماط الداخلية: وضع قواعد CSS داخل وسم <style> ضمن قسم <head> من HTML.
الأنماط المُضمَّنة (Inline Styles): تطبيق الأنماط مباشرة على عنصر HTML باستخدام السمة style (على سبيل المثال: <p style="color: red;">...</p>). لا يُنصح بهذه الطريقة بشكل عام للمشاريع الكبيرة.