الرئيسيةبحـثالتسجيلس .و .جالأعضاءالمجموعاتدخول

شاطر | 
 

 الدرس الرابع : التحكم فى العناصر المربعة box models

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
المهندس صافى
مؤسس المنتدى والمدير العام

avatar

احترام القوانين :
ذكر تاريخ الميلاد : 25/07/1998
عدد المساهمات : 1044
نقاط : 3102
تاريخ التسجيل : 29/08/2009
العمر : 19
الموقع : الاسكندرية

مُساهمةموضوع: الدرس الرابع : التحكم فى العناصر المربعة box models    الجمعة مارس 04, 2011 7:53 am

تنسيق الصفحة او مايعرف بالـ layout

قبل دعم الـ CSS كان امر ممل ولا يتم الا بواسطة الـ Tables (او الجداول وسنتعرف عليها فيما بعد)

لكن بعد دعم الـ CSS المسألة اصبحت اكثر مرونة وسهولة, وسرعة وجمال فى تنسيق الصفحة ايضا.


كيف يمكن التحكم فى تنسيق الصفحة من خلال الـ CSS ؟

اجابة هذا السؤال كبيرة نوعا ما, ودرس اليوم هو جزء من الإجابة.

وسنبدأه بالتحكم بالعناصر التى لها اربعة حدود او مايعرف بالـ box model
(مثل الـ div مثلا)

اولا.

كل عنصر من عناصر الـ HTML يمكننا ان نحدد ابعادها (الإرتفاع والعرض) من خلال الـ CSS
من خلال الخاصيتين width و height

كامثال (اظن رأينا اشياء مشابهة مسبقا)

الرمز:
p{
width: 100px;
height: 75px;
}

لكن ماذا اذا كان محتوى العنصر اكبر من الأبعاد التى حددناها له, ومازلنا نرغب ان لا يتم استخدام مساحة اكثر لمحتوى هذا العنصر؟

(السؤال بصيغة اخرى)
ماذا اذا كان محتوى العنصر يحتاج الى 200px كاعرض, و 150px ارتفاع, ومازال
لدينا رغبة فى ان لا يزيد حجم هذا العنصر عن 100px عرض و 75px ارتفاع لكى
يكتمل جمال الصفحة, ونتلاشى ايضا تشويه شكل الصفحة بسبب حجم هذا العنصر؟

اذا كان العنصر, عبارة عن صورة فـ بالتأكيد ان تعلم كيف تقوم بإعداد ابعاد الصورة, لكن المشكلة اذا كان العنصر نصى.
لكن الحل ان شاء الله موجود.
وهو بإستخدام الخاصية overflow
خاصية الـ overflow لها عدة قيم يمكننا ان نستخدم احداهم.
وهما كالتالى


  • visible وهذه هى القيمة الإفتراضية, وتعنى ان المحتوى الذى يتطلب مساحة اكبر سيتم عرضه كما هو.



  • hidden وتعنى ان اى محتوى داخل العنصر يحتاج لمزيد من المساحة, سيتم حجبه وعدم عرضه



  • scroll


  • وتعنى ظهور سكرول بار, واذا كان هناك محتوى يتطلب مزيد من المساحة, سيمكن


  • للمستخدم ان يستخدم الأسكرول بار للتجول داخل العنصر ورؤية المتبقى منه.



  • auto


  • وهذه افضل قيمة يمكنك ان تستخدمها, وهى تعنى عدم عرض الـ scroll bar الا


  • عند الحاجة له, اى عندما يكون هناك محتوى يتطلب مساحة اكثر من المساحة


  • التى حددناها للعنصر (سواء كانت المساحة المطلوبة فى العرض او الإرتفاع)




هذا كان بالنسبة لحجم العنصر.

ولنلقى الأن نظرة على عدة خصائص للتحكم بمظهر العناصر.

خاصية Padding


ترجمة كلمة padding تعنى البطانة.

والمقصود بخاصية padding هو التحكم فى المسافة التى تفرق بين محتوى احد العناصر وبين حدود هذا العنصر.

انظر الصورة التالية فهى توضح المعنى المقصود من محتوى العنصر وحدود العنصر



خاصية الـ padding يتفرع منها 5 خصائص وهما كالتالى
padding-top و padding-left و padding-right و padding-bottom
وكل منهم يتم تحديد قيمته بالبيكسل او الـ em
او حتى cm (سم)
على سبيل المثال اذا كنا نريد العنصر صاحب الكلاس message
ان يكون هناك مسافة 2 بيكسل بين حدود الجهة اليمنى والمحتوى
يتم الأمر بالشكل التالى
الرمز:
.message{
padding-right: 2px;
}


وهكذا لبقية خصائص الـ padding

لكن ماذا عن الإختصارات؟ هل يجب عليك ان تكتب الأربع خصائص اذا كنت تريد ان يكون هناك مسافة معينة بين كل حد من حدود العنصر ومحتواه؟
بالطبع لا, يمكنك استخدام خاصية padding فقط.
مثلا نريد ان نجعل المسافة 5 بيكسل تفصل بين كل الحدود (الأيمن, والأيسر, والأسفل و الأعلى) وبين المحتوى
يتم الأمر بمنتهى البساطة بالشكل التالى
الرمز:

padding: 5px;

وايضا يمكنك استخدام padding فقط لتحديد المسافة بالأربعة حدود (حتى ولو لم تكن المسافات متساوية كما فى المثال الأخير)

انظر للقائمة التالية لفهم كيفية استخدام padding بمفردها


  • padding: 5px;


  • سوف يتم تحديد فارق 5 بيكسل بين كل الحدود والمحتوى



  • padding: 5px 6px;


  • سوف يتم وضع مسافة 5 بيكسل, بين الحد الأعلى, والحد الأسفل, ومسافة 6 بيكسل لليمين واليسار



  • padding: 5px 3px 4px;


  • سوف يتم وضع مسافة 5 بيكسل تفرق بين الحد الأعلى والمحتوى


  • ومسافة 3 بيكسل للحد الأيمن والحد الأيسر


  • ومسافة 4 بيكسل للحد السفلى



  • padding: 5px 3px 4px 6px;


  • 5 بيكسل للحد الأعلى


  • 3 بيكسل للحد الأيمن


  • 4 بيكسل للحد السفلى


  • 6 بيكسل للحد الأيسر





اتمنى تكون فهمت كل ماهو مطلوب عن خاصية الـ padding

خاصية border


خاصية الـ border هى التى تمكنا من التحكم فى ظهور حدود احد العناصر

اولا نحن نعرف ان حدود اى عنصر هم اربعة (يمين, يسار, اعلى و اسفل)

وكذلك خاصية الـ border
وهم
border-left , border-right, border-top, border-bottom

وكل خاصية من هذه الخواص, لها اضافتان وهما الـ width (اى سُمك الحد)
و style اى شكل الحد وايضا color الخاصة بلون الحد.

لنعد الحد الأسفل لحد العناصر (لنفهم معنى ماسبق بمثال)
لنفترض ان العنصر الذى سنتعامل معه له الكلاس message
الرمز:
.message{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;
}


هكذا جعلنا سُمك الحد السفلى 1px وشكله solid (اى خطى فقط)

بنفس الطريقة الموجودة بالكود الأخير يمكننا اعداد بقية الحدود.
مايجب توضيحه فقط هو قيمة الخاصية style الخاصة بالحدود

والقائمة التالية توضح اهم القيم التى يمكن استخدامها


  • none تلغى الحد, اى لا يظهر.



  • solid تجعل الحد عبارة عن خط كاهذا مثلا


  • _______________________



  • dotted تجعل الحد عبارة عن خط من النقاط كالتالى مثلا


  • ......................



  • dashed تجعل الحد عبارة عن خط مكون من الداش كالتالى مثلا


  • --------------



  • double تجعل الحد مكرر, يعنى لو تم وضعها مع القيمة solid مثلا


  • تجعل هناك خطين بدلا من خط واحد.




هذه هى القيم الأكثر استخداما هناك ايضا القيم التالية
groove و ridge و inset و outset

وكما فعلنا مع خاصية padding فأنت لست دائما بحاجة لكتابة كل حد بمفرده,
او حتى كتابة كل خاصية لكل حد (كالـ width والـ style) لكل حد بمفرده.
يمكنك تعين الأربع حدود بالشكل التالى كامثال
الرمز:

border: 1px solid #000000;

هذا سيجعل الأربعة حدود للعنصر لهم اللون الأسود
ومن النوع solid وسُمكهم هو 1px

او يمكنك فعل نفس الشئ للحد الأسفل مثلا
الرمز:

border-bottom: #000000 1px dashed;

اتمنى يكون كل شئ بالنسبة للـ border كان واضحا بإذن الله.

خاصية Margin


خاصية الـ margin مثلها تماما مثل الـ padding

الا فرق واحد جزرى

الـ padding كما عرفنا
هى مانحدد بها المسافة بين حدود احد العناصر, ومحتوى هذا العنصر.

لكن الـ margin
نحدد بها المسافة بين حدود احد العناصر, وماخارج هذا العنصر (وليس داخله)

كامثال انظر كود الـ html التالى
الرمز:












some text here






لاحظ الجملة
some text here
والتى هى داخل العنصر p

والعنصر p نفسه داخل العنصر div

لاحظ ان العنصر p يظهر بأقصى يسار العنصر div صحيح؟
وايضا فى المنتصف (بالنسبة للإرتفاع).

اذن نجرب التالى

الرمز:












some text here








فى الكود الثانى اضفنا للعنصر p الكود التالى
margin-top: 0px;

مما يعنى, ان نجعل المسافة بين الحد العلوى للعنصر p وبين ماهو خارج العنصر p (والخارجى فى مثالنا هو العنصر div) هى 0 بيكسل


اتمنى يكون كل شئ بهذا الدرس الطويل والكبير اصبح واضح بإذن الله.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www.toty.arabstar.biz
mohamed_m
مشرف عام
مشرف عام
avatar

احترام القوانين :
ذكر تاريخ الميلاد : 16/07/1998
عدد المساهمات : 447
نقاط : 853
تاريخ التسجيل : 29/08/2009
العمر : 19

مُساهمةموضوع: رد: الدرس الرابع : التحكم فى العناصر المربعة box models    السبت ديسمبر 17, 2011 7:49 am

واضح يا مهندس

شكرا على الدرس
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
ti2oo
عضو محبوب فى المنتدى


احترام القوانين :
تاريخ الميلاد : 18/09/1990
عدد المساهمات : 138
نقاط : 287
تاريخ التسجيل : 29/08/2009
العمر : 27

مُساهمةموضوع: رد: الدرس الرابع : التحكم فى العناصر المربعة box models    الأحد ديسمبر 18, 2011 11:48 am

shokran lek 3la el shar7 al ra2e3 da

شكرا ليك على الشرح الرائع دى
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
المهندس صافى
مؤسس المنتدى والمدير العام

avatar

احترام القوانين :
ذكر تاريخ الميلاد : 25/07/1998
عدد المساهمات : 1044
نقاط : 3102
تاريخ التسجيل : 29/08/2009
العمر : 19
الموقع : الاسكندرية

مُساهمةموضوع: رد: الدرس الرابع : التحكم فى العناصر المربعة box models    الخميس ديسمبر 22, 2011 7:03 am

العفو يا تيتو على ايه
وننتظر جديدك

وتقبل تحياتى
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www.toty.arabstar.biz
 
الدرس الرابع : التحكم فى العناصر المربعة box models
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
 :: المهندس صافى فعالياتنا :: !…»§ ●[ــــودΞا لغات البرمجة Ξالـــ] ●§«…! :: !…»§ ●[ــــودΞ دورة تعلم css Ξالـــ] ●§«…!-
انتقل الى:  

أكوادcss|اكواد Template| الأسئلة الشائعة | تقنيات متقدمة |لغات البرمجة|اشهار المواقع والمنتديات |اقسام التصميم |اشهار المنتديات|دليل شركات الاستضافه|عروض المنتديات  |الابداع والجرافيزم |الفوتوشوب|البرامج  |


مركز تبادل الاعلانات العربيه

 دردشة | المهندس صافى