الشبح
26-06-2010, 06:56 مساءً
السلام عليكم ورحمة الله وبركاته
عودة من جديد لتقديم دروس css لغة العصر
نبدا
الدرس 9: نموذج الصندوق
نموذج الصندوق في CSS يصف الصناديق التي تنشأ من خلال عناصر HTML، نموذج الصندوق يحوي أيضاً خيارات مفصلة حول تعديل الحاشية، الإطار، الحشو والمحتويات لكل عنصر، في المثال التوضيحي أدناه سنعرض أجزاء نموذج الصندوق:
ملاحظة الصندوق هو تعريف لعناصر الصفحة وكيفية تشكيلها والتحكم ف ي العناصر
نموذج الصندوق في CSS
http://ar.html.net/tutorials/css/figure008.gif
الرسم أعلاه يبدو مربكاً بعض الشيء، لذلك لنقم باستخدام نموذج الصندوق في مثال فعلي باستخدام عنوان وبعض النصوص، في 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>:
http://ar.html.net/tutorials/css/figure009.gif
المثال يحوي عنصرين <h1> و<p>، نموذج الصندوق للعنصرين سيظهر بهذا الشكل:
http://ar.html.net/tutorials/css/figure010.gif
حتى لو بدى المثال معقداً، الرسم يوضح كل عنصر في HTML محاط بصناديق، الصناديق يمكن تعديلها من خلال CSS.
الخصائص التي تتحكم بالصناديق المختلفة هي: padding وmargin وborder، في الدرسين اللاحقين سنتعامل مع هذه الخصائص الثلاثة.
الدرس 10: نموذج الصندوق margin وpadding
الدرس 11: نموذج الصندوق border
عندما تنتهي من الدرسين ستتمكن من التحكم بنموذج الصندوق وتقوم بتعديل ملفات HTML بشكل أفضل وأكثر دقة مقارنة مع استخدام الأسلوب القديم الذي يعتمد على الجداول في HTML.
لتفهم هذا الدرس تابع الدرس القادم
الشبح مرسى الفي بي:d:d
عودة من جديد لتقديم دروس css لغة العصر
نبدا
الدرس 9: نموذج الصندوق
نموذج الصندوق في CSS يصف الصناديق التي تنشأ من خلال عناصر HTML، نموذج الصندوق يحوي أيضاً خيارات مفصلة حول تعديل الحاشية، الإطار، الحشو والمحتويات لكل عنصر، في المثال التوضيحي أدناه سنعرض أجزاء نموذج الصندوق:
ملاحظة الصندوق هو تعريف لعناصر الصفحة وكيفية تشكيلها والتحكم ف ي العناصر
نموذج الصندوق في CSS
http://ar.html.net/tutorials/css/figure008.gif
الرسم أعلاه يبدو مربكاً بعض الشيء، لذلك لنقم باستخدام نموذج الصندوق في مثال فعلي باستخدام عنوان وبعض النصوص، في 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>:
http://ar.html.net/tutorials/css/figure009.gif
المثال يحوي عنصرين <h1> و<p>، نموذج الصندوق للعنصرين سيظهر بهذا الشكل:
http://ar.html.net/tutorials/css/figure010.gif
حتى لو بدى المثال معقداً، الرسم يوضح كل عنصر في HTML محاط بصناديق، الصناديق يمكن تعديلها من خلال CSS.
الخصائص التي تتحكم بالصناديق المختلفة هي: padding وmargin وborder، في الدرسين اللاحقين سنتعامل مع هذه الخصائص الثلاثة.
الدرس 10: نموذج الصندوق margin وpadding
الدرس 11: نموذج الصندوق border
عندما تنتهي من الدرسين ستتمكن من التحكم بنموذج الصندوق وتقوم بتعديل ملفات HTML بشكل أفضل وأكثر دقة مقارنة مع استخدام الأسلوب القديم الذي يعتمد على الجداول في HTML.
لتفهم هذا الدرس تابع الدرس القادم
الشبح مرسى الفي بي:d:d