دروس السي إس إس - صفحات الأنماط الانسيابية - CSS مقدمة عامة لصفحات الأنماط الانسيابية

مقدمة عامة لصفحات الأنماط الانسيابية


السلام عليكم ...........

هل تخطط لتنفيذ مشاريع ويب يزيد عدد صفحاتها عن العشرة صفحات !?

هل تريد إضافة مزيد من الاحترافية و السهولة معاً على عملك في مجال تصميم و تطوير المواقع ؟

هل ترهقك طلبات العملاء في تغيير أشياء بسيطة يراها العميل سهلة لكنك تراها مرهقة مع تراكم أعمالك؟

إذا كانت إجابتك على الأسئلة السابقة بنعم ، فهذه السلسلة من الدروس هي لك !

حسناً ... لنتخيل معاً أنك قبلت تنفيذ مشروع متوسط الحجم لأحد العملاء و أنك بطبيعة الحال ستحتاج لبرمجة ما يزيد عن العشر صفحات . لنتخيل أيضاً أنك انتهيت من المشروع بعد عمل متواصل لمدة عشرة أيام و قد عرضت المشروع على العميل لأنك تعتقد أنه أصبح جاهز للاستخدام الآن . ماذا لو فاجأك العميل بطلب تغيير حجم الخط من القيمة "2" إلى القيمة "3" ! هل ستضطر لفتح كل صفحة و التعديل في كل فقرة من فقراتها لتغير هذه القيمة ! ماذا لو كان المشروع مكوناً من 50 صفحة ؟!
و ماذا لو كان يعمل على المشروع أكثر من شخص بشكل منفصل ؟
في الواقع فإن هذه القصة القصيرة التي افتتحنا بها هذا الفصل و التي ستواجهك كثيراً عند التعامل مع عملاءك تنقلنا للتفكير من استخدام لغة "هتمل" وحدها – و التي تستطيع تعلمها من خلال دروس الموسوعة على الرابط التالي : دروس هتمل - إلى لغة تعطينا مرونة أكبر .

الفكرة باختصار تكمن في فصل التنسيق عن المحتوى و من ثم وضع التنسيق في ملف منفصل يمكنه تغييره لتتغير كامل صفحات موقعك !

تشير الأحرف في اسم اللغة إلى الأحرف الأولى من العبارة الإنجليزية التالية :

Cascading Style Sheets

و تعني (صفحات الأنماط الانسيابية) . و اختصارها هو : CSS .

ينبغي أن لا تأخذ هذه الدروس من وقتك الكثير ! نصف ساعة من الزمان تعتبر مدة جيدة .

في الواقع فإننا نستخدم نوعاً من أنواع صفحات الأنماط الانسيابية في صفحاتنا دون أن ندري . و لنأخذ هذا المثال البسيط :



كما لاحظت ، لم أقم بتحديد أي تنسيق للنص و مع ذلك فإنه عند فتح الصفحة باستخدام المتصفح ستجد تنسيقاً معيناً لنوع الخط و حجمه و لونه . هذا التنسيق قد يختلف من جهاز لآخر بحسب الإعدادات الافتراضية للعرض .
إذاً ، كأننا نقول بأن المتصفح يحتفظ بملف يحوي أنماط معينة من التنسيق يستخدمها إذا لم تحدد التنسيق بشكل واضح في صفحتك .
في الواقع ، إن تقنية السي اس اس تعتمد نفس المبدأ . لن تكتب أي تنسيق في صفحة الهتمل الأساسية لكنك ستحدد بالتفصيل التنسيق الذي تريده في ملف منفصل .
لنلقي نظرة على الطريقة بالتفصيل من خلال هذه السلسلة من الدروس..

معلومة إضافية

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


معلومة إضافية

W3C هو اختصار لـ World Wide Web Consortium و هي الجمعية المسؤولة عن إصدار نسخ قياسية من لغة HTML .