تويت
[frame="7 85"]
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
وبعد,
((دورة تعلم لغة CSS))
[/frame]
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
وبعد,
((دورة تعلم لغة CSS))
درس(12):نموذج الصندوق - الإرتفاع والعرض:-
حتى الآن لم نهتم كثيراً بأمر أبعاد العناصر التي قمنا بتعديل تصاميمها،
في هذا الدرس سنلقي نظرة على كيفية تحديد ارتفاع وعرض العناصر.
width
height
تحديد العرض "width"
الخاصية width تحدد عرضاً معيناً لعنصر محدد.
المثال البسيط أدناه يقدم لنا صندوقاً يمكن أن نكتب فيه نصاً:
شاهد المثال
تحديد الارتفاع "height"
في المثال أعلاه لاحظنا أن ارتفاع الصندوق تحدده محتوياته، يمكن التأثير على ارتفاع العنصر باستخدام الخاصية height، فمثلاً لنجرب أن نجعل ارتفاع الصندوق في المثال يبلغ 500 بكسل:
شاهد المثال
ملخص:-
في الدروس 9، 10، 11 و12 أعطيناك مقدمة لنموذج الصندوق في CSS، كما ترى نموذج الصندوق يعطيك الكثير من الخيارات الجديدة، ربما قمت باستخدام الجداول في HTML لإنشاء التصاميم، لكن الآن ومع CSS ونموذج الصندوق يجب أن تتمكن من إنشاء تصاميم أنيقة وأكثر دقة وتتوافق أكثر مع المعايير القياسية لمنظمة W3C.
منقولحتى الآن لم نهتم كثيراً بأمر أبعاد العناصر التي قمنا بتعديل تصاميمها،
في هذا الدرس سنلقي نظرة على كيفية تحديد ارتفاع وعرض العناصر.
width
height
تحديد العرض "width"
الخاصية width تحدد عرضاً معيناً لعنصر محدد.
المثال البسيط أدناه يقدم لنا صندوقاً يمكن أن نكتب فيه نصاً:
كود:
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
تحديد الارتفاع "height"
في المثال أعلاه لاحظنا أن ارتفاع الصندوق تحدده محتوياته، يمكن التأثير على ارتفاع العنصر باستخدام الخاصية height، فمثلاً لنجرب أن نجعل ارتفاع الصندوق في المثال يبلغ 500 بكسل:
كود:
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
ملخص:-
في الدروس 9، 10، 11 و12 أعطيناك مقدمة لنموذج الصندوق في CSS، كما ترى نموذج الصندوق يعطيك الكثير من الخيارات الجديدة، ربما قمت باستخدام الجداول في HTML لإنشاء التصاميم، لكن الآن ومع CSS ونموذج الصندوق يجب أن تتمكن من إنشاء تصاميم أنيقة وأكثر دقة وتتوافق أكثر مع المعايير القياسية لمنظمة W3C.
[/frame]
تعليق