بسم الله الرحمن الرحيم

سنتعلم معا في هذا الدرس كيف تعمل تقنية صفحات الأنماط الانسيابية “CSS” أو Cascading Style Sheets ، وسنقوم معا بإنشاء أول صفحة انماط انسيابية ، حيث سأشرح لكم أساسيات هذه اللغة وكيف نربط بينها وبين صفحات HTML.

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

البنية الأساسية للغة CSS :
على فرض أننا نود عمل صفحة لون خلفيتها أزرق ، سنقوم بعملها بلغة HTML ولغة CSS لتروا الفرق بينهما :

في حال استخدمنا لغة HTML سيكون الكود شكله كما يلي :

اقتباس :

ولكن في حال استخدمنا لغة CSS سيكون الكود شكله كما يلي :

اقتباس :

body { background-color: #0000FF; }

كما تلاحظون فإن الأكواد متشابهة إلى حد كبير ، والمثال السابق يظهر البنية الأساسية للغة CSS ، أي الطريقة التي يتم فيها كتابة أكواد CSS وسنشرحها في المخطط التالي :

اقتباس :

selector { property: value; }

1.المحدد “selector” :
وهو الذي يحدد أي جزء من كود HTML سيتم التحكم به وتغييره بواسطة الملف CSS ، لأنه كما قلنا فإن أكواد CSS تكون عادة مكتوبة في ملف مستقل ، ثم نربطها بعدد لا نهائي من ملفات HTML ، حتى نقوم بتغيير خصائص جميع هذه الصفحات بواسطة تعديل ملف CSS.
في مثالنا السابق : المحدد هو الـ”body” أي جسم الصفحة ، يعني أننا قمنا بتحديد جسم الصفحة “body” لكي نقوم بتغيير خصائصه.
2.الخاصية “property” :
هي خصائص الجزء المحدد بواسطة “المحدد” والتي سنقوم بتغيير قيمها حتى يظهر الجزء المحدد بالشكل المطلوب.
في مثالنا السابق : الخاصية كانت لون خلفية الصفحة “background-color” ، أي أننا سنقوم بتغيير لون الخلفية لجسم الصفحة “body”.
3.القيمة “value” :
وهي قيمة الخاصية التي سنقوم بتعديلها ، في مثالنا السابق : قمنا بتحديد القيمة “#0000FF” وهو رمز اللون الأزرق.
ملخص ماسبق ، أننا نقوم بتحديد جزء لنقوم بالتحكم بخصائصه ، ثم نضع داخل أقواس معقوفة {} الخصائص وكل خاصية نحدد قيمتها ، دائما توضع نقطتين فوق بعض “:” بين الخاصية والقيمة تنتهي كل خاصية بفاصلة منقوطة “;” في حالة تعديل أكثر من خاصية كما في المثال التالي :

اقتباس :

body {
font-size: 14px;
background-color: #0000FF;
}

في هذا المثال قمنا بتعديل خاصيتين ، لون الخلفية وحجم الخط ، لاحظ أنه وضعنا كل خاصية في سطر مستقل ، هذا أفضل للقراءة في حال أردت التعديل لاحقا ، ولكنه ليس ضروري أي أنه يمكنك وضع جميع الخصائص في سطر واحد كما يلي :

اقتباس :

body { font-size: 14px; background-color: #0000FF; }