مدونة وليدوف التطويرية

بسم الله الرحمن الرحيم

إن عصر تصميم المواقع بلغة HTML قد ولى ، والآن من يصمم المواقع بدون استخدام صفحات الانماط الانسيابية CSS هو باعتقادي “أمّي” في علم تصميم المواقع ، لذلك على جميع مصممي المواقع بالطريقة التقليدية تعلم هذه التقنية لمواكبة التطور السريع في علم تصميم المواقع.

ماهي لغة CSS؟

إن كلمة CSS قادمة من الحروف الأولى للجملة : Cascading Style Sheets ، والتي تعني باللغة العربية : صفحات الانماط الانسيابية ، تم اختراع لغة CSS عام 1995 لكن كان أول ظهور رسمي للغة CSS عام 1996 عبر منظمة W3C وهي الإصدارة CSS1 ، ثم في عام 1998 أصدرت الإصدارة CSS2 ، ثم صدرت آخر إصدارة عام 2003 وهي CSS2.1 وهي اللغة المتداولة الآن ..

توجد هناك إصدارة جديدة تحت الإنشاء ولا يعرف موعد إطلاقها وهي CSS3.

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

باختصار ، لغة CSS هي مجموعة من الأوامر المكتوبة في ملف مستقل-عادة-تتحكم بخصائص HTML والتي تحدد مظهر الصفحة المصممة ، كلون الخط ونوعه وخلفية الصفحة وشكل الجداول والإطارات، إلخ..

ماذا تعني صفحات الانماط الانسيابية؟

انظر إلى الصورة التالية :

يمكن بسهولة أن تفهم الجملة “صفحات الانماط الانسيابية” أو “Cascading Style Sheets” إذا عرفت الأنواع الثلاثة للـ CSS ألا وهي :

1. صفحة نمط المتصفح :
   وهي الشكل الإفتراضي لظهور صفحات HTML في المتصفحات ، على سبيل المثال : لون الخلفية أبيض ، لون الخط أسود ، لون الروابط أزرق ، لون الروابط المزارة بنفسجي ، إلخ ..
2. صفحة نمط المستخدم :
   وهي الشكل الافتراضي للمستخدم ، يعني مثلا لو قمت بتحميل ثيم معين للويندوز ، سوف تعرض صفحات المواقع بشكل مختلف
3. صفحة نمط المحرر :
   ؤهي الشكل الذي يقوم مصمم الموقع بتحديده وحفظه على شكل صفحة .css ويتحكم بشكل الموقع من خلاله.

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

ولذلك سميت (صفحات الانماط الانسيابية) ، لأن الشكل الصفحة المعروضة تأخذ الشكل المحدد في الصفحات الثلاث المذكورة بشكل متعاقب ، تأخذ خيارات (صفحة نمط المحرر) فإن لم تكن محددة تأخذ (صفحة نمط المستخدم) فإن لم تكن محددة تأخذ (صفحة نمط المتصفح).

ماهي فوائد لغة CSS؟

هناك خمسة أسباب رئيسية تجبرك على التصميم بتقنية CSS:

1. سهولة التعديل والصيانة :
   إن أهم ميزة لـcss هي أنك تستطيع تعديل أو صيانة عدد كبير جدا من ملفات HTML من خلال تعديل ملف واحد فقط هو ملف css.
2. سهولة الوصول :
   إن استخدام css يسهل عملية الوصول للمعلومة أو النقطة المرغوبة في صفحة HTML على الطرفين ، المستخدم والمتصفح ، فصفحات html ستكون تقريبا شبه خالية من الوسوم لأنها ستكون مخزنه في ملف css ممايجعل الصفحة تحتوي على المحتوى والمعلومات فقط ، فيصبح أسهل على الكمبيوتر أو المتصفح الوصول وعرض الملعومات.
3. تغيير بيئة العرض :
   أعني بذلك أن بيئة المتصفح تختلف عن بيئة الطباعة وتختلف عن بيئة الكمبيوتر الكفي ، فأنت تحتاج لعرض نفس الصفحة والمحتويات ولكن في عدة بيئات مختلفة ، فبدلا من تغيير محتويات html يمكنك تغيير فقط طريقة العرض لتوائم البيئة المستهدفة.
4. تقليل حجم الملفات :
   إن استخدام ملف css يغنيك عن استخدام اكواد كثيرة جدا في ملفات html كشكل الخط ولونه ولون الخلفية وصورة الخلفية والجداول وصورة الإزاحة والكثير الكثير من أكواد html كلها تكون محفوظة في ملف واحد ألا وهو css ، مما يتسبب في هبوط حاد في حجم ملفات html مما يقلل الضغط على السيرفر ويسرع العرض بشكل كبير.
5. سيطرة أكثر على الكتابة :
   يمكنك التحكم بالكتابة والنصوص في صفحات html بشكل أوسع من خلال css ، فيمكنك التحكم بالفراغات بين السطور والكلمات والحروف ، وتغيير أنماط الحروف من كبيرة إلى صغيرة والعكس.

ودمتم بود ،،

انتقل الآن للدرس الثاني :

كيف تعمل تقنية صفحات الأنماط الانسيابية CSS-Cascading Style Sheets؟

وليدوف دروس CSS