تكنولوجيا المعلومات والاتصالات (بالعربية) الصف الثاني الإعدادي، الأسبوع 11: المسافات والحدود وتوسيط الحاوية

مشروعي الرقمي (٢): ملف التنسيق

الأسبوع 11 · الدرس ٣ «مشروعي الرقمي لمدرستي» (٢): كود CSS لتنسيق الصفحتين وشرحه · 3 دروس

المسافات والحدود وتوسيط الحاوية

ICT Prep 2 Term 1, Unit 2, Lesson 3: pp. 75–77

الهدفأميّز الحشو (padding) من الهامش (margin) وأقرأ قواعد العرض والتوسيط والحدود.

كلمات جديدة

الحشو (padding) · مساحة داخل الصندوق بين محتواه وحدّهالهامش (margin) · مساحة خارج الصندوق بينه وبين الأشياء الأخرىالحدّ (border) · الخط حول صندوق أو حول أحد جوانبهالعرض (width) · مدى اتساع الصندوق؛ 80% تعني حصة من عرض الصفحة

الشرح

لكل صندوق أربع طبقات من الداخل إلى الخارج: المحتوى والحشو والحدّ والهامش. الحشو (padding) هو المساحة داخل الصندوق بين المحتوى والحدّ. والهامش (margin) هو المساحة خارج الصندوق بينه وبين جيرانه. لا تخلط بينهما. وفي ملف التنسيق عندنا للحاوية width: 80% أي حصة من عرض الصفحة، وmargin: auto الذي يعطي مساحة متساوية على الجانبين فيجلس الصندوق في الوسط. ولكل قسم padding: 10px أي خطوة صغيرة جدًّا على الشاشة، فلا يلمس النص الحواف. وللعنوان الفرعي h2 خاصية border-bottom أي خط تحته. والخط السميك تحت العنوان الفرعي يساعد العين على إيجاد جزء جديد.

	A
1	margin: مساحة خارج الصندوق
2	border: الخط حوله
3	padding: مساحة داخلية حول المحتوى
4	content: الكلمات

أمثلة محلولة

Css

1.container {
2  width: 80%;
3  margin: auto;
4  background-color: lightcyan;
5}
6section {
7  padding: 10px;
8}
9h2 {
10  border-bottom: 3px solid darkblue;
11}

اقرأ الصورة. container: عرض 80% وهامش auto فيكون الصندوق بعرض 80% وفي الوسط. section: حشو 10px فتبقى الكلمات بعيدة قليلًا عن الحواف. h2: border-bottom 3px solid darkblue أي خط أزرق داكن تحت العنوان الفرعي.

الخاصية	أين المساحة
padding	داخل الصندوق
margin	خارج الصندوق

تقول طالبة «الحشو هو المساحة بين صندوقين». يصحّح لها معلّمها: تلك هي الهوامش. أما الحشو فهو المساحة داخل الصندوق بين المحتوى وحدّه. ورسم صغير لصندوق داخل صندوق يوضّح الفرق.

نشاط الفصل

ارسم صندوقًا داخل صندوق على الورق. وسمِّ المحتوى والحشو والحدّ والهامش. ثم اكتب أسطر CSS الثلاثة من قاعدة الحاوية، وقل بكلماتك ماذا يفعل كل منها.

تدرّب

في صندوق فراغ بين كلماته وحدّه. هل هو حشو أم هامش؟

بين حدّ الصندوق والصندوق المجاور فراغ. هل هو حشو أم هامش؟

ماذا يفعل margin: auto لصندوق له عرض؟

ماذا يفعل border-bottom لـ h2؟