بيانات كاتب الموضوع | الدرس 9: نموذج الصندوق CSS |
| كاتب الموضوع | رسالة |
|---|
| المعلومات | الكاتب: | | اللقب: | | الرتبه: | | | الصورة الرمزية | | | البيانات | | عدد المشاركات : | 200 |
| الإتصالات | | الحالة: | | | وسائل الإتصال: | |
| موضوع: الدرس 9: نموذج الصندوق CSS  16/11/2014, 17:46 |
| اذا احتوت المشاركة صورا - قم بالضغط عليها لعرضها بحجمها الطبيعي 
الدرس 9: نموذج الصندوق
نموذج الصندوق في CSS يصف الصناديق التي تنشأ من خلال عناصر HTML، نموذج الصندوق يحوي أيضاً خيارات مفصلة حول تعديل الحاشية، الإطار، الحشو والمحتويات لكل عنصر، في المثال التوضيحي أدناه سنعرض أجزاء نموذج الصندوق:
نموذج الصندوق في CSS
الرسم أعلاه يبدو مربكاً بعض الشيء، لذلك لنقم باستخدام نموذج الصندوق في مثال فعلي باستخدام عنوان وبعض النصوص، في HTML وضعنا نصاً مقتبساً من الميثاق العالمي لحقوق الإنسان:
- الكود:
-
<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>
بإضافة بعض الألوان وتحديد بعض المعلومات حول الخطوط يمكن للمثال أن يصبح بهذا الشكل:
المثال يحوي عنصرين
- الكود:
-
<h1> و
- الكود:
-
<p> ، نموذج الصندوق للعنصرين سيظهر بهذا الشكل:
حتى لو بدى المثال معقداً، الرسم يوضح كل عنصر في HTML محاط بصناديق، الصناديق يمكن تعديلها من خلال CSS.
الخصائص التي تتحكم بالصناديق المختلفة هي:
- الكود:
-
padding و
- الكود:
-
margin و
- الكود:
-
border ، في الدرسين اللاحقين سنتعامل مع هذه الخصائص الثلاثة.
- الدرس 10: نموذج الصندوق
- الكود:
-
margin و
- الكود:
-
padding
- الدرس 11: نموذج الصندوق
- الكود:
-
border
عندما تنتهي من الدرسين ستتمكن من التحكم بنموذج الصندوق وتقوم بتعديل ملفات HTML بشكل أفضل وأكثر دقة مقارنة مع استخدام الأسلوب القديم الذي يعتمد على الجداول في HTML.
![]() الموضوع الأصلي : الدرس 9: نموذج الصندوق CSS // المصدر : منتديات إجلجلي Agelgele // الكاتب:énergie
|
|
| | |
| المعلومات | الكاتب: | | اللقب: | مؤسس الموقع | الرتبه: | | | الصورة الرمزية | | | البيانات | | رسالة SMS : | الحمد لله علي كل حال | |  | |  | | العمر : | 32 | | عدد المشاركات : | 1609 |
| الإتصالات | | الحالة: | | | وسائل الإتصال: | |
| موضوع: رد: الدرس 9: نموذج الصندوق CSS 2/12/2014, 19:12 |
| اذا احتوت المشاركة صورا - قم بالضغط عليها لعرضها بحجمها الطبيعي
جزاك الله كل خيرا علي الموضوع
المفيد والرقي
![]() الموضوع الأصلي : الدرس 9: نموذج الصندوق CSS // المصدر : منتديات إجلجلي Agelgele // الكاتب:Ǥlamorous
|
|
| | |
| | الدرس 9: نموذج الصندوق CSS | |
|
23/8/2017, 21:53
هام جداً: قوانين المساهمة في المواضيع. انقر هنا للمعاينة 
