صمم صفحتك بإستخدام لغة CSS

الـ (CSS) هي إختصارا لـ (Cascading Style Sheets) وتعني صفحات الأنماط التعاقبية و هي لغة نمط الصفحة وتستخدم لوصف مظهر أو شكل الصفحة المكتوبة بأي لغة من لغات لترميز .

وتعتبر أكثر تطبيق مستخدم لتنسيق صفحات الويب المكتوبة بـ (HTML) و (XHML). لغة صفحات الأنماط التعاقبية (CSS) تهدف في المقام الأول ليتمكن المصمم من فصل المستند المحتوي على مضمون صفحته (المكتوبة بلغة (HTML) أو أي لغة مماثلة من لغات الترميز) عن المستند المحتوي على أنماط وتنسيقات هذة الصفحة، بما في ذلك الألوان والخطوط و الخلفيات وغيرها.
متى ظهرت لغة الـ (CSS)؟
بدأت مراحل ظهور لغة صفحات الأنماط التعاقبية في عام 1994 م وقد أهتمت منظمة W3C حينها بمطورين هذة اللغة وفي نهاية 1996 م أصبحت أكثر فعالية وقد أصدرت المنظمة أول إصدار رسمي للغة في شهر ديسمبر 1996 م, وهناك حتى الآن ثلاثة إصدارات من اللغة وهي CSS3 ,CSS2, CSS1 وهذة الأخيرة ما زالت تحت التطوير حتى 2009 م.
تركيب ورموز لغة الـ(CSS)
المصطلحات اللغوية لـ(CSS) بسيطة و تستخدم الانجليزية في عدد من الكلمات الرئيسية لتحديد أسماء مختلف خصائص النمط. كل صفحة من صفحات الأنماط تتكون من قائمة من القواعد. كل قاعدة أو مجموعة قواعد تتكون من واحد أو أكثر من المحددات "SELECTORS" و جزء التوضيح "Declaration-Block" وفيما يلي شرح لكل منهما:
المحددات "SELECTORS": وهي في الغالب العناصر اللأساسية للغة الـ (HTML) مثل:

(H1, P, BODY, TABLE,....)

جزء التوضيح "Declaration-Block": و يكون محصوراً بين القوسين { }ومحتوياً على واحد أو أكثر من التوضيحات التي يفصل بينها بفواصل منقوطة (؛) ويتألف كل توضيح من خانتين أساسيتين وهما الخاصية "PROPERTY" والقيمة "VALUE" ويفصل بينها بإستخدام النقطتين الرأسيتين (:) كما هو موضح في الصورة (1).
الخاصية "PROPERTY" : وهي أسماء الخصائص التي تصف العنصر. مثل :
(color, text, font-face, font-size,….)

القيمة "VALUE": وهي القيم التي تعرف الخصائص مثل:
(color: yellow, font-face: arial, .…)
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
1) قاعدة (صفحات الأنماط التعاقبية)
- يشرح هذا الفيديو مثال بسيط لكتابة قاعدة (صفحات الأنماط التعاقبية) (المحتوى باللغة الإنجليزية)

هنا مثال آخر يعرض مجموعة من الأنماط المختلفة لصفحة ويب. (المحتوى باللغة الإنجليزية)
ماذا يقصد بـ " التعاقبية" في لغة (CSS)؟
صفحات الأنماط التعاقبية تم إعداها بطريقة تمكنك من الحصول على عدة خصائص لنفس العنصر من عدة مصادر, بحيث تؤثر جميعها في هذا العنصر. ويمكن أن يحصل العنصر على نمط أو أكثر من المصادر التالية, مع العلم أن المصدر رقم (3) يملك الأولوية الأعلى:
نمط المتصفح:
لكل متصفح أنماط الصفحات الخاصة به يحدد من خلالها النمط الإفتراضي لكل عنصر من عناصر الـ HTML(X), وتظهر على العنصر في حالته الإفتراضية مالم يتأثر بنمط من مصدر آخر, مثال على ذلك اللون الأزرق للروابط في متصفح الإنترنت إكسبلورر.
نمط المستخدم:
يمكن لمستخدم الويب ضبط إعدادات أنماط الصفحات للتحكم في نمط العرض لكل أو بعض من صفحات الويب, ولهذا النمط أولوية أعلى من نمط المتصفح حيث أنه يتم تطبيقه على العنصر في حال وجد تعارض مع نمط المتصفح.
نمط المحرر:
نمط صفحات المحرر هي التي تعد بواسطة محرر أو مصمم الصفحة والتي يحاول من خلالها التغلب على نمط صفحات المتصفح ونمط صفحات المستخدم, بمعنى أن نمط المحرر يملك الأولوية الأعلى بين هذة المصادر الثلاثة. يمكن أن يكون لصفحة الويب الواحدة عدة أنماط من أنماط صفحات المحرر, وقد تأخذ أحد الحالات التالية:
أنماط خارجية: (وتكون قواعد الأنماط فيها مكتوبة في مستند مستقل عن المسنتد الذي يحتوي على مضمون الصفحة) ويتم إستيراداها بعمل رابط داخل صفحة المحتوى يشير لمستند أنماط الصفحة ويكتب الرابط بهذا الشكل داخل وسم :

أنماط داخلية: (وتكون مكتوبة ضمن صفحة المحتوى داخل وسم في الصفحات المكتوبة مثلاً بـلغة (html) مثال على ذلك:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
نمط السطر: وهذا النوع هو ما يكتب داخل نمط عنصر في صفحة المحتوى كالتالي:

Text

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

، ثم في وقت لاحق تأتي قاعدة في نمط المحرر تحدد لون الخط لوسم الفقرة

إيضاً باللون الأحمر, فإنه سوف يتم تحديد أي اللونين يطبق بإستخدام ما يسمى بـ"التعاقبية" والتي ستسمح لهذه الأنماط المتعددة بأن "تتعاقب إلى الأسفل" لكل عنصر من العناصر حيث أن النمط الأقل أولوية يظهر قبل النمط الأعلى أولوية, بمعنى أنه سيتم تطبيق قواعد نمط المتصفح وفي حال وجدت أنماط متعارضة معها في نمط المستخدم فإن الأنماط ستتعاقب في التطبيق إلى الأسفل ليتم تطبيق نمط المستخدم الذي يملك الأولوية الأعلى, والصورة (2) تبين ترتيب تعاقبية الأنماط من المصادر المختلفة.
التعاقبية إذاً هي النظام التي يدير الأنماط القادمة من مصادر متعددة، وتحددأي لأنماط تطبق عندما يكون هناك تعارض.
(2)- مستويات الأنماط التعاقبية
ماذا قدمت لغة (CSS)؟
1. السهولة والمرونة العالية في تعديل تنسيق الصفحات:

إمكانية فصل الصفحة التي تحتوي على التنسيقات بإستخدام لغة (CSS) (إسم الملف.css) عن الصفحات المحتوية على المضمون (صفحات HTML مثلاُ) وهو الهدف الرئيسي من إختراع لغة (CSS), من شأنه أن يحسن إمكانية الوصول إلى المحتوى مع توفير المزيد من المرونة والتحكم في تحديد الأنماط والتنسيقات. حيث ستصبح هناك إمكانية لتغيير نمط الصفحة دون المساس بالصفحة المتضمنة للمحتوى. كما يساعد ذلك في تسهيل عملية تغيير النمط لعدة صفحات ويب بإجراء عملية التعديل مرة واحدة.

2. الحد من التعقيد والتكرار في هيكلية المحتوى:

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

3. حل مشاكل التعامل مع الجداول في تصميم الصفحات:

وجدت جداول (HTML) لعرض البيانات بشكل منظم على هيئة صفوف وأعمدة تسهل على المستخدم قرائتها وإيجاد العلاقات بينها, ولكن تعدى إستخدامها ذلك إلى تقسيم وتخطيط صفحات الويب وفيما يلي بعض إستخدامات الجدوال في تصميم صفحات الويب:
تقسيم صفحة الويب إلى جزء للافتة الموقع وجزء لقائمة الروابط الرئيسية وجزء للمحتوى الرئيسي وجزء آخر لخانة التذييل.
ترتيب عرض النماذج التي يمكن أن تعبأ من قبل زوار الموقع.
فصل محتويات لموقع عن بعضها البعض بإدراج خلايا فارغة والتي قد تكون غير ظاهرة للمستخدم.
استخدام الجداول المتداخلة بحيث يوضع جدول داخل خلية جدول آخر مما يؤدي إلى تعقيد الصفحة وإن كان ذلك غير ظاهر للمستخدم إيضاً.
يمكن أن يكون هذا التحايل في إستخدام الجداول محبباً لدى معظم المصممين ولكن في الحقيقة سيء جداً فهو يميل إلى التعقيد ويفقد المرونة في عملية التعديل, أيضاً فإن الجدوال توصف لدى الكثيرين بأنها "غدراة" فخطأ بسيط من المصمم قد يفسد التصميم بأكملة, كما أن استخدام الجداول في تخطيط مظهر صفحات الموقع توجد صعوبة لدى محركات البحث في إيجاد مؤشرات لهذة المواقع.

أتت لغة صفحات الأنماط التعاقبية (CSS) لتحل مشاكل التعامل مع الجداول وتساعد في تقسيم وتخطيط صفحات الويب, بالإضافة إلى تقديمها إمكانية إعطاء وصف دقيق لخصائص كل عنصر من العناصر مع تسهيل عملية البحث على محتويات الموقع عبر محركات البحث المختلفة.

4. الدقة في التنسيق والكتابة:

من خلال (CSS) يمكن إخراج البيانات بدقة عالية بإستخدام وحدة البيكسل كما تسمح بالتحكم في الفراغات بين السطور والكلمات والحروف ، وتغيير أنماط الحروف من كبيرة إلى صغيرة والعكس.

5. عرض البيانات في بيئات عرض مختلفة:

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

المصادر

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]