التونسية للمحمــول Tn-GsMدخول


شرح خصائص margin /padding /border

power_settings_newقم بتسجيل الدخول للرد
2 مشترك

description شرح خصائص margin /padding /border Empty شرح خصائص margin /padding /border2015-07-11, 14:21

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

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

تكبير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


وهو تخطيط يوضح شكل الصفحه وحدودها
 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 إتجاهات بنفس القيمة.



تكبير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


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

[/size]الكود: ---------تضليل المحتوى

الكود:

#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; }



تكبير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


[size=16]وتعرّف الخاصية داخل css و تكتب بالشكل التالي :
[/size]الكود: ---------تضليل المحتوى

الكود:

   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; }


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

تكبير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


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

[/size]الكود: ---------تضليل المحتوى

الكود:

border-width: thin سمك الحدود الإفتراضي رفيع ، متوسط ، سميك وذلك لجميع الإتجاهاتborder-width: mediumborder-width: thickborder-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

تكبير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

012c

▬▬▬▬▬▬▬▬ஜ ۩۞۩ ஜ▬▬▬▬▬▬▬▬
أهلا وسهلا يك (زائر) في منتديات التونسية للمحمول
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]  قوانين منتدى التونسية للمحمول ( المرور من هنا واجب )
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]  طريقة الإنظمام إلي مجموعة أعضاء سبور € GSM Tn
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]  هام لكل الأعضاء الجدد {اخي ..}، كنت عضومنذُ{8 أيام الأخيرة..}

كتبت وقد أيقنت يوم كتابتي بأن يدي تفنى ويبقى كتابها فإن كتبت خيرا ستجزى بمثله وإن كتبت شراً عليها حسابها...

description شرح خصائص margin /padding /border Emptyرد: شرح خصائص margin /padding /border2015-07-11, 14:25

more_horiz
ff

▬▬▬▬▬▬▬▬ஜ ۩۞۩ ஜ▬▬▬▬▬▬▬▬
سبحان الله و بحمده سبحان الله العظيم
اللهم صل و سلم و بارك على سيدنا محمد
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
privacy_tip صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
power_settings_newقم بتسجيل الدخول للرد