تويت
[frame="1 98"]
التخطيط ـ شرح للـmargin, padding, border
Layout وتعنى التخطيط او تقسيم الصفحات، وقبل ان نبدأ لابد من تذكر كيف كان يتم التخطيط في html .. فعندما كنا نريد تخطيط الموقع كنا نعتمد إعتماد كلي على الجدوال في ذلك وبالشكل الذى نراه مناسب، ولكن بعد أن ظهرت المتصفحات التى تدعم المعايير القياسيه مثل Firefox بشكل سليم ومتوافق مع منظمة الويب التى تدعو للإستغناء عن الجداول في التصميم والتحول الى css الى جانب الكثير من المواقع والمنظمات التى تدعو لإتباع المعايير القياسية في التصميم، كانت الحاجه للإستخدام طريقه جديدة في التخطيط اكثر مرونه وسهوله توافق المعايير القياسية وتظهر بشكل سليم على كافه المتصفحات.
ولمعلوماتك الجداول عندما ظهرت أول مرة في html كانت لغرض واحد فقط هو عرض البيانات المجدولة كالإحصائيات، ثم بعدها ظهرت خاصيه إخفاء الحدود <table border="0"> وإستعان بذلك المصممون وإستخدمت الجداول بشكل جديد وادرج فيها الصور والرسوم…الخ ولازالت حتى اليوم تستخدم الجدول بشكل كبير في التخطيط وبالمواقع التى تستخدم الصور بشكل كبير.
حديثنا اليوم يتلخص في الصورة التاليه :
وهو تخطيط يوضح شكل الصفحه وحدودها
content edge: المحتوى وهو كل ماتحويه الصفحه من نصوص او صور …الخ وتحيط بها البطانة من كافة الجوانب.
padding edge: وهى البطانة وتحيط بها الحدود من كامل الجهات ، لتترك مسافة بين الجسم والمحتوى الداخلي ـ وإذا تم تعينها الى 0 سوف يلتصق محتوى الصندوق بالحافة ( وهو بدايه الهامش ) بدون اى فرغات.
border edge: الحدود وتحيط بها الهوامش او الحواف من كافة الجهات ـ وإذا تم تعينها الى صفر 0 يبقى فقط منها حافة البطانة وبدون أثر.
margin edge: الهوامش أو الحواف عندما تحدد يظهر هذا الهامش بين التصميم وبين حافة الصفحه داخل المتصفح ـ وفي حاله تعيين هذه الهوامش الى صفر 0 سوف يلتصق التصميم بكامل صفحه العرض وما نطلق عليه التصميم المتمدد بكامل الصفحه.
وبالامثلة سنوضح الان الـ margin و padding
كما شاهدت فالـ margin إذا حُددت لأحد عناصر الصفحه ستكون هى المساحه التى تحيط بالصندوق من كافة الجهات وتفصلها عن بقيه العناصر الأخرى ـ ويعرّف داخل css و يكتب بالشكل التالي :
اما الـ padding عند تحدديها تكون هى المساحه الداخلية التى تحيط بالمحتوى لتفصل بينه وبين الجسم.
وتعرّف الخاصية داخل css و تكتب بالشكل التالي :
نأتي الأن الى الـ border وهى الحدود ـ وتعيين عن طريق 3 خواص فرعية لها (السمك ـ النمط او شكل الحد ـ اللون)
- border-width السمك ويعين بالشكل التالي:
ويعرّف داخل css ويكتب هكذا:
border-color اللون ولن يختلف في طريقة الكتابة عما سبق راجع فقط الدرس السابق لتتذكر خواص الألوان في css
- border-style وهو شكل الحد نفسه وما يلي جميع الأشكال التى يمكن ان تجدها في css2
وتكتب ايضا داخل css بنفس القواعد السابقة والإختصارات.
إذن ومما سبق فعند الطبيق على أحد العناصر يجب ان نحدد ( السمك واللون والشكل ) والكود النهائي يصبح بهذا الشكل:
ولكن لاحظ ان الكتابة بهذا الشكل غير عملية وتجعلنا نكتب الكثير من الأوامر ـ ولهذا توجد طريقة أخيرة مختصرة تجعلنا ندمج 3 خصائص في سطر واحد هكذا:
[HTML]#new { border: 5px solid red; } [/HTML]
وبنفس الوقت يمكن ان تحدد لكل طرف سمك وشكل معين كما بالكود التالي :
[HTML]
#new {
border-top: 20px solid red;
border-right: 10px solid red;
border-bottom: 2px solid red;
border-left: 7px solid red;
}
[/HTML]
[/frame]
التخطيط ـ شرح للـmargin, padding, border
Layout وتعنى التخطيط او تقسيم الصفحات، وقبل ان نبدأ لابد من تذكر كيف كان يتم التخطيط في html .. فعندما كنا نريد تخطيط الموقع كنا نعتمد إعتماد كلي على الجدوال في ذلك وبالشكل الذى نراه مناسب، ولكن بعد أن ظهرت المتصفحات التى تدعم المعايير القياسيه مثل Firefox بشكل سليم ومتوافق مع منظمة الويب التى تدعو للإستغناء عن الجداول في التصميم والتحول الى css الى جانب الكثير من المواقع والمنظمات التى تدعو لإتباع المعايير القياسية في التصميم، كانت الحاجه للإستخدام طريقه جديدة في التخطيط اكثر مرونه وسهوله توافق المعايير القياسية وتظهر بشكل سليم على كافه المتصفحات.
ولمعلوماتك الجداول عندما ظهرت أول مرة في html كانت لغرض واحد فقط هو عرض البيانات المجدولة كالإحصائيات، ثم بعدها ظهرت خاصيه إخفاء الحدود <table border="0"> وإستعان بذلك المصممون وإستخدمت الجداول بشكل جديد وادرج فيها الصور والرسوم…الخ ولازالت حتى اليوم تستخدم الجدول بشكل كبير في التخطيط وبالمواقع التى تستخدم الصور بشكل كبير.
حديثنا اليوم يتلخص في الصورة التاليه :
وهو تخطيط يوضح شكل الصفحه وحدودها
content edge: المحتوى وهو كل ماتحويه الصفحه من نصوص او صور …الخ وتحيط بها البطانة من كافة الجوانب.
padding edge: وهى البطانة وتحيط بها الحدود من كامل الجهات ، لتترك مسافة بين الجسم والمحتوى الداخلي ـ وإذا تم تعينها الى 0 سوف يلتصق محتوى الصندوق بالحافة ( وهو بدايه الهامش ) بدون اى فرغات.
border edge: الحدود وتحيط بها الهوامش او الحواف من كافة الجهات ـ وإذا تم تعينها الى صفر 0 يبقى فقط منها حافة البطانة وبدون أثر.
margin edge: الهوامش أو الحواف عندما تحدد يظهر هذا الهامش بين التصميم وبين حافة الصفحه داخل المتصفح ـ وفي حاله تعيين هذه الهوامش الى صفر 0 سوف يلتصق التصميم بكامل صفحه العرض وما نطلق عليه التصميم المتمدد بكامل الصفحه.
وبالامثلة سنوضح الان الـ margin و padding
كما شاهدت فالـ margin إذا حُددت لأحد عناصر الصفحه ستكون هى المساحه التى تحيط بالصندوق من كافة الجهات وتفصلها عن بقيه العناصر الأخرى ـ ويعرّف داخل css و يكتب بالشكل التالي :
كود PHP:
#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; }
وتعرّف الخاصية داخل css و تكتب بالشكل التالي :
كود PHP:
#new { 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-width السمك ويعين بالشكل التالي:
ويعرّف داخل css ويكتب هكذا:
كود PHP:
#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-style وهو شكل الحد نفسه وما يلي جميع الأشكال التى يمكن ان تجدها في css2
وتكتب ايضا داخل css بنفس القواعد السابقة والإختصارات.
إذن ومما سبق فعند الطبيق على أحد العناصر يجب ان نحدد ( السمك واللون والشكل ) والكود النهائي يصبح بهذا الشكل:
كود PHP:
#new {
border-style: solid;
border-width: 5px;
border-color: red;
}
/* OR */
#new {
border-top-style: solid;
border-top-color: red;
border-top-width: 5px;
border-right-style: solid;
border-right-color: red;
border-right-width: 5px;
border-bottom-style: solid;
border-bottom-color: red;
border-bottom-width: 5px;
border-left-style: solid;
border-left-color: red;
border-left-width: 5px;
}
[HTML]#new { border: 5px solid red; } [/HTML]
وبنفس الوقت يمكن ان تحدد لكل طرف سمك وشكل معين كما بالكود التالي :
[HTML]
#new {
border-top: 20px solid red;
border-right: 10px solid red;
border-bottom: 2px solid red;
border-left: 7px solid red;
}
[/HTML]
تعليق