الدرس الخامس

الخصائصpadding-top, padding-bottom, padding-left, padding-right:

التحكم في الحشو (هو المسافة بين العنصر و إطاره) مثل التحكم في الهوامش . حيث يمكنك تحديد حجم الحشو لأي من الجوانب الأربعة للعنصر .

H4 { padding-top: 20px; padding-bottom: 5px; padding-left: 100px; padding-right: 55px }

1- الخاصية padding-top لتحديد حجم الحشو العلوي .

2- الخاصية padding-bottom لتحديد حجم الحشو السفلي .

3- الخاصية padding-left لتحديد حجم الحشو الأيسر .

4- الخاصية padding-right لتحديد حجم الحشو الأيمن .

كما في تحديد الهوامش تماماً ، يمكنك استخدام وحدات القياس أو النسبة المئوية . لن أزعجك بالدخول في التفاصيل لهذه الخصائص حيث أنها تماثل تحديد الهوامش تماماً ، و لكن يجب أن تعلم أنه لا يمكنك استخدام القيم السلبية مع هذه الخصائص مثلما فعلت في تحديد الهوامش ، كما أن المتصفح IE 3 لا يدعم هذه الخصائص على الإطلاق .

الخصائص border-top-width, border-bottom-width, border-left-width, border-right-width :

هذه الخصائص تستخدم لتحديد سمك الإطار في كل جانب من جوانب العنصر :

H4 { border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px }

1- الخاصية border-top-width تحدد سمك الإطار العلوي .

2- الخاصية border-bottom-width تحدد سمك الإطار السفلي .

3- الخاصية border-left-width تحدد سمك الإطار الأيسر .

4- الخاصية border-right-width تحدد سمك الإطار الأيمن .

و هذه هي النتيجة للمثال السابق :

You can apply borders to replaced elements as well as to text elements. Isn't it fun?

لا يلزمك بالضرورة تحديد إطار لكل جانب من جوانب العنصر ، إذا أردت يمكنك أن تضع إطار لجانب واحد فقط من العنصر ، كما يمكنك أن ترى على الجانب الأيمن لهذه الفقرة (يجب عليك بالنسبة للمتصفحان IE 4 و IE 5 أن تحدد حجم الإطار على الجوانب الأخرى التي لا تريدها إلى القيمة صفر ، و إلا فإن المتصفح سيعطيها الحجم الذي يريده ) .

يمكنك تحديد سمك الإطار باستخدام وحدات القياس ، أو يمكنك استخدام كلمات مفتاحية :

الإطار فوق هذا السطر يستخدم القيمة thin .

الإطار فوق هذا السطر يستخدم القيمة medium .

الإطار فوق هذا السطر يستخدم القيمة thick .

هل تريد أن تجعل كل جوانب الإطار بنفس السمك ؟ استعمل الاختصار border-width . القاعدة التالية تضع إطاراً سمكه 1 بوصة حول الصور :

IMG { border-width: 1in }

الخاصية border-color :

هذه الخاصية تجعلك تتحكم في لون الإطار كما تريد :

P { border-color: green; border-width: 3px }

هذه الفقرة تظهر نتيجة المثال السابق

يمكنك استخدام أسماء الألوان لتحديد لون الإطار ، أو حتى استخدام القيم الست عشرية كالمثال التالي :

H4 { border-color: #FF0033; border-width: thick }

إذا أردت أن تجعل لكل جانب من الإطار لون مختلف يمكنك أن تفعل هذا بكتابة الألوان وراء بعض :

P { border-color: #99FFFF #FF0033 #FFFFFF #FFFF99; border-width: 3px }

المتصفح يستخدم القيمة الأولى للإطار العلوي و الثانية للإطار الأيمن و الثالثة للإطار السفلي و الرابعة للإطار الأيسر

هذه الفقرة تظهر نتيجة المثال السابق

ملحوظة : فالمتصفح كوميونيكيتور لا يتعرف على تحديد لون مختلف لكل جانب من جوانب الإطار و بالتالي فعليك الالتزام بلون واحد فقط ، لأنك لو استخدمت ألوان متعددة فسوف يظهر الإطار كله باللون الأزرق و لا نعرف لماذا !

و بالمناسبة ، إذا لم تستخدم الخاصية border-color فإن الإطار يأخذ نفس اللون الذي يأخذه العنصر .

---

الخاصية border-style :

و أخيراً ، يمكنك تحديد نمط الإطار :

P { border-style: double; border-width: 3px }

و القيم التي تستخدم مع هذه الخاصية هي :

solid

double

dotted

dashed

groove

ridge

inset

outset

لاحظ أنك يجب أن تستخدم الخاصية border-style مع المتصفحان IE 4 و IE 5 و إلا فإنهما لن يظهرا الإطار على الإطلاق . المتصفح IE 4.x للماكنتوش هو المتصفح الوحيد الذي يدعم القيمتين dotted و dashed .

تستطيع أن تلاحظ أن المتصفح IE يعطي الإطار لعرض المنطقة الكامل ، بينما المتصفح navigator يعطي الإطار فقط للكلمة نفسها .

---

الخاصية float :

هذه الخاصية تمكنك من جعل عنصر ما يطفو كالصور مثلاً بالإضافة إلى الواصفات التي تنشيء فقرة جديدة بنفسها أيضاً :

H4 { float: left }

This text is floating left

إلى اليسار من هذه الفقرة تستطيع أن ترى القاعدة السابقة مطبقة على نص <H4> و هذه الفقرة تلتف حوله ، و يمكنك أن تضع مكان النص صورة أو أي عنصر آخر و تتوقع أن يطفو بنفس الطريقة . و بالطبع بإمكانك أن تجعله إلى اليمين إذا أردت باستخدام القيمة right .

إذا كان العنصر الطافي ذو مساحة قليلة حوله ، يمكنك إضافة حشو حوله باستخدام احدى خواص padding التي تكلمنا عنها سابقاً (لسبب ما يؤدي استخدام الهوامش إلى مشاكل) . المتصفح IE 3 لا يدعم استخدام هذه الخاصية .  

 

---

الخاصية clear :

إذا كنت تريد أن تجعل فقرة ما تلتف حول عنصر طافي في نفس الوقت الذي تريد فيه أن تجعل الفقرة التي تليها تظهر بشكل عادي و لا تلتف حول العنصر ، استخدم الخاصية clear :

P { clear: left }

دعنا نلقي نظرة على مثال سريع :

هذه الفقرة تلتف حول صورة طافية إلى اليسار .

هذه فقرة أخرى بدون بدون استخدام الخاصية clear معها و لكنها أيضاً تلتف حول الصورة .
 

و هنا ما سيحدث عند استخدام الخاصية clear :

 هذه الفقرة تلتف حول صورة طافية إلى اليسار .

هذه فقرة أخرى حددت قيمة clear فيها بالقيمة left ، و لهذا فإن المتصفح يتأكد من خلو الجانب الأيسر لها من أي عنصر طافي قبل أن يعرضها .

يمكنك أن تستخدم القيم left لليسار أو right لليمين أو both لكلا الجانبين .

المتصفح IE 3 لا يدعم هذه الخاصية .