منتديات تقنيات
يسعدنا تسجيلكم بالمنتدى اهلا بكم


شرح margin, padding, border فى css

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

شرح margin, padding, border فى css

مُساهمة من طرف وهبة الساحر في 03/11/16, 04:02 pm



شرح margin, padding, border فى css





السلام عليكم ورحمة الله وبركاته



سنشرح اليوم خصائص  margin, padding, border

Layout وتعنى التخطيط او تقسيم الصفحات، وقبل ان نبدأ لابد من تذكر كيف كان يتم التخطيط في html .. فعندما كنا نريد تخطيط الموقع كنا نعتمد إعتماد كلي على الجدوال في ذلك وبالشكل الذى نراه مناسب، ولكن بعد أن ظهرت المتصفحات التى تدعم المعايير القياسيه مثل Firefox بشكل سليم ومتوافق مع منظمة الويب التى تدعو للإستغناء عن الجداول في التصميم والتحول الى css الى جانب الكثير من المواقع والمنظمات التى تدعو لإتباع المعايير القياسية في التصميم، كانت الحاجه للإستخدام طريقه جديدة في التخطيط اكثر مرونه وسهوله توافق المعايير القياسية وتظهر بشكل سليم على كافه المتصفحات.
ولمعلوماتك الجداول عندما ظهرت أول مرة في html كانت لغرض واحد فقط هو عرض البيانات المجدولة كالإحصائيات، ثم بعدها ظهرت خاصيه إخفاء الحدود <table border="0"> وإستعان بذلك المصممون وإستخدمت الجداول بشكل جديد وادرج فيها الصور والرسوم...الخ ولازالت حتى اليوم تستخدم الجدول بشكل كبير في التخطيط وبالمواقع التى تستخدم الصور بشكل كبير.

لن أفرد أكثر من ذلك حول عيوب التصميم عن طريق الجدوال ومزيا الطرق الحديثه لنعطي المجال أكثر حول التطبيق. حديثنا اليوم يتلخص في الصورة التاليه :


https://i19.servimg.com/u/f19/19/08/62/30/wehba110.gif

وهو تخطيط يوضح شكل الصفحه وحدودها
 content edge: المحتوى وهو كل ماتحويه الصفحه من نصوص او صور ...الخ وتحيط بها البطانة من كافة الجوانب.

padding edge: وهى البطانة وتحيط بها الحدود من كامل الجهات ، لتترك مسافة بين الجسم والمحتوى الداخلي ـ وإذا تم تعينها الى 0 سوف يلتصق محتوى الصندوق بالحافة ( وهو بدايه الهامش ) بدون اى فرغات.
border edge: الحدود وتحيط بها الهوامش او الحواف من كافة الجهات ـ وإذا تم تعينها الى صفر 0 يبقى فقط منها حافة البطانة وبدون أثر.
margin edge: الهوامش أو الحواف عندما تحدد يظهر هذا الهامش بين التصميم وبين حافة الصفحه داخل المتصفح ـ وفي حاله تعيين هذه الهوامش الى صفر 0 سوف يلتصق التصميم بكامل صفحه العرض وما نطلق عليه التصميم المتمدد بكامل الصفحه.
وبالامثلة سنوضح الان الـ margin و padding .


الرمز:
in-top: <length> إدخل قيمة الهامش العلوي.
margin-right: <length> إدخل قيمة الهامش الإيمن.
margin-bottom: <length> إدخل قيمة الهامش السفلي.
margin-left: <length> إدخل قيمة الهامش الإيسر.
margin: <top><right><bottom><left> يتم تحديد الأبعاد مرة واحدة بنفس الأمر.
margin: <all directions> في حالة كانت القيمة واحده لجميع الإتجاهات تختصر وتكتب مرة واحده فقط.
margin: <top/bottom><right/left> إختصار إذا كان يشترك إتجاهين بنفس القيمة أفقي أو رأسي.
margin: <top><left/right><bottom> إختصار إذا كان يشترك 3 إتجاهات بنفس القيمة.

https://i19.servimg.com/u/f19/19/08/62/30/wehba210.gif

كما شاهدت فالـ margin إذا حُددت لأحد عناصر الصفحه ستكون هى المساحه التى تحيط بالصندوق من كافة الجهات وتفصلها عن بقيه العناصر الأخرى ـ ويعرّف داخل css و يكتب بالشكل التالي :

الرمز:
#new { margin: 10px 10px 5px 10px; }
/* OR */
#new {
 margin-top: 10px;
 margin-right: 10px;
 margin-bottom: 5px;
 margin-left: 10px;
}
/* OR */
#new { margin: 10px 10px 5px; }

/*******************************************/

#new2 { margin: 10px 10px 10px 10px; }
/* OR */
#new2 { margin: 10px; }

https://i19.servimg.com/u/f19/19/08/62/30/wehba310.gif

وتعرّف الخاصية داخل css و تكتب بالشكل التالي :

الرمز:



padding-top: <length> إدخل قيمة الهامش العلوي.
padding-right: <length> إدخل قيمة الهامش الإيمن.
padding-bottom: <length> إدخل قيمة الهامش السفلي.
padding-left: <length> إدخل قيمة الهامش الإيسر.
padding: <top><right><bottom><left> يتم تحديد الأبعاد مرة واحدة بنفس الأمر.
padding: <all directions> في حالة كانت القيمة واحده لجميع الإتجاهات تختصر وتكتب مرة واحده فقط.
padding: <top/bottom><right/left> إختصار إذا كان يشترك إتجاهين بنفس القيمة أفقي أو رأسي.
padding: <top><left/right><bottom> إختصار إذا كان يشترك 3 إتجاهات بنفس القيمة.

الرمز:
ew { padding: 10px 10px 5px 10px; }
/* OR */
#new {
 padding-top: 10px;
 padding-right: 10px;
 padding-bottom: 5px;
 padding-left: 10px;
}
/* OR */
#new { padding: 10px 10px 5px; }

/*******************************************/

#new2 { padding: 10px 10px 10px 10px; }
/* OR */
#new2 { padding: 10px; }

نأتي الأن الى الـ border وهى الحدود ـ وتعيين عن طريق 3 خواص فرعية لها
(السمك ـ النمط او شكل الحد ـ اللون)
 border-width السمك ويعين بالشكل التالي:


https://i19.servimg.com/u/f19/19/08/62/30/wehba410.gif

ويعرّف داخل css ويكتب هكذا:


الرمز:
border-width: thin سمك الحدود الإفتراضي رفيع ، متوسط ، سميك وذلك لجميع الإتجاهات
border-width: medium
border-width: thick
border-top-width: <length> إدخل سمك الحد العلوي
border-right-width: <length> إدخل سمك الحد الأيمن
border-bottom-width: <length> إدخل سمك الحد السفلي
border-left-width: <length> إدخل سمك الحد الإيسر
border-width: <length all directions> إدخل سمك الحدود مختصر لجميع الإتجاهات
border-width: <top><right><bottom><left> إدخل سمك الحدود، مفصل لجميع الإتجاهات
border-width: <top/bottom><right/left> مختصر عندما يشترك إتجاهين في القيمة

الرمز:

#new { border-width: 10px 10px 5px 10px; }
/* OR */
#new {
 border-top-width: 10px;
 border-right-width: 10px;
 border-bottom-width: 5px;
 border-left-width: 10px;
}
/* OR */
#new { border-width: 10px 10px 5px; }

#new2 { border-width: 10px 10px 10px 10px; }
/* OR */
#new2 { border-width: 10px; }

- border-color اللون ولن يختلف في طريقة الكتابة عما سبق راجع فقط الدرس السابق لتتذكر خواص الألوان في css
- border-style وهو شكل الحد نفسه وما يلي جميع الأشكال التى يمكن ان تجدها في css2

https://i19.servimg.com/u/f19/19/08/62/30/wehba510.gif


اتمنى الشرح وآضح .. بالتوفيق ! ..



وهبة الساحر
القلوب المكسورة كالزجاج المكسور خطرة و مؤذية لا تحتاج للحب بقدر ما تحتاج للوحدة حتى يتم شفاؤها . . !!
     


وهبة الساحر
ادارة المنتدى


الجنس : ذكر
عدد المساهمات : 335
التقييم : 61
تاريخ التسجيل : 07/03/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: شرح margin, padding, border فى css

مُساهمة من طرف JAR7 في 25/11/16, 06:23 am

درس ممتع وشيق
يعطيك العافية على الموضوع
بطل كالعادة



JAR7
ادارة المنتدى


الجنس : انثى
عدد المساهمات : 2202
التقييم : 290
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: شرح margin, padding, border فى css

مُساهمة من طرف aiglemaster في 08/12/16, 11:54 pm

سلمت على روعه طرحك
نترقب المزيد من جديدك الرائع
دمت ودام لنا روعه مواضيعك
لكـ خالص إحترامى



aiglemaster
عضو نشيط


الجنس : ذكر
عدد المساهمات : 86
التقييم : 11
تاريخ التسجيل : 05/03/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

- مواضيع مماثلة

إنشاء حساب أو تسجيل الدخول لتستطيع الرد

تحتاج إلى أن يكون عضوا لتستطيع الرد.

انشئ حساب

يمكنك الانضمام لمنتديات تقنيات فعملية التسجيل سهله !


انشاء حساب جديد

تسجيل الدخول

اذا كنت مسجل معنا فيمكنك الدخول بالضغط هنا


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى