جديد الصور
جديد البطاقات
جديد الصوتيات
المتواجدون الآن
تغذيات RSS
|
2012-08-14 05:36
حتى الآن ، تناولنا الصيغة العامة لاستخدام أنماط السي اس اس ، تناولنا كيفية إدراج هذه الأنماط في صفحاتنا ، تكلمنا عن أمور أخرى مثل المعرفات و التوارث و الملاحظات ، لكن ما زلنا بحاجة لمزيد من الأمثلة التي تجعلنا معتادين على استخدام الأنماط مع أي وسم من وسوم هتمل . السبب في التركيز على المزيد من الأمثلة أنه و كما جاء معنا في بعض الأمثلة السابقة ، نلاحظ اختلاف متغيرات السي اس اس عن بعض متغيرات هتمل ! فإذا كان حجم الخط في وسوم هتمل يرمز له بـ ((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
يحدد هذا المتغير لون خلفية عنصر النموذج .
|
|
|
خدمات المحتوى
|
تقييم
|
|
|
الرئيسية
الصور
البطاقات
الأخبار
المقالات
الصوتيات
0 | 
0 | 
640
