الانماط التي يعرفها SPIP
كما صرت تعرف، تتيح اوراق الانماط «مركزة» المواصفات الرسومية التي كنا ندخلها سابقاً في HTML وادارتها بسهولة. ويجعل ذلك من استخدامها امراً مرغوباً فيه ولكن لا يمكننا القول انه لا غنى عنه: فيمكنك الاستمرار بإدخال مواصفات رسومية هنا او هناك داخل HTML حتى لو كنت تستخدم اوراق الانماط.
في SPIP، تناط بأوراق الانماط وظيفة اساسية اضافية: انها تستخدم لتغيير المواصفات الرسومية للعناصر التي لم يتم التعريف بها في صفحاتك النموذجية! والحال ان SPIP ينتج من تلقاء نفسه، مجموعة من انماط العرض المتنوعة. على سبيل المثال، يحول النظام اختصارات الكتابة (وصلات هايبرتكست وعناوين الفقرات والخط الاسود والمائل والجداول...) الى علامات HTML لعرضها على الشاشة. وينطبق الشيء نفسه على الاستمارات الآلية (الرد على المنتديات وتوقيع العرائض...) وعناصر كثيرة اخرى.
ولتمكينك من تعديل مظهر هذه الانماط، يعطيها SPIP اسماء محددة وثابتة (هناك لائحة كاملة في «Spip واوراق الانماط»). على سبيل المثال، لا تنتج {{{عناوين الفقرات}}} علامة <h3> بسيطة بل علامة <h3 class="spip">. ما الفائدة من ذلك؟ هذه العلامات تحمل اسماً محدداً في الصفة class: فهذا الاسم يحدد الى اي «فئة» (class) تنتمي، اي، بمعنى آخر، مجموعة من عناصر HTML ترث المواصفات الرسومية نفسها المعرف بها في ورقة الانماط.
كيف، اذاً، يمكننا تعديل مظهر كل عناوين الفقرات في SPIP؟ الامر بسيط للغاية. فيكفي فتح ملف my_styles.css (او اي اسم آخر قررت اعتماده) في اي محرر للنصوص واضافة الاسطر التالية:
h3.spip {
color: red;
font-size: 18px;
}قم بإعادة تحديث الصفحة لتظهر كل عناوين الفقرات آلياً باللون الاحمر وببنط 18. واذا لم تحصل على هذه النتيجة، تأكد من انك اعلنت عن ورقة الانماط في الصفحة النموذجية (داخل علامة <head> كما اوضحنا في المقال السابق)، ثم قم بإعادة تحديث الصفحة.
يمكننا باختصار توضيح كتابة هذه القاعدة المستخدمة لتصميم العناوين:
– h3.spip مباشرة قبل القوسين تعني ان القاعدة التالية تنطبق على علامات <h3> التي تتمتع بصفة class تساوي «spip». ملاحظة: لن تنطبق هذه القاعدة لا على علامات <h3> التي لا تملك الصفة ولا على العلامات التي تملك هذه الصفة لكنها ليست علامات <h3>.
– يحتوي القوسان لائحة المواصفات الرسومية التابعة لهذا النمط المعرَّف به. ونذكر ان كل المواصفات غير المذكورة في هذه اللائحة تحافظ على صفاتها الافتراضية العائدة للعلامة. وفي مثالنا هذا، ينتج عن علامة <h3> نص اسود كالعادة لأن النمط لا يذكر اي تغيير في هذا الصدد.
– ينتهي كل من المواصات داخل القوسين بفاصلة منقوطة. وهي مكونة من اسم (وهذا اسم تحدده لغة CSS) تتبعه نقطتان ثم قيمة او اكثر. ونرى في مثالنا انه تم تحديد اللون بالاحمر وان الخط يعرض ببنط 18.
ملاحظة هامة: اذا اضفت انماطك الخاصة، اعلم ان الاسم الذي تعطيه للصفة
classهو كيفي. فلا فرق لدى متصفحك اذا اطلقت على الصفة اسمspipاوmy-titleاوgoodbye. الشيء الوحيد المهم هو ان هذا الاسم يناسب فعلاً القاعدة التي عرفت بها في ورقة الانماط.
كما تلاحظ، فإن لغة CSS بسيطة للغاية وتستخدم الكتابة نفسها التي تستخدمها لغة HTML التقليدية. وعندما تتمرس اكثر في لغة اوراق الانماط ستقابل اكثر واكثر مفاهيم موروثة من HTML التقليدية (border وwidth وheight...).
ادارة الذاكرة المخبأة
تترتب على وضع تعريف الانماط في ملف منفصل (وهو my_styles.css) نتائج مهمة. فهذا الملف، وعلى عكس الصفحات النموذجية لا يخضع لإدارة SPIP (فالنظام لا يحتاجه). ويعني ذلك انك اذا قمت بتعديل ورقة انماطك، لا تحتاج الى تفريغ ذاكرة SPIP المخبأة لتحديث صفحاتك: يكفي اعادة تحميلها في المتصفح. وهذا يسهّل اكثر وظائف التحكم بتصميم الصفحات.
على انه يجدر التذكير بأنك يجب ان تعلن عن ورقة انماطك في ملفات HTML وان تقوم بتحديثها لتأخذ في الاعتبار هذا الاعلان: فيجب على السطر
<link rel="stylesheet" type="text/css" href="my_styles.css">
ان يدخل في الذاكرة المخبأة لكي يتمكن متصفحك من تنفيذ مواصفاتها.