Nwahy Articles V3 pro

تغيير ألوان الفقرات والتحكم بها

تغيير ألوان الفقرات والتحكم بها

القسم css - الزيارات 8392 - التاريخ 20/3/2008
لقد قلنا من قبل أن أي واصفة هتمل يمكن أن تعمل كمختار Selector و يرتبط بها إعلان Declaration لصفحة أنماط ، و لكن ماذا إذا أردت شيئاً أكثر تعقيداً من هذا . على سبيل المثال ، ماذا إذا أردت أن يكون نص جسم الوثيقة أخضر في الفقرة الأولى و أرجواني في الفقرة الثانية و رمادي في الفقرة الثالثة .

هنا يظهر مفهوم الفئات classes ، يمكنك إنشاء ثلاث فئات مختلفة من الواصفة P ، كل واحدة منهم ذات إعلان لصفحة أنماط مختلفة . و سوف تبدو القواعد (سواء كانت مطمورة في وثيقة الهتمل أو في ملف صفحة أنماط خارجي) مثل هذه :

P.first { color: green }

P.second { color: purple }

P.third { color: gray }


و سوف تبدو شفرة الهتمل مثل هذه :

<P CLASS='first'>The first paragraph, with a class name of 'first.'</P>


<P CLASS='second'>The second paragraph, with a class name of 'second.'</P>


<P CLASS='third'>The third paragraph, with a class name of 'third.'</P>


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

.first { color: green }


هذه الطريقة في إنشاء الفئات هي أكثر مرونة لأننا يمكن أن نستعمل CLASS='first' مع أي واصفة هتمل في جسم الوثيقة و سوف يتم عرض النص باللون الأخضر أو أي لون آخر نحدده في الإعلان .

الآن دعنا نفترض أنك تريد أن تكون كل النصوص السميكة bold باللون الأحمر و لكن فقط في حالة وقوع هذه النصوص السميكة بين واصفة <p> عادية . هذا ممكن عن طريق المختارات السياقية Contextual Selectors و هي مختارات تتطلب أن تصبح حالة ما صحيحة ليتم تنفيذ إعلاناتها :

P B { color: red }

<H1><B>Emma Thompson</B>, Actress</H1>

<P>Dramatic actor, inspired writer, down-to-earth comedienne. Is there <B>nothing</B> she can't do?</P>


هذه القاعدة تخبر المتصفح أن يجعل كل النصوص السميكة حمراء إذا كانت ضمن الواصفة <P> ، و لهذا عندما تعرض هذه الشفرة في المتصفح فإن النص السميك في أول سطر لن يظهر باللون الأحمر ، بينما النص السميك في السطر الثاني سيظهر باللون الأحمر لأنه حدث ضمن نطاق الواصفة <P> .

[color=FA0309]التعليقات [/color]..

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

P.first { color: green } /* green for the first paragraph of every page */

H1 { text-indent: 10px; font-family: verdana }

IMG { margin-top: 100px } /* give all images a top margin */


كما ترى فإن علامات التعليق هي */ للبداية و /* للنهاية ، و كل ما هو مذكور بينهما سيتجاهله المتصفح .

[color=FA0309]ترتيب تنفيذ شفرة صفحات الأنماط ..[/color]

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

1- الأنماط التي في السطر inline .

2- الأنماط المطمورة .

3- الأنماط الموصولة .

4- الأنماط المستوردة .

5- أنماط المتصفح الافتراضية .

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

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

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

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

[color=AC5668]1- استخدم قاعدة صفحة الأنماط المعلنة بتحديد .[/color]

مثال

BODY { color: green }

P { color: red }


نص الواصفة <P> محدد الإعلان بلون أحمر في القاعدة الثانية ، و لكنه في نفس الوقت يرث قيمة اللون الأخضر من قاعدة جسم الوثيقة (الأولى) ، حيث أنك إذا أضفت إعلان إلى جسم BODY الوثيقة فإن أي شيء في كامل الوثيقة يرثه . في هذه الحالة فإن القاعدة المحددة (و هي هنا قاعدة الفقرة P لأنها حددت جزء معين في داخل جسم الوثيقة الكبير) هي التي تربح الجولة و يتم تنفيذها .

[color=AC5668]2-استخدم قاعدة صفحة الأنماط الموروثة . [/color]

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

[color=AC5668]3- استخدم قواعد الأنماط بنفس الترتيب الذي تظهر به في الشفرة . [/color]

مثال :

P { color: green }

P { color: red }


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

ملحوظة :

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


سؤال أخير : ماذا سيحدث عند اجتماع قواعد صفحات الأنماط مع الهتمل ؟ إليك هذا المثال :

I { font-family: impact }

<P>I think <I><FONT FACE='Times'>East of Eden</FONT></I> is Steinbeck's best novel.</P>


كما ترى فإن قاعدة صفحة الأنماط تخبر المتصفح أن يستخدم الخط impact مع النص المائل ، بينما واصفة الهتمل المألوفة <FONT FACE> تطلب منه عرضه بالخط Times New Roman . هذا تضارب واضح .

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

لكن لسوء الحظ فإن المتصفحات الرئيسية ليست مبنية بهذه الطريقة . المتصفحان Internet Explorer و Netscape communicator يعاملان واصفات الهتمل على أنها أكثر أهمية من قواعد صفحات الأنماط إذا كانت واصفات الهتمل أقرب إلى النص المقصود .

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

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

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

لحسن الحظ فإن أكثر من 75 % من مستخدمي الويب يبحرون في الويب باستخدام المتصفح إنترنت إكسبلورر 5 ، و هو ألطف قليلاً مع صفحات الأنماط المتعاقبة - و لكن النسبة لم تصل بعد لـ 100 % . الإصدارات التجريبية Beta من IE 6 و Netscape 6 هي إصدارات واعدة للغاية و لكن عدد قليل نسبياً يستعملها .

الطريقة الوحيدة لتفادي المفاجئات غير السارة لزوار موقعك إذا كنت تستخدم شفرة صفحات الأنماط المتعاقبة ، هي أن تختبر شفرتك على متصفحات مختلفة و منصات مختلفة للتأكد من أنها تعمل بشكل سليم على كل المتصفحات و المنصات ، و قد تضطر إلى إنشاء نسخة أخرى (أليفة) من موقعك لتخدم هؤلاء المستخدمين من المدرسة القديمة المصممين على استعمال متصفحات عششت عليها العناكب
مشاركة الموضوع
Facebook Twitter Google+ Pinterest Reddit StumbleUpon Linkedin Tumblr Google Bookmarks Email
كن أول من يقيم الموضوع
12345

أضف تعليقك على الموضوع