مولاتى

بســــــم الله الرحمن الرحيم


<meta name="propeller" content="7edb445ea1f8a84d8d2c566f754a8268" />
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا


او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي


سنتشرف بتسجيلك


شكرا
ادارة المنتدي

مولاتى


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

شاطر | 
 

 الدرس 9: نموذج الصندوق

اذهب الى الأسفل 
كاتب الموضوعرسالة
Admin
Admin
Admin
avatar

الساعة الأن :
الدوله :
ذكر عدد المساهمات : 210
نقاط : 6835
تاريخ التسجيل : 25/11/2014
العمر : 31
الموقع : www.moulati.arab.st

مُساهمةموضوع: الدرس 9: نموذج الصندوق   الثلاثاء ديسمبر 16, 2014 4:30 am

نموذج الصندوق في CSS يصف الصناديق التي تنشأ من خلال عناصر HTML، نموذج الصندوق يحوي أيضاً خيارات مفصلة حول تعديل الحاشية، الإطار، الحشو والمحتويات لكل عنصر، في المثال التوضيحي أدناه سنعرض أجزاء نموذج الصندوق:

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



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


الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][size=16]   <h1>Article 1:</h1>[/size][/center]


[center][size=16]   <p>All human beings are born free[/size][/center]
   and equal in dignity and rights.

[center][size=16]   They are endowed with reason and conscience[/size][/center]
   and should act towards one another in a
   spirit of brotherhood</p>

[center][size=16]   [/size][/center]






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

الكود:
<h1>

 و

الكود:
<p>

، نموذج الصندوق للعنصرين سيظهر بهذا الشكل:

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
حتى لو بدى المثال معقداً، الرسم يوضح كل عنصر في HTML محاط بصناديق، الصناديق يمكن تعديلها من خلال CSS.
الخصائص التي تتحكم بالصناديق المختلفة هي: 

الكود:
padding

 و

الكود:
margin

 و

الكود:
border

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


  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]
    [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]
    الكود:
    margin
    [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]
    [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]
    [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]
    الكود:
    padding
    [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]

  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]
    [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]
    الكود:
    border
    [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


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

ملخص

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


قناة المعلم التعليميه للشروحات المصوره والشروحات التعليميه والثقافيه والفنيه والتكنلوجيا
نحن نؤمن بأنه ليس هناك رجلا يعرف كل شئ ولكننا نؤمن بتبادل الافكار
اذا اعجبكم الشرح ارجو ان تضغطو على زر ( اعجاب + مشاركه )
ومتابعتنا على قناة المعلم عبر الرابط التالى
[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]

ومتابعتنا عبر صفحتنا فى الفيس بوك عبر الرابط التالى
[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://moulati.arab.st
 
الدرس 9: نموذج الصندوق
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
مولاتى :: youtube :: قناة المُعلم :: دروس شامله وكامله لتتعلم كل شئ عن الـ CSS وكيفية التعامل بيها وما هيا الـ CSS-
انتقل الى: