في مجموعة سابقة من الدروس المكتوبة تعرفنا على أهم خصائص لغة HTML وكيف يمكن بناء الهيكل الأساسي للموقع باستخدامها , لكن الملاحظة التي يمكن للجميع الانتباه لها , هي أن لغة HTML غير كافية من أجل بناء موقع بسيط , وأن الأمر يحتاج المزيد من أجل بناء موقع يحترم المعايير الأساسية.
هنا تظهر لغة CSS فهي تأتي لتكمل أحد أهم العناصر في موقع الإنترنت , وهو الجانب المتعلق بالتصميم وتنسيق عناصر الصفحة التي قمنا كخطوة أولى ببنائها باستخدام اللغة الهيكلية HTML , بالتالي يمكن القول أن الخطوة التالية هي تعلم CSS.
تعلم CSS
لغة CSS تعتبر لغة تنسيق بالتالي تعتبر من الأسهل و الأبسط من حيث البنية والأكواد , بالإضافة إلى أنها لغة أساسية في بناء المواقع بالتالي ستجد الكثير من الواقع التي تقدم دورات خاصة بها أو التوثيق الذي يقدم تفاصيل وطريقة العمل أهم هذه المواقع هو MDN .
طريقة كتابة كود CSS
كتابة تعليمات CSS تكون على هذا الشكل
selector {
property:value;
}- ال Selector يمثل عنصر الصفحة الذي تريد التعديل عليه مثلا “H1” أو “Body” وغيرها من العناصر
- ال Property وهي تمثل الخاصية التي تريد تطبيقها على عنصر من الصفحة , حيث يمكن لل Property أن تكون على شكل لون “Color” أو خلفية “Backgroung” والتي سنتعرف عليها فيما بعد.
- ال Value إذا كانت ال Property تمثل الخاصية فإن ال Value تمثل قيمة هذه الخاصية , على سبيل المثال إن كانت الخاصية هي backgroung-color فإن الخاصية ستكون على سبيل المثال هي “yellow” أو أي لون أخر.
إذن تستخدم لغة CSS من أجل تنسيق صفحات HTML بالتالي الخطوة التي سنقوم بها هي ربط هذه التنسيقات بالصفحة التي نعمل عليها, لفعل هذا يمكننا الإعتماد على مجموعة من الطرق , منها ما هو موصى به ومنها ما يعتبر من الأساليب القديمة والغير عملية.
على سبيل المثال من أجل جعل صفحة HTML باللون الأصفر يمكننا كتابة التالي داخل وسم <head>
<style>
body {
background-color: yellow;
}
</style>قم بفتح ملف index.html من خلال المتصفح ولاحظ كيف أن خلفية الموقع أصبحت بالكامل باللون الأصفر , يمكنك إختيار اللون الذي تريد وإعادة التجربة , هذه الطريقة أي كتابة أكواد CSS داخل وسم <head> غير موصى بها , والسبب بسيط للغاية , لنفترض أننا نريد العمل على موقع مكون من 50 صفحة , هل سنقوم بكتابة التنسيق للصفحات ال 50 كلها , ماذا لو كنت أريد تعديل التنسيق هل سأفتح الملفات ال50 كلها وأعدل كل ملف على حدى ؟ كما تلاحظ فإن كتابة تنسيقات ال CSS داخل وسم ال <head> خيار غير عملي على الإطلاق.
هنا يمكننا الإعتماد على طريقة أخرى ,وهي إستخدام ملف CSS خارجي يتم استدعائه في كل الصفحات التي تريد إضافة التنسيقات لها , وعندما تريد تعديل التنسيقات في الموقع , تقوم بهذه التعديلات عبر ملف واحد فقط , بالتالي يمكن أن تلاحظ أن هذه الطريقة عملية وسريعة.
لفعل هذا أي إستخدام ملف CSS خارجي سنحتاج للوسم <link> ونقوم بكتابة التالي داخل وسم <head>
<link rel="stylesheet" href="style.css">هنا الوسم <link> يستخدم من أجل ريط صفحة HTML مع ملف خارجي , وهذا الوسم يتوفر على مجموعة من الخصائص وهي “rel” وهو يمثل علاقة الملف الخارجي بصفحة HTML وقد أعطيناه القيمة “stylesheet” أي ملف تنسيق, ولدينا أيضا الخاصية “href” وهي التي تمكن من ربط الصفحة , حيث تمكنك من إضافة رابط أو أسم ملف التنسيق .
طبعا حتى يعمل هذا السطر يجب أن تقوم بإنشاء ملف style.css داخل نفس المجلد الذي تعمل عليه والذي يحتوي على ملف index.html , بعد الإنتهاء قم الأن بحفظ التعديلات وقم بفتح ملف style.css الفارغ حتى الأن وقم بكتابة التالي :
body {
background-color: blue;
}لا تنسى إزالة التنسيقات السابقة التي قمت بكتابتها داخل وسم <style>
ق بحفظ التعديلات وافتح ملف index.html من خلال المتصفح , إن وجدت الصفحة أخذت اللون الأزرق كما حددناه في سطر css ” background-color: blue; ” فهذا يعني أن الربط تم بنجاح , والأن يمكنك الإستمرار ومتابعة بقية الدروس.