بنت عدن
مشرف
عدد الرسائل : 258
العمر : 32
الموقع : https://raed-almoaker.yoo7.com/forum
تاريخ التسجيل : 16/02/2010
 |  موضوع: دروس في برمجة المواقع صفحات الأنماط الانسيابية - CSS  الخميس أبريل 29, 2010 9:28 pm | |
| المزيد من الأمثلة
حتى الآن ، تناولنا الصيغة العامة لاستخدام أنماط السي اس اس ، تناولنا كيفية إدراج هذه الأنماط في صفحاتنا ، تكلمنا عن أمور أخرى مثل المعرفات و التوارث و الملاحظات ، لكن ما زلنا بحاجة لمزيد من الأمثلة التي تجعلنا معتادين على استخدام الأنماط مع أي وسم من وسوم هتمل . السبب في التركيز على المزيد من الأمثلة أنه و كما جاء معنا في بعض الأمثلة السابقة ، نلاحظ اختلاف متغيرات السي اس اس عن بعض متغيرات هتمل ! فإذا كان حجم الخط في وسوم هتمل يرمز له بـ ((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
| يحدد هذا المتغير لون خلفية عنصر النموذج .
|
| |
|
