درس Css : مهم جدآ ، شرح margin, padding, border

[нєαɒs нυиτєя]

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

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

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

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

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

border edge: الحدود وتحيط بها الهوامش او الحواف من كافة الجهات ـ وإذا تم تعينها الى صفر 0 يبقى فقط منها حافة البطانة وبدون أثر.

margin edge: الهوامش أو الحواف عندما تحدد يظهر هذا الهامش بين التصميم وبين حافة الصفحه داخل المتصفح ـ وفي حاله تعيين هذه الهوامش الى صفر 0 سوف يلتصق التصميم بكامل صفحه العرض وما نطلق عليه التصميم المتمدد بكامل الصفحه.

وبالامثلة سنوضح الان الـ margin و padding ..

رمز Code:
argin-top: إدخل قيمة الهامش العلوي.



margin-right: إدخل قيمة الهامش الإيمن.
margin-bottom: إدخل قيمة الهامش السفلي.
margin-left: إدخل قيمة الهامش الإيسر.
margin: يتم تحديد الأبعاد مرة واحدة بنفس الأمر.
margin: في حالة كانت القيمة واحده لجميع الإتجاهات تختصر وتكتب مرة واحده فقط.
margin: إختصار إذا كان يشترك إتجاهين بنفس القيمة أفقي أو رأسي.
margin: إختصار إذا كان يشترك 3 إتجاهات بنفس القيمة.

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

رمز Code:
#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; }
اما الـ padding عند تحدديها تكون هى المساحه الداخلية التى تحيط بالمحتوى لتفصل بينه وبين الجسم.

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

رمز Code:
padding-top: إدخل قيمة الهامش العلوي.
padding-right: إدخل قيمة الهامش الإيمن.
padding-bottom: إدخل قيمة الهامش السفلي.
padding-left: إدخل قيمة الهامش الإيسر.
padding: يتم تحديد الأبعاد مرة واحدة بنفس الأمر.
padding: في حالة كانت القيمة واحده لجميع الإتجاهات تختصر وتكتب مرة واحده فقط.
padding: إختصار إذا كان يشترك إتجاهين بنفس القيمة أفقي أو رأسي.
padding: إختصار إذا كان يشترك 3 إتجاهات بنفس القيمة.
رمز Code:
#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 وهى الحدود ـ وتعيين عن طريق 3 خواص فرعية لها (السمك ـ النمط او شكل الحد ـ اللون)

- border-width السمك ويعين بالشكل التالي:

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


رمز Code:
border-width: thin سمك الحدود الإفتراضي رفيع ، متوسط ، سميك وذلك لجميع الإتجاهات
border-width: medium
border-width: thick
border-top-width: إدخل سمك الحد العلوي
border-right-width: إدخل سمك الحد الأيمن
border-bottom-width: إدخل سمك الحد السفلي
border-left-width: إدخل سمك الحد الإيسر
border-width: إدخل سمك الحدود مختصر لجميع الإتجاهات
border-width: إدخل سمك الحدود، مفصل لجميع الإتجاهات
border-width: مختصر عندما يشترك إتجاهين في القيمة
رمز Code:
#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

وتكتب ايضا داخل css بنفس القواعد السابقة والإختصارات.

إذن ومما سبق فعند الطبيق على أحد العناصر يجب ان نحدد ( السمك واللون والشكل ) والكود النهائي يصبح بهذا الشكل:

رمز Code:
#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;
}
ولكن لاحظ ان الكتابة بهذا الشكل غير عملية وتجعلنا نكتب الكثير من الأوامر ـ ولهذا توجد طريقة أخيرة مختصرة تجعلنا ندمج 3 خصائص في سطر واحد هكذا:

رمز Code:
#new { border: 5px solid red; }
وبنفس الوقت يمكن ان تحدد لكل طرف سمك وشكل معين كما بالكود التالي :

رمز Code:
#new {
border-top: 20px solid red;
border-right: 10px solid red;
border-bottom: 2px solid red;
border-left: 7px solid red;
}
انتهينا من شرح اغلب واهم خصآئص Css ! ..
ماذا تريدون الدورة القادمة ؟

شرح اهم خصائص jQ ! > لغة الجيكوري ..
شرح تصميم واجة احترافية ب Css ..
شرح Html5 للمبتدئين ..

في انتظآر آرآئكم ..