1. الرئيسية
  2. الإحصائيات
  3. البحث
  4. جديد الدروس
  5. أخبر صديقك
  6. اتصل بنا

مدرسة هاني الطنبور » لغة CSS » الدرس 9: نموذج الصندوق

 الدرس 9: نموذج الصندوق  أضيف في: 20/06/2010
نموذج الصندوق في CSS يصف الصناديق التي تنشأ من خلال عناصر HTML، نموذج الصندوق

يحوي أيضاً خيارات مفصلة حول تعديل الحاشية، الإطار، الحشو والمحتويات لكل عنصر، في المثال

التوضيحي أدناه سنعرض أجزاء نموذج الصندوق:



نموذج الصندوق في CSS


http://hanialtanbour.com/up/uploads/12770180201.gif


الرسم أعلاه يبدو مربكاً بعض الشيء، لذلك لنقم باستخدام نموذج الصندوق في مثال فعلي باستخدام

عنوان وبعض النصوص، في HTML وضعنا نصاً مقتبساً من الميثاق العالمي لحقوق الإنسان:
CODE:
0001
0002
0003
0004
0005
0006
0007
0008
0009
<h1>Article 1:</h1>


<p>All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood</p>


بإضافة بعض الألوان وتحديد بعض المعلومات حول الخطوط يمكن للمثال أن يصبح بهذا الشكل:


http://hanialtanbour.com/up/uploads/12770180941.gif


المثال يحوي عنصرين <h1> و<p>، نموذج الصندوق للعنصرين سيظهر بهذا الشكل:




http://hanialtanbour.com/up/uploads/12770181541.gif


حتى لو بدى المثال معقداً، الرسم يوضح كل عنصر في HTML محاط بصناديق، الصناديق يمكن تعديلها
من خلال CSS.

الخصائص التي تتحكم بالصناديق المختلفة هي: padding وmargin وborder، في الدرسين

اللاحقين سنتعامل مع هذه الخصائص الثلاثة.


•الدرس 10: نموذج الصندوق margin وpadding
•الدرس 11: نموذج الصندوق border


عندما تنتهي من الدرسين ستتمكن من التحكم بنموذج الصندوق وتقوم بتعديل ملفات HTML بشكل

أفضل وأكثر دقة مقارنة مع استخدام الأسلوب القديم الذي يعتمد على الجداول في HTML.


ملخص

في هذا الدرس تعلمت نموذج الصندوق، في الدروس القادمة سنلقي نظرة أقرب على كيفية إنشاء

والتحكم بنموذج الصندوق.



المصدر HTML.NET

الكاتب: admin انقر هنا لمراسلة admin أنقر هنا للإنتقال إلى موقع admin إضافة للمفضلة إضافة لمفضلة Google إضافة لمفضلة Delicious إضافة لمفضلة Digg إضافة لمفضلة Facebook
خيارات الدرس : ارسل الدرس لصديق ارسل الدرس لصديق  طباعة الدرس طباعة الدرس