كما قلنا ، فإن الأنماط تحدد التنسيق لأوسمة الهتمل المختلفة التي تعرفت عليها في دروس الهتمل . تستطيع تحديد تنسيق معين لوسم الفقرة أو تنسيق معين للجداول و هكذا . إذاً لابد أن نتوقع بأن الصيغة العامة لأوسمة السي اس اس ستتضمن وسم هتمل الذي سيطبق عليه النمط و كذلك التنسيق ،
كما توضح هذه الصيغة تماماً :
{"القيمة" : المتغير } : وسم هتمل
كما نلاحظ فإن الصيغة تقتضي كتابة وسم هتمل الذي سيطبق عليه النمط ثم نقطتان رأسيتان ثم قوسين معقوفين نكتب بداخلها المتغير و القيمة مفصولين بنقطتين رأسيتين أخريتين .
لنأخذ بعض الأمثلة الحقيقية لتتضح الصورة :
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) ؟ إنه يحتوي على متغيرين بدلاً من متغير واحد . قمنا بفصل المتغيرات المختلفة باستخدام الفاصلة المنقوطة (;). يمكنك أن تجعل أنماطك أكثر وضوحاً بكتابة كل متغير في سطر منفصل! هكذا :
a { color: #008000; font-size: 1em }
أفضل كثيراً أن تستخدم عادات جيدة أثناء كتابة الأنماط أو غيرها من الشفرات لأن ذلك هو طريقك لكتابة برامج يمكن أن نطلق عليها مصطلح "برامج نظيفة" ! أو كما نقول باللهجة المحلية "تفتح النفس" !
تعرفنا في المثال السابق على كيفية تخصيص أكثر من متغير لوسم هتمل واحد . ماذا لو أردنا تخصيص متغير واحد بقيمة واحدة مكررة مع أكثر من وسم هتمل ؟ أكثر الأمثلة التي توضح ذلك هي التي تحدد تنسيق وسوم رأس الفقرة (h1-h6) أو وسوم الرابط التشعبي (a) . لنأخذ مثالاً يوضح ذلك :
h1,h2,h3,h4,h5,h6 { color: #008000; }
هل راقبت ذلك ؟ الأمر في غاية السهولة . كل ما عليك هو أن تضيف الفاصلة (,) بين الأوسمة المختلفة ثم تستخدم الصيغة العامة التي أصبحت تعرفها الآن .
