الصيغة العامة للنمط

لصيغة العامة للنمط

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

كما توضح هذه الصيغة تماماً :

{"القيمة" : المتغير } : وسم هتمل

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

لنأخذ بعض الأمثلة الحقيقية لتتضح الصورة :

a { color: #008000; font-size: 1em }
body { border-style: solid }
h2 { color: #800000 }
p { border-style: solid; border-color: #FF00FF }
table { border-right-style: solid }

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

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

دعنا نركز قليلاً على الأمثلة السابقة . هل لاحظت الوسم الأول (a) ؟ إنه يحتوي على متغيرين بدلاً من متغير واحد . قمنا بفصل المتغيرات المختلفة باستخدام الفاصلة المنقوطة ( Wink

. يمكنك أن تجعل أنماطك أكثر وضوحاً بكتابة كل متغير في سطر منفصل! هكذا :

a {
color: #008000;
font-size: 1em
}

أفضل كثيراً أن تستخدم عادات جيدة أثناء كتابة الأنماط أو غيرها من الشفرات لأن ذلك هو طريقك لكتابة برامج يمكن أن نطلق عليها مصطلح "برامج نظيفة" ! أو كما نقول باللهجة المحلية "تفتح النفس" !

تعرفنا في المثال السابق على كيفية تخصيص أكثر من متغير لوسم هتمل واحد . ماذا لو أردنا تخصيص متغير واحد بقيمة واحدة مكررة مع أكثر من وسم هتمل ؟
أكثر الأمثلة التي توضح ذلك هي التي تحدد تنسيق وسوم رأس الفقرة (h1-h6) أو وسوم الرابط التشعبي (a) . لنأخذ مثالاً يوضح ذلك :

h1,h2,h3,h4,h5,h6 { color: #008000; }

هل راقبت ذلك ؟ الأمر في غاية السهولة . كل ما عليك هو أن تضيف الفاصلة (,) بين الأوسمة المختلفة ثم تستخدم الصيغة العامة التي أصبحت تعرفها الآن .

أشباه الفئات (Pseudo-class)

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

تأخذ أشباه الفئات الصيغة العامة التالية :

{"القيمة" : المتغير } شبه الفئة: وسم هتمل

أو (في حالة وجود فئة أيضاً):{"القيمة" : المتغير } شبه الفئة:فئة. وسم هتمل

قد تبدو مزعجة للوهلة الأولى ! لكنك ستكتشف مدى سهولته بعد المثال التالي :

في المثال السابق : حددنا اللون (#000088) للرابط العادي الذي لم يزار بعد . كما حددنا تنسيق النص بلا شيء حتى لا يظهر خط سفلي تحت الرابط . حددنا اللون الأحمر للرابط الذي سبقت زيارته ! كذلك حددنا اللون الزهري مع خط بأسفل النص و حجم (10 نقاط) للنص . أما الرابط النشط (الحالي) فقد حددنا له اللون الأزرق الفاتح .
الطريقة سهلة ، جربها بنفسك الآن .

	تحذير
أنصحك بكتابة أنماط الروابط التشعبية بالترتيب الوارد في المثال السابق (link ثم visited ثم hover ثم active) و إلا فإن الأخريين لن يعملا بالشكل الصحيح !

سنأخذ مثالاً آخر يوضح كيفية استخدام الفئات مع أشباه الفئات في مثال واحد :

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

_________________
لا أيـها الظــالم المستـبـــد...حبـيـب الظــلام عدو الحياة
ســخرة بـأنـــآت شعبً ضعيف ...وكفـاك مخضـوبه من دمــــاه
رويــدك لا يخدعنك الــربيع ...و صحو الفضاء و ضوء الصباح
ففي الأفق الرحب هول الظلام ...وقصف الرعود وعصف الريــاح
حذار فتحت الرماد اللهيب ... ومن يبذر الشوك يجن الجــراح
هكـــذا سرقو بلادنـــــا ,,, وهكـذا يريدونها السـرق .!!

» الادارة العامة
» رنامج إكسيل من قيود اليومية العامة حتى المركز المالى
» الجرائم المضرة بالمصلحة العامة فى القانون الجنائى المصرى