CSS

CSS – الحدود والھوامش والحشو

border-collapse:

ھذه الخاصیة تستخدم مع الجداول فقط , وھي تحدد ھل سیتم طي حدود الخلایا واعتبار وجود
حد واحد بین الخلیتین ( القیمة المسئولة عن ذلك ھي collapse ( أم سیتم اعتبار حد كل خلیة
مستقلا ً عن الآخر ( مسافة بین حد كل خلیة وأخرى ) .

مثال:

table { border-collapse:collapse; }

border-style:

تستخدم هاته الخاصية لوضع إطار حول فقرة أو نص معین ، وتأخذ إحدى القیم التالیة للقيام بتحدید نوع ھذا الاطار :
1 .outset تستخدم للحدود ثلاثیة الابعاد .
2 .inset تستخدم للحدود ثلاثیة الابعاد .
3 .groove تستخدم للحدود ثلاثیة الابعاد .
4 .double تستخدم للحدود المضاعفة .
5 .solid تستخدم للحدود العادیة .
6 .ridge تستخدم للحدود ثلاثیة الابعاد .
7 .dashed تستخدم للحدود المتقطعة .
8 .dotted تستخدم للخطوط المنقطة .

مثال:

div { border-style:groove; }

ویمكن ان نعطي لكل جھة من الاطار نوع اطار مختلف وذلك بكتابة الاتجاه ما بین كلمة
border و style ھكذا
style-الاتجاه-border ,

مثال:

dive { border-top-style:solid; }

ویمكن ان نكتب كل الاتجاھات بشكل مختصر وذلك عن طریق اسناد اربع قیم للخاصیة حیث
ان القیمة الاولى تمثل الجھة العلویة والثانیة تمثل الیمین والثالثة الاسفل والرابعة الیسار ( بأتجاه
عقرب الساعة ) ونفصل بین كل قیمة واخرى بفاصلة واحدة ,

مثال:

div { border-style:solid dotted ridge double; }

border-width:

وھي تستخدم لتحدید سمك الاطار , وتأخذ قیمة رقمیة مثلا ً 2px او تاخذ احد ھذه القیم :

1 .thin للإطار الضعیف .
2 .Medium للإطار متوسط السمك .
3 .thick للإطار السمیك .

مثال:

p { border-width:1px; }

ویمكن ان نعطي لكل جھة من الاطار سمك معین وذلك بكتابة الاتجاه ما بین كلمة border و
width ھكذا
width-الاتجاه-border ,

مثال:

p { border-left-width:2px; }

ویمكن ان نكتب كل الاتجاھات بشكل مختصر وذلك عن طریق اسناد اربع قیم للخاصیة حیث
ان القیمة الاولى تمثل الجھة العلویة والثانیة تمثل الیمین والثالثة الاسفل والرابعة الیسار ( بأتجاه
عقرب الساعة ) ونفصل بین كل قیمة واخرى بفاصلة واحدة ,

مثال:

p { border-width:1px 2px 6px 1px; }

border-color:

وھي تستخدم لتحدید لون الاطار وتاخذ قیمة لونیة ,

مثال:

p { border-color:#e3e; }

ویمكن ان نعطي لكل جھة من الاطار لون معین وذلك بكتابة الاتجاه ما بین كلمة border و
color ھكذا :

color-الاتجاه-border ,

مثال:

p { border-bottom-color:red; }

ویمكن ان نكتب كل الاتجاھات بشكل مختصر وذلك عن طریق اسناد اربع قیم للخاصیة حیث
ان القیمة الاولى تمثل الجھة العلویة والثانیة تمثل الیمین والثالثة الاسفل والرابعة الیسار ( بأتجاه
عقرب الساعة ) ونفصل بین كل قیمة واخرى بفاصلة واحدة ,

مثال:

p { border-color:#e3e #333 #fff red; }

border:

تستعمل ھذه الخاصیة لتحدید سمك ونوع ولون حدود الإطار , وھي عبارة عن اختصار
للخواص السابقة حیث یمكن أن نجمع في ھذه الخاصیة الثلاث خواص السابقة وھي (
width-border و style-border و color-border ( حیث تكون قیمتھا عبارة عن ثلاثة
قیم كل قیمة تمثل خاصیة لكن یجب الانتباه إلى الترتیب في وضع القیم حیث أن القیمة الأولى
تمثل سمك الإطار والثانیة تمثل نوع الإطار والثالثة تمثل لون الإطار , ونفصل بین كل قیمة
وأخرى بفاصلة واحدة .

مثال:

p { border:1px solid #333; }

outline:

ھذه الخاصیة نمثل الحدود الخارجیة للإطار حیث یمكن مثلا ً أن نعطي لفقرة معینة إطار لكنھ
یكون ذو لونین حیث إن اللون الأول یمثلھ الإطار ( border ( واللون الثاني یمثلھ ما ھو خارج
الإطار ( outline ( وھذه الخاصیة تأخذ قیم الخاصیة ( border ( نفسھا .

مثال:

p { border:2px solid red;
outline:5px ridge #3ff; }

ویمكن أن نكتب الخاصیة ( outline ( لوحدھا أي لیس من الضروري أن نستخدمھا
ھي والخاصیة ( border(معا ً في نفس الفقرة .

padding:

تستخدم ھذه الخاصیة لتحدید المسافة المحیطة بالنص او الصورة أو المسافة الفاصلة بین النص
والإطار وھي تأخذ قیمة رقمیة مثلا 5em , وفي ھذه الحالة سوف یترك المسافة المحیطة
بالعنصر من جمیع الاتجاھات لكن ویمكن أن نحدد المسافة من جھة واحدة او اكثر وذلك
باضافة الاتجاه بعد الخاصیة padding ھكذا :- الاتجاه-padding .

مثال:

p { padding-left:4em;
padding-top:3em; }

ویمكن أن نضیف قیم الاتجاھات الأربعة إلى الخاصیة :padding وذلك بإعطائھا أربع قیم
حیث إن القیمة الأولى تمثل الجھة العلویة والثانیة تمثل الیمین والثالثة تمثل الأسفل والرابعة
تمثل الیسار ( باتجاه عقارب الساعة ) حیث سوف نترك بین كل قیمة وأخرى بفاصلة واحدة

مثال:

p { padding:5px 3px 8px 3px; }

margin:

تستخدم ھذه الخاصیة لتحدد المسافة بین حدود الفقرة وما یحیط بھا من الخارج ( من فقرات
أخرى أو حدود صفحة ) وھي تأخذ قیمة رقمیة ,

مثال:

p { margin:20px; }

لكن في ھذه الحالة سوف تضیف المسافة الفارغة من جمیع الاتجاھات لكن إذا أردنا ترك مسافة
من جھة واحدة فقط سوف نكتب الاتجاه بعد الخاصیة ھكذا :- ( :right-margin (

مثال:

p { margin-top:20px;
margin-left:8px; }

وكذلك یمكننا أن نضیف مسافة لكل جھة بشكل مختلف عن طریق إضافة أربع قیم ( تمثل
الاتجاھات الأربعة ) إلى الخاصیة :margin حیث إن القیمة الأولى تمثل الجھة العلویة والثانیة
تمثل الیمین والثالثة تمثل الأسفل والرابعة تمثل الیسار ( باتجاه عقارب الساعة ) حیث سوف
نترك فاصلة واحدة بین كل قیمة وأخرى .

مثال:

p { margin:5px 10px 0 4px; }

إذا أردنا أن نحدد مكان فقرة في منتصف الصفحة یمكن أن نفعل ذلك من خلال إسناد
القیمة ( auto ( و ( 0 ( إلى الخاصیة ( :margin. (

مثال:

div { margin:0 auto; }

border-radius:

وھي تستعمل لتقویس زاویة الإطار وتأخذ قیمة رقمیة مثلا ً 20px , مع ملاحظة أن ھذه
الخاصیة جدیدة في CSS3 .

مثال:

div { border-radius:20px; }

ویمكن أن نضع اتجاه لتتقوس زاویة معینة فقط ,

مثال:

div { border-top-right-radius:20px; }

border-image:url( );

ھذه الخاصیة جدیدة في CSS3 وھي مسئولة عن إنشاء إطار عنصر بالاعتماد على صورة
صغیرة تمثل الإطار والصیغة العامة لھذه الخاصیة ھي :-
border-image:source slice width outside repeat;
Source تمثل مصدر الصورة بین قوسین مسبوقة ب url
slice & outside قیمة تمثل جزء الصورة الذي سیتم تكراره او تمدده لصنع الإطار ( رقم )
width عرض الإطار ( رقم )
repeat نضع مكانھا احد ھذین القیمتین :

  • 1 -repeat لتكرار جزء من الصورة .
    2 -stretch لتمدد جزء من الصورة .

كما یجب ذكرها أي الخاصة بكل متصفح لتعرض في المتصفحات المختلفة .

مثال:

div { border-image:url(name.gif) 30 30 20 stretch ; }

box-shadow:

ھذه خاصیة جدیدة في CSS3 , وھذه الخاصیة تستخدم لصنع ظل حول إطار معین ( فقرة او
نص او قسم معین ) ویمكننا التحكم بحجم ولون الظل , وھذه الخاصیة تأخذ ثلاث قیم رقمیة
وواحدة لونیة حیث إن القیمة الأولى تحدد سمك الظل إذا أعطیناھا قیمة سالبة سیكون الظل من
جھة الیسار وإذا أعطیناھا قیمة موجبة سیكون الظل من جھة الیمین , القیمة الثانیة تحدد سمك
الظل وإذا أعطیناھا قیمة سالبة سیكون الظل في الأعلى أما إذا أعطیناھا قیمة موجبة سیكون
الظل من الأسفل , القیمة الثالثة تمثل شدة وضوح الظل ولا یمكن أن تأخذ قیمة سالبة وأما القیمة
الرابعة فھي تحدد لون الظل .

مثال:

p { box-shadow:10px 10px 5px #888; }

ویمكن أن نضیف أكثر من ظل لنفس النص وذلك بكتابة القیم الأربعة أسفل قیم
خاصیة الظل الأولى مع استبدال الفارزة المنقوطة في نھایة الخاصیة الأولى إلى
فارزة فقط .

مثال:

box-shadow:7px 5px 3px #333,
10px 10px 3px #fff;

وبنفس الطریقة یمكن إضافة ظل ثالث أو رابع أو أكثر كما نشاء .