تقديم
كتب هذا المقال أشرف عبدالدايم مطور واجهة المستخدم في TieLabs سابقاً، 95% من كود CSS الموجود في قالب جنة من كتابة أشرف :)
بعد أن قام Tim Berners-Lee باختراع الويب في نهاية الثمانينات 1989 واختراع لغة HTML في بداية التسعينات 1991 وبعد انتشار الويب بشكل كبير خلال التسعينات، زادت الحاجة أيضاً لإضافة مظهر جمالي لصفحات الويب.
اعتمد مطوري الويب آنذاك على عناصر محدده في HTML لتحسين مظهر صفحات الويب:
-
- <basefont> لتحديد الخط المستخدم في صفحة الويب بأكملها.
- <font> لتحديد شكل ، ولون، وحجم الخط.
- <center> محاذاة المحتوى أفقياً وسط الصفحة.
- <big> لزيادة حجم النصوص.
أيضاً تم تحديد بعض الخصائص لتساعد في تحسن المظهر:
- bgcolor لتحديد لون الخلفية للعناصر.
- text لتحديد لون النصوص.
الهيكلة العامة للصفحة في السابق (قبل اختراع CSS)
العناصر السابقة عن تم إنشاءها لتتحكم في مظهر أجزاء الصفحة المختلفة، لكن ماذا عن الشكل العام لصفحة الويب؟ ما هي الطريقة المستخدمة في تخطيط الصفحة (Page Layout)؟
كانت الطريقة المستخدمة قبل اختراع CSS هي الجداول <table>، الجداول؟! جداول البيانات؟!!
نعم لا تتعجب، كان مطوري الويب يستخدمون الجداول لتقسيم الصفحة إلى وأعمدة، فكانت الجدال الطريقة الوحيدة التي تحتوي على تخطيط مرئي، كالشكل التالي:
See the Pen CSS basics | example #1 by Ashraf Reda (@ashrafreda) on CodePen.33721
لماذا لا يجب إستخدام الجداول في تخطيط صفحات الويب؟
الجداول في HTML تحتوى على الكثير من العناصر، في حين إمكانية تحقق ذلك بالقليل من العناصر بإستخدام CSS.
وتبعاً لقاعدة Semantic Code فإن الجداول غير مناسبة للإستخدام في تخطيط الصفحة، حيث أن وظيفة الجداول الأساسية هي استخدامها مع البيانات متعددة الأبعاد (يمكن تقسيمها على هيئة صفوف وأعمدة) لا في هيكلة صفحات الويب.
كي تقوم بتعديل التخطيط، لابد من التعديل على محتوى الجدول في ملف HTML، ماذا لو أردت تغيير مواضع الأعمدة اليمين مكان اليسار والعكس؟ لابد من تعديل عناصر الجدول، وهذا شيئ مرهق جداً ويسبب ضياغ الكثير من الوقت والجهد، وغير محتمل بالمرة، ماذا لو أن موقعك يحتوي على ١٠٠٠ صفحة HTML، هل ستقوم بالتعديل على الـ ١٠٠٠ واحدة تلو الأخرى؟! ام تحتاج إلى طريقة تقوم بالتعديل مرةً واحدة ويتم تطبيق التعديل على الـ ١٠٠٠ بدون تعديل الأكواد الموجودة في تلك الصفحات. (هذا ما تمكنك من فعله CSS).
من السهل الخطأ في كتابة عناصر الجدول، حيث أن الجدول يتكون من رأس head وجسم body وتزيله foot، وصفوف rows وأعمدة columns، وربما تحتاج إلى وضع جدول داخل جدول،ماذا لو صفحتك تتكون من عناصر كثيرة وبالتالي الكثير من أسطر الأطواد؟ سيكون من الصعب تتبع الخطأ خلال هذة الأسطر.
صعبة القراءة والفهم، ماذا لو فتح شخص غيرك ملف الكود ووجد جداول داخل جداول ولا يدري ما دور هذا وما دور ذاك وجميع العناصر متشابهه؟!
هذا ما جعل هذة الطريقة مهجورة الآن ولا يكاد يستخدمها أحد في تخطيط (هيكلة) صفحات الويب، حيث حل محلها استخدام الـ CSS.
ما هي CSS؟
CSS اختصار لـ Cascading Style Sheets أي (لغة الأنماط الإنسيابية)، وهي اللغة المستخدمة لإضفاء مظهر جمالي على صفحات الويب عن طريق التحكم بالوان الخطوط والخلفيات والمساحات بين العناصر وطول وعرض العناصر وأماكنها في صفحة الويب، والتحكم بتخطيط الصفحة (Page Layouts).
إذاً فإن CSS تتحكم في مظهر عناصر لغات الترميز (مثل HTML أو XML ) لذلك CSS في حد ذاتها لا تفيد بشئ ما لم يتم ربطها بصفحات HTML.
وكما قلنا في المقدمة السابقة، CSS تحول صفحات الويب الجامدة ذات المحتوى الثابت إلى صفحات نابضة بالحياة بإضفاء مظهر جمالي على عناصر الصفحة بإستخدام الألوان، المسافات، الخطوط، وتحريك العناصر.
كيف تعمل CSS؟
بإختصار شديد، تقوم CSS بتحديد بعض عناصر HTML ثم تقوم بإختيار بعض الخصائص التي يمكن تطبيقها على هذة العناصر وكل خاصية لها قيمة يتم تحديدها.
| 1 2 3 | p{ color: red;} |
وهكذا، CSS تمتلك مجموعة من الخصائص، كل خصية لها مجموعة من القيم، ويتم تطبيق الخصائص على العناصر التي يتم تحديدها، هذة العناصر في CSS تسمى محددات أو Selectors.
أين تكتب أكواد CSS؟
هناك ثلاثة طرق لإضافة أكواد CSS إلى صفحة الويب (HTML document):
الطريقة الأولى : من خلال إضافة CSS مباشرةً إلى عناصر HTML بإستخدام الخاصية style لعناصر HTML
| 1 2 3 | <p style="color: red;">This text is important.</p> |
أي أن أكواد CSS لن يتم تطبيقها الإ على هذا العنصر فقط.
الطريقة الثانية : من خلال إضافة أكواد CSS في جزء <head> في ملف HTML داخل الوسم <style> هكذا:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <title>Hello World</title> <style type="text/css"> p{ color: red;} </style> </head> <body> <p>This paragraph will be red.</p> </body> </html> |
وبهذة الطريقة لن يتم تطبيق أكواد CSS إلا على هذة الصفحة فقط.
الطريقة الثالثة: من خلال إضافة أكواد CSS في ملف منفصل بإمتداد .css وليكن style.css
| 1 2 3 | p{ color: red;} |
ثم يتم ربط هذا الملف في جزء <head> في ملف HTML هكذا:
| 1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <title>Hello World</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>This paragraph will be red.</p> </body> </html> |
في ملف HTML هذا، يتم ربط ملف style.css الموجود في نفس المجلد الموجود فيه ملف HTML
لماذا يجب ألا تقوم بوضع أكواد CSS داخل ملفات HTML مباشرةً؟
كما يدل عنوان المقال، اختراع CSS جاء بهدف فصل المظهر عن محتوى الصفحات.
وكما قلنا أن الطريقة الثالثة هي أفضل الطرق، حيث تقوم بربط ملف الـ style.css المنفصل في جميع صفحات موقعك، وبذلك يتم التحكم في مظهر جميع الصفحات من خلال ملف واحد فقط وهو ملف style.css، فهب أن موقعك يحتوي على ٢٠ ملف HTML أو أكثر، وتريد تغير حجم الخط للفقرات النصية <p> في جميع الصفحات، كل ما عليك هو فتح ملف style.css وتعديل الجزء الخاص بالفقرات النصية كما تشاء، وستجد أن التعديل تم تطبيقة على جميع صفحات موقعك (حيث قمت مسبقاً بربط ملف style.css في جميع الصفحات).
