لغة CSS

مقدمة إلى CSS

متطلبات تعلم المنهج :

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

ما هي CSS ؟

CSS هي اختصار لـ Cascading Style Sheet و هي تعني صفحات الأنماط الانسيابية ، و تستخدم تقنية CSS في تصميم صفحات الويب بحيث يتم من خلالها التحكم في شكل الموقع بالكامل من حيث نوع الخط المستخدم أو لونه أو حجمه و ذلك دون الحاجة لكتابة تلك الأكواد أو تكرارها في كل صفحة داخل الموقع، و بالتالي فيمكن من خلال ملف واحد فقط إجراء أي تعديلات على كافة الملفات مما يوفر الكثير من الجهد و الوقت . و وظيفة هذه التقنية هي التحكم بكيفية عرض صفحة الويب دون التدخل في المحتوى، مما يسهل من عملية إدارة الموقع، فتعديل ملف CSS واحد سيؤثر على تصميم كافة صفحات الموقع . فملفات CSS تعمل على تبسيط عملية تصميم و إدارة المواقع، وتحل الكثير من المشاكل التي قد يواجهها أي مطور للمواقع، فعلى سبيل المثال إذا كنت قد صممت موقعك باستخدام لغة الـ HTML ، و على فرض أن هذا الموقع يتكون من خمسة صفحات، ثم أردت بعد فترة تطوير و تعديل طريقة عرض هذا الموقع ... عليك هنا إعادة تصميم الصفحات الخمس من جديد ، هذا أمر سهل جداً و عليك أن تبدأ الآن أما على فرض أن موقعك هذا يحتوي على عدد أكبر من الصفحات و ليكن 50 أو 100 صفحة فمن المؤكد أنك سوف تتردد قبل الشروع في التطوير و التعديل ... أما إذا كنت قد صممت موقعك منذ البداية باستخدام تقنية CSS ، فكل ما عليك هو تعديل ملف واحداً فقط .
فملفات الأنماط الانسيابية CSS تلغي الحاجة إلى استخدام الكثير من أوامر HTML ، كأمر FONT الذي يحدد نوع الخط أو حجمه أو لونه، كذلك الأمر TABLE الذي يستخدم لإنشاء الجداول ، و بمعنى آخر يستطيع أي شخص باستخدام CSS أن يصمم موقعه بالكامل دون استخدام الجداول كما هو متبع في الطرق التقليدية لتصميم الصفحات، و هذا لا يعني أن الجداول لن يتم استخدامها مع CSS ، فالجداول لها وظيفة أخرى وهي عرض وتنسيق البيانات التي تحتاج إلى أن تكون ضمن جدول . و قد قامت منظمة W3C بابتكار هذه التقنية و جعلتها كمعيار قياسي لتصميم المواقع ، وقد بدأت الكثير من المواقع في الانتقال من الأسلوب التقليدي للتصميم باستخدام الجداول إلى الأسلوب الجديد باستخدام تقنية CSS .

لماذا نستخدم صفحات الأنماط الانسيابية CSS ؟

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

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

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

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

التركيبة البنائية لـ CSS

التركيبة البنائية :

إذا أردت استخدام صفحات الأنماط الانسيابية CSS في موقعك كل ما عليك هو كتابة أوامر CSS و لكن كيف يتم كتابة تلك الأوامر إذن علينا أن نتعرف أولاً على التركيبة البنائية " الصيغة العامة " لتلك الأوامر : و هي تتكون من ثلاثة أجزاء selector و property و value كما يلي .

و بنظرة سريعة نجد أن أوامر CSS تتكون من شقين الشق الأول هو selector و هي تعني المنتقي و هو عبارة عن أحد وسوم الـ HTML المتعارف عليها " فيمكنك استخدام الوسم body للصفحة أو p للفقرات، أو a للروابط ، أو table للجداول و هكذا " ، .
و الشق الثاني و يدعى declaration و تعني الإعلان ، و هو ما يقع بين القوسين المعقوفين و يحتوي على property و هي الخاصية التي تريد تطبيق القيمة عليها و سوف نطلق عليها مصطلح المتغير ، و كذلك value و هي تعني قيمة المتغير .

لاحظ أن :

أن الصيغة العامة للأمر تستلزم كتابة وسم HTML الذي سوف يطبق عليه النمط أولاً ثم قوسين معقوفين نكتب بداخلهما المتغير " property " و القيمة " value " على أن نفصل بينهما بنقطتين رأسيتين ، عليك ملاحظة المثالين التاليين جيداً :

لاحظ أن :

1 ـ الأمر الواحد قد يحتوي على أكثر من منتقي " selector " و هنا يجب أن يتم الفصل بينهم بفاصلة عادية هكذا " , " ، أو أكثر من متغير " property " و أكثر من قيمة " value " و هنا يجب أن يتم الفصل بينهم بفاصلة منقوطة هكذا " ; " .

3 ـ إذا كان اسم الخط يتكون من أكثر من كلمة واحدة مثل Gill Sans ، ضع حوله علامتي اقتباس داخل الكود :

body { font-family: "gill sans", "lucida sans", serif }

4 ـ بالنسبة للأنماط المضافة داخل السطر inline استخدم علامات اقتباس مفردة :

<p style="font-family: 'gill sans', 'lucida sans', serif">

أمثلة :

المجموعات :

يمكن إنشاء مجموعات بواسطة الأنماط الإنسيابية لها نفس القيمة فعلى سبيل المثال إذا اردت أن تجعل جميع العناوين تظهر باللون الأحمر يمكن تطبيق ذلك من خلال الكود التالي كل ما عليك هو وضع فاصلة عادية بين كل selector تقوم بتحديدها :

الآن دعونا نطرح عليكم الأسئلة التالية :

ماذا تفعل إذا كنت تريد استخدام أكثر من تنسيق مختلف بحيث يتم عرضها في نفس الصفحة ؟
ماذا تفعـل عند وضع رابـط تشعيبي في صفحتـك و أردت أن تعـدد التأثيـرات على هذا الرابـط ؟

للإجابة على هذه الأسئلة يجب أن نتعرف على ما يسمى بالفئات و المعرفات ... فبالتأكيد فإن ذلك سيساعدنا إلى إنشاء ملفات CSS أكثر انسيابية و أفضل تأثيراً .
دعونا نعود إلى التركيبة البنائية " الصيغة العامة " لأوامر CSS و التي تعلمناها منذ قليل و هي .

و كما تعرفنا أن الصيغة العامة للأمر تتكون من شقين ... دعونا من الشق الثاني الآن و هيا نركز في الشق الأول و هو selector و هي تعني المنتقي و هو عبارة عن أحد وسوم الـ HTML المتعارف عليها كما تعلمنا فمثلاً لو أردنا جعل لون الكتابة باللون الأزرق ستكون صيغة الأمر هكذا .

الفئات " Classes " :

فلو أردنا أن نطبق منتقي " selector " ما على مجموعة من أوامر HTML كل ما علينا هو جعل ذلك المنتقي يظهر على شكل فئة فيمكن تطبيقها على أكثر من أمر ... فلو أردنا جعل لون الكتابة باللون الأزرق و لكن أردنا أن يتم جعل هذا على شكل فئة ستكون الصيغة العامة للفئة كما يلي :

يجب أن تتذكر :

أنه يجب عليك وضع النقطة قبل أسم الفئة ، و أنك تستطيع أن تختار أي اسم تشاء للفئات ، وهنا فقد اخترت أن أسمي الفئة text، واخترت المتغير color والذي يتحكم بلون النص ، و وضعت لها القيمة blue أي الأزرق .

و تستطيع إدراج الفئات داخل صفحات HTML كما يلي :

لاحظ أن :

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

لاحظ أن :

يمكن استخدام وسوم HTML في صناعة الفئات ، و المثال التالي يوضح كيف قمنا بإستخدام الفئة "center" و التي سوف نقوم بتطبيقها على عناصر HTML كما يلي :

المعرف " ID Selector " :

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

أمثلة :

إذا أردنا أن تكون هناك فقرة واحدة تكون خلفيتها رمادية اللون ... فيمكنك كتابة الأمر كما يلي :

المعرف التالي يحدد محازاة الفقرة إلى الوسط ، و لون الخط بالأحمر :

يمكن تطبيق المعرف " h " كما يلي :

حيث يتم إدراج المعرف داخل صفحة HTML كما يلي :

الملاحظات و التعليقات :

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

و لكن كيف يمكننا كتابة الملاحظات داخل ملفات CSS ؟

يمكنك كتابة ملاحظاتك بأحد الطرق التالية
/* يمكنك كتابة ملاحظاتك هنا* /
كما يمكنك كتابة */
ملاحظاتك في أكثر
/* من سطر هكذا
نلاحظ أن كتابة الملاحظات يتم بوضع الشرطة المائلة و علامة النجمة قبل و بعد الملاحظة ، كما يمكننا كتابة الملاحظة في سطر واحد ، أو في عدة أسطر .
كما يتضح من المثال التالي :

/* This is a comment */
p
{
text-align: center;
/* This is another comment */

color: black;
font-family: arial
}

كيفية ادراج الـ CSS في الملفات

كيفية إدراج الأنماط الانسيابية CSS داخل صفحات HTML ؟

يمكنك إدراج الأنماط الانسيابية CSS داخل صفحات HTML بإحدى الطرق الثلاثة التالية :

External Style Sheet:

متصفح الإنترنت سوف يقوم بقراءة النمط المحدد من الملف " style.css " و يقوم بتهيئة المستند وفقاً له .
ويمكنك تحرير ملف الـ CSS الخارجي بواسطة أي محرر نصوص على أن تقوم بإعطاءه الإمتداد " css. " كما بالمثال التالي :

لاحظ أن:

ملف الـ CSS يجب ألا يحتوي على أي وسم من وسوم الـ HTML .

Internal Style Sheet:

أو embedded style sheets و هي تعني التضمين " الإدراج " داخل رأس الصفحة ، و يجب عليك استخدام النمط الداخلي في حالة تطبيقه على مستند وحيد ، حيث تقوم بتحديد النمط في رأس الصفحة " head " عن طريق استخدام الوسم <style> كما يلي :

متصفح الإنترنت سوف يقوم بقراءة النمط المحدد و يقوم بتهيئة المستند وفقاً له .

لاحظ أن:

المتصفحات عموماً تقوم بتجاهل الوسوم غير المعرفة لديها ، و بالتالي فإن المتصفحات القديمة و التي لا تدعم الـ " style " سوف تتجاهل الوسم <style> ، و لكنها سوف تقوم بعرض محتويات الـ " style " داخل الصفحة و لتفادي تلك المشكلة يجب عليك وضع محتويات الـ " style " بين وسمي االتعليق كما يلي :

Inline Styles:

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

في المثال السابق قمنا بإنشاء فقرة عن طريق الأمر p داخل ملف HTML ، و تم إدراج خاصية style و تم تحديد المتغير color و الذي يحدد اللون ، ثم تم اختيار القيمة red و هي تعني الأحمر، و بذلك تظهر تلك الفقرة ملونة باللون الأحمر

ملحوظة هامة:

في هذه الطريقة يتم إهمال الأقواس المعقوفة { } حيث أن النمط يعد جزء أساسي من كود الـ HTML .

تعدد الأنماط:

و السؤال الذي يتبادر إلى الذهن الآن ماذا يحدث لو تم استخدام أكثر من نمط داخل الموقع الواحد كأن يتم إنشاء ملف CSS مستقل و يتم تضمينه داخل الصفحة ، و في ذات الوقت يتم إدارج نمط CSS embedded style sheet ضمن رأس الصفحة ، و كذلك أوامر CSS داخل وسم HTML بطريقة inline . في هذه الحالة سيتم إعطاء أولوية لتنفيذ الكود inline أولاً ، ثم يليه يتم تطبيق embedded style sheet أي أوامر css ضمن رأس الصفحة ، ثم سيطبق أوامر css في الملف الخارجي ، هذه هي أولوية التنفيذ، يجب أن تتذكرها دائماً .

فكرة التوارث:

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

مثال:

على فرض أننا قمنا بإضافة النمط التالي في الملف الخارجي ، و تم تسميته style.css و هو يحدد لون الخط " بالأزرق " ، و حجم الخط بالقيمة " 12 " .

ثم تحرير ملف HTML و إضافة الأنماط حيث ام تحديد اللون بالأخضر و محازاة النص إلى الوسط كما يلي :

في هذه الحالة سوف يتم تطبيق النمط كما يلي لون الخط أخضر و محازاة النص إلى الوسط و حجم الخط 12 بكسل .

لمزيد من المعلومات ادخل الرابط :

 http://tibanews.com