حتى الآن ، تناولنا الصيغة العامة لاستخدام أنماط السي اس اس ، تناولنا كيفية إدراج هذه الأنماط في صفحاتنا ، تكلمنا عن أمور أخرى مثل المعرفات و التوارث و الملاحظات ، لكن ما زلنا بحاجة لمزيد من الأمثلة التي تجعلنا معتادين على استخدام الأنماط مع أي وسم من وسوم هتمل . السبب في التركيز على المزيد من الأمثلة أنه و كما جاء معنا في بعض الأمثلة السابقة ، نلاحظ اختلاف متغيرات السي اس اس عن بعض متغيرات هتمل ! فإذا كان حجم الخط في وسوم هتمل يرمز له بـ ((size فإننا نرمز له بـ (font-size) في ملفات السي اس اس . إذن ، الأفضل أن نأخذ كل وسم من وسوم هتمل – التي تعرفنا عليها في دروس الهتمل – و نتعرف على المتغيرات المناسبة لها . سنأخذها على شكل جداول للتسهيل :

(هذه الجداول ليست للحفظ ! احتفظ بها كمرجع فقط بعد أن تطلع عليها و تجرب بعضها بنفسك)

 

 

 

 

 

المتغير	الوصف
font-family	يحدد هذا المتغير نوع الخط المستخدم داخل الجدول .
font-size	يحدد هذا المتغير حجم الخط المستخدم داخل الجدول .
color	يحدد هذا المتغير لون الخط المستخدم داخل الجدول .
Background-color	يحدد هذا المتغير لون خلفية الجدول.
Background-image	يحدد هذا المتغير إحدى الصور كخلفية للجدول .
Border-color	يحدد هذا المتغير لون الإطار (الحدود الأربعة)
Border-width	يحدد هذا المتغير سمك الإطار (الحدود الأربعة) ، قد يأخذ أحد القيم التالية : (thin, medium, thick, رقم)
Border-style	يحدد هذا المتغير شكل الإطار (الحدود الأربعة) ، قد يأخذ أحد القيم التالية : (none, hidden, dotted, dashed, solid, double, inset, outset)
Border-left-color	يحدد هذا المتغير لون الحد الأيسر للإطار .
Border-left-width	يحدد هذا المتغير سمك الحد الأيسر للإطار .
Border-right-color	يحدد هذا المتغير لون الحد الأيمن للإطار .
Border- right-width	يحدد هذا المتغير سمك الحد الأيمن للإطار .
Border-top-color	يحدد هذا المتغير لون الحد العلوي للإطار .
Border-top-width	يحدد هذا المتغير سمك العلوي الأيسر للإطار .
Border-bottom-color	يحدد هذا المتغير لون الحد الأسفل للإطار .
Border-bottom-width	يحدد هذا المتغير سمك الحد الأسفل للإطار .

 

 

,

 

المتغير	الوصف
font-family	يحدد هذا المتغير نوع الخط المستخدم في القوائم .
font-size	يحدد هذا المتغير حجم الخط المستخدم في القوائم.
color	يحدد هذا المتغير لون الخط المستخدم في القوائم.
list-style-image	يحدد هذا المتغير صورة معينة كمحدد للقائمة (يأخذ مسار الصورة كقيمة له) .
list-style-position	يحدد هذا المتغير مكان محدد القوائم ، يأخذ القيمة: (Inside, outside)
list-style-type	يحدد هذا المتغير شكل محدد القوائم ، يمكن أن يأخذ أحد القيم التالية : (None, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-latin, upper-latin)

 

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

المتغير	الوصف
font-family	يحدد هذا المتغير نوع الخط المستخدم في عناصر النماذج (مربع نص، زر الخيار) .
font-size	يحدد هذا المتغير حجم الخط المستخدم في عناصر النماذج (مربع نص، زر الخيار).
color	يحدد هذا المتغير لون الخط المستخدم في عناصر النماذج (مربع نص، زر الخيار).
border	يحدد هذا المتغير شكل الإطار ، إنها صيغة مختصرة يمكن استخدامها مع عناصر النماذج و غيرها ، حدد جميع خصائص الإطار بالشكل التالي كمثال : (border: 1px solid #000000;)
background-color	يحدد هذا المتغير لون خلفية عنصر النموذج .