دورة css كاملة للمبتدئين
الدرس الخامس
كما نعرف جميعاً ، إننا عندما نريد أن نصنع هامش باستخدام الهتمل يجب أن نستخدم الجداول ، أليس كذلك ؟ ليس بعد اكتشاف صفحات الأنماط المتعاقبة ...
بعض التعريفات السريعة :
أولاً ، يجب علينا أن نفهم اصطلاحات لغة صفحات الأنماط . أي عنصر ينشيء كتلة جديدة أو أي عنصر مستبدل موجود في ما يطلق عليه صناع صفحات الأنماط صندوق BOX . هذا الصندوق يحتوي على :
1- العنصر نفسه .
2- الحشو حول العنصر .
3- الإطار حول الحشو .
4- الهامش حول الإطار .
و إليك الرسم التوضيحي :
يمكنك التحكم في الإطار أو الهامش أو الحشو بطريقة منفصلة . كما سترى :
الخواص margin-top, margin-bottom, margin-left, margin-right :
هذه الخواص الأربع تمكنك من التحكم بالهامش حول كل جانب من جوانب العنصر كالتالي :
1- الخاصية margin-top تحدد حجم الهامش العلوي .
2- الخاصية margin-bottom تحدد حجم الهامش السفلي .
3- الخاصية margin-left تحدد حجم الهامش الأيسر .
4- الخاصية margin-right تحدد حجم الهامش الأيمن .
كما ترى فإن كل جانب من الهامش يمكن جعله مختلفاً عن الآخرين . أو يمكنك أن تحدد حجم جانب واحد من الهامش و تترك المتصفح يجعل باقي الجوانب بالحجم الافتراضي لها . كذلك يمكنك أن تطبق الهوامش على العناصر المستبدلة (مثل الصور) بنفس الطريقة التي تطبقها بها على النصوص .
أسهل طريقة لتحديد قيمة حجم الهامش هي باستخدام وحدات القياس التي وضحناها سابقاً ، و لكن إذا لم ترد ذلك يمكنك استخدام النسبة المئوية أيضاً .
عندما يلتقي هامشان فإن المتصفح يضيفهما إلى بعض ، و لذلك إذا كانت فقرة ما هامشها السفلي 10 بكسل و إذا كان هناك فقرة تحتها لها هامش علوي بقيمة 30 بكسل فإن حجم الفاصل بين الفقرتان سيكون 40 بكسل .
أيضاً يمكنك أن تحدد قيمة الهامش لهذه الخواص بالسالب ، كالمثال التالي :
H4 { margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px }
1- الخاصية margin-top تحدد حجم الهامش العلوي .
2- الخاصية margin-bottom تحدد حجم الهامش السفلي .
3- الخاصية margin-left تحدد حجم الهامش الأيسر .
4- الخاصية margin-right تحدد حجم الهامش الأيمن .
كما ترى فإن كل جانب من الهامش يمكن جعله مختلفاً عن الآخرين . أو يمكنك أن تحدد حجم جانب واحد من الهامش و تترك المتصفح يجعل باقي الجوانب بالحجم الافتراضي لها . كذلك يمكنك أن تطبق الهوامش على العناصر المستبدلة (مثل الصور) بنفس الطريقة التي تطبقها بها على النصوص .
أسهل طريقة لتحديد قيمة حجم الهامش هي باستخدام وحدات القياس التي وضحناها سابقاً ، و لكن إذا لم ترد ذلك يمكنك استخدام النسبة المئوية أيضاً .
عندما يلتقي هامشان فإن المتصفح يضيفهما إلى بعض ، و لذلك إذا كانت فقرة ما هامشها السفلي 10 بكسل و إذا كان هناك فقرة تحتها لها هامش علوي بقيمة 30 بكسل فإن حجم الفاصل بين الفقرتان سيكون 40 بكسل .
أيضاً يمكنك أن تحدد قيمة الهامش لهذه الخواص بالسالب ، كالمثال التالي :
Books
are mind food
تتعامل المتصفحات مع أحجام الهوامش بطرق مختلفة . على سبيل المثال فإن كل من المتصفحات الأربعة الكبار (NC للويندوز و NC للماكنتوش و IE للويندوز و IE للماكنتوش) تجعل النص متداخل بحجم مختلف عن الآخرين ، (و NC للويندوز لا يجعل النص متداخل على الإطلاق) .
المتصفح IE 3 يظهر مسافات إضافية عند استخدام وحدات القياس في تحديد الهوامش مع الواصفة margin-bottom . كذلك فإن هذه الخاصية تعمل مع بعض واصفات الهتمل و لكنها لا تعمل مع الكثير من الواصفات أيضاً .
المتصفح IE 4 يعاني من بعض المشكلات في تحديد الهامش الأيسر للعناصر المستبدلة مثل الصور . و للتغلب على هذا جرب أن تحيط واصفة الصورة بالواصفة <DIV> و إضفاء النمط على هذه الواصفة . بدلاً من واصفة الصورة .
الخصائصpadding-top, padding-bottom, padding-left, padding-right:
التحكم في الحشو (هو المسافة بين العنصر و إطاره) مثل التحكم في الهوامش . حيث يمكنك تحديد حجم الحشو لأي من الجوانب الأربعة للعنصر .
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 :
هذه الخصائص تستخدم لتحديد سمك الإطار في كل جانب من جوانب العنصر :
المتصفح IE 4 يعاني من بعض المشكلات في تحديد الهامش الأيسر للعناصر المستبدلة مثل الصور . و للتغلب على هذا جرب أن تحيط واصفة الصورة بالواصفة <DIV> و إضفاء النمط على هذه الواصفة . بدلاً من واصفة الصورة .
الخصائصpadding-top, padding-bottom, padding-left, padding-right:
التحكم في الحشو (هو المسافة بين العنصر و إطاره) مثل التحكم في الهوامش . حيث يمكنك تحديد حجم الحشو لأي من الجوانب الأربعة للعنصر .
H4 { padding-top: 20px; padding-bottom: 5px; padding-left: 100px; padding-right: 55px }
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 }
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 }
هذه الخاصية تجعلك تتحكم في لون الإطار كما تريد :
P { border-color: green; border-width: 3px }
هذه الفقرة تظهر نتيجة المثال السابق
يمكنك استخدام أسماء الألوان لتحديد لون الإطار ، أو حتى استخدام القيم الست عشرية كالمثال التالي :
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 :
هذه الخاصية تمكنك من جعل عنصر ما يطفو كالصور مثلاً بالإضافة إلى الواصفات التي تنشيء فقرة جديدة بنفسها أيضاً :
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
إذا كان العنصر الطافي ذو مساحة قليلة حوله ، يمكنك إضافة حشو حوله باستخدام احدى خواص padding التي تكلمنا عنها سابقاً (لسبب ما يؤدي استخدام الهوامش إلى مشاكل) . المتصفح IE 3 لا يدعم استخدام هذه الخاصية .
الخاصية clear :
إذا كنت تريد أن تجعل فقرة ما تلتف حول عنصر طافي في نفس الوقت الذي تريد فيه أن تجعل الفقرة التي تليها تظهر بشكل عادي و لا تلتف حول العنصر ، استخدم الخاصية clear :
P { clear: left }دعنا نلقي نظرة على مثال سريع :
هذه الفقرة تلتف حول صورة طافية إلى اليسار .هذه فقرة أخرى بدون بدون استخدام الخاصية clear معها و لكنها أيضاً تلتف حول الصورة .
و هنا ما سيحدث عند استخدام الخاصية clear :
هذه الفقرة تلتف حول صورة طافية إلى اليسار .هذه فقرة أخرى حددت قيمة clear فيها بالقيمة left ، و لهذا فإن المتصفح يتأكد من خلو الجانب الأيسر لها من أي عنصر طافي قبل أن يعرضها .
يمكنك أن تستخدم القيم left لليسار أو right لليمين أو both لكلا الجانبين .
المتصفح IE 3 لا يدعم هذه الخاصية .
ليست هناك تعليقات:
إرسال تعليق