لماذا اوراق الانماط؟
اذا كنت تصمم صفحات بالطريقة «التقليدية»، تكون المواصفات الرسومية داخل رموز HTML في الصفحة. هكذا، كلما اردت عرض نص باللون الاحمر، تكتب <font color="red">. واذا اردت عرض جدول بإطار عريض، تكتب <table border="2">.
باستخدام هذا الاسلوب وفي موقع جامد (اي ان كل مقال له صفحة HTML خاصة به)، تصبح عملية تعديل صفحات الموقع بكامله كابوساً فعلياً: فيجب البحث في كل الصفحات عن مقطع HTML المطلوب تعديله ثم تنفيذ هذا التعديل صفحة بعد صفحة (كاستبدال مثلاً علامة <font color="red"> بعلامة <b> اذا قررت تحويل العناصر التي كانت حمراء الى خط اسود).
كما تعرف، يحسّن SPIP الوضع كثيراً: فلا تحتاج الى تعديل مئات الصفحات بل تقتصر العملية على بضعة صفحات نموذجية ليظهر التعديل تلقائياً في كامل الموقع. الا ان المشكلة، وان تحجّمت، لا تزال موجودة. فعلى سبيل المثال، نفترض انك قررت تلوين العديد من العناصر في الموقع باللون الازرق لإعطاء موقعك نوعاً من الهوية الرسومية. واذا قررت يوماً ما استبدال الازرق بالاخضر، عليك بالبحث عن كل العناصر الملونة بالازرق وتغيير لونها الى الاخضر. ومع ان عدد الصفحات النموذجية قليل جداً مقارنة بموقع جامد، تبقى هذه العملية طويلة ومحبطة: فليس من السهل في هذا الوضع تغيير الصفحات بسرعة اقله لتنفيذ بعض التجارب.
يأتي الحل من استخدام اوراق الانماط. فورقة الانماط هي عبارة عن ملف تحدد فيه تعريف لمجموعة من المواصفات الرسومية والاماكن التي تُطبَق فيها هذه المواصفات. وهناك ميزتان مهمتان في استخدام اوراق الانماط:
– ورقة الانماط هي ملف واحد ومركزي يمكنك تطبيقه على اي عدد من ملفات HTML (وبالتالي على اي عدد من صفحات SPIP النموذجية).
– يتم تعريف المواصفات الرسومية مرة واحدة في ورقة الانماط مهما كان عدد الاماكن التي تُطبَق فيها في ملفات HTML.
عملياً
عندما تطبق ورقة انماط على ملف HTML (قد يكون صفحة نموذجية من SPIP)، تعلن عنها في علامة <head> في ملف HTML - في جوار العنوان وحقول <meta> الاخرى، هكذا:
<head>
...
<link rel="stylesheet" type="text/css" href="my_styles.css">
</head>هنا يحتوي ملف my_styles.css المواصفات الرسومية التي تريد تطبيقها على صفحة HTML (سنعتبر في كامل هذا التمرين ان my_styles.css هو الاسم الذي اخترته لملف ورقة الانماط). ويحمل هذا الملف لاحقة «css». فعبارة CSS هي اسم اللغة المستخدمة لاوراق الانماط [1]، كما ان HTML هو اسم اللغة المستخدمة لتصميم الصفحات.
ملاحظة: يمكن تطبيق ورقة الانماط على صفحة HTML تقليدية (اي «جامدة») كما يمكن تطبيقها على صفحة نموذجية من SPIP. ويعني ذلك ان اي امر CSS يتوافق مع HTML التقليدي يتوافق ايضاً مع الصفحة النموذجية في موقعك.
اذا قرأت بتمعن الفقرات السابقة، قد يعتريك بعض الاحباط: نعم يجب تعلم لغة جديدة لاستخدام اوراق الانماط (وSPIP لا دخل له هنا!). فلا تستخدم اوراق الانماط لغة HTML. الا ان هذه اللغة الجديدة تتميز ببساطتها وتكفي بعض الامثلة للتعرف عليها...