دروس في برمجة المواقع صفحات الأنماط الانسيابية - CSS

المزيد من الأمثلة




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


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

المتغير

الوصف

font-family

يحدد هذا المتغير نوع الخط المستخدم .

font-size

يحدد هذا المتغير حجم الخط المستخدم .

color

يحدد هذا المتغير لون الخط المستخدم .

Background-color

يحدد هذا المتغير لون الخلفية .

Background-image

يحدد هذا المتغير إحدى الصور كخلفية للصفحة .

Background-repeat

يحدد هذا المتغير كيفية تكرار صورة الخلفية و يأخذ إحدى القيم التالية :

(repeat, repeat-x, repeat-y, no-repeat)

SCROLLBAR-BASE-COLOR

يحدد هذا المتغير لون القاعدة لأشرطة التمرير الطولية و العرضية .

SCROLLBAR-ARROW-COLOR

يحدد هذا المتغير لون السهم لأشرطة التمرير الطولية و العرضية .

Scrollbar-track-color

يحدد هذا المتغير لون الخلفية لأشرطة التمرير الطولية و العرضية .

Scrollbar-face-color

يحدد هذا المتغير لون الواجهة لأشرطة التمرير الطولية و العرضية .

Scrollbar-highlight-color

يعطينا هذا المتغير بعض الإضاءة على أشرطة التمرير (بحسب اللون المستخدم)

Scrollbar-3dlight-color

يعطي هذا المتغير التأثير الثلاثي على أشرطة التمرير .

Scrollbar-darkshadow-color

يحدد هذا المتغير لون الظل لأشرطة التمرير الطولية و العرضية .

scrollbar-shadow-color

يحدد هذا المتغير لون الظل لأشرطة التمرير الطولية و العرضية (يختلف قليلاً عن المتغير السابق ).







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




المتغير

الوصف

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

يحدد هذا المتغير لون خلفية عنصر النموذج .