محدد Class - كتاب التقنية الرقمية - الصف 11 - الفصل 1 - المملكة العربية السعودية

📚 محدد Class وخصائص نموذج الصندوق

المفاهيم الأساسية

محدد Class (.): لتنسيق العناصر في class معين في CSS، نستخدم النقطة (.) قبل اسم class.

نموذج الصندوق (Box-Model): نموذج يصف العناصر الهيكلية للصندوق في CSS.

خريطة المفاهيم

```markmap

تصميم الموقع الإلكتروني

أنواع CSS

صفحات الأنماط المضمنة (Inline style)

صفحات الأنماط الداخلية (Internal style sheets)

صفحات الأنماط الخارجية (External style sheets)

تنظيم HTML

استخدام وسم

ودالة class

محددات CSS

محدد Class (.)

#### استخدام النقطة (.) قبل اسم class

#### مثال: تنسيق قسم menu class

خصائص نموذج الصندوق (Box-Model)

الإطار (Border)

#### حدود تفصل بين حافة كل صندوق عن الآخر

الهامش (Margin)

#### المساحة خارج حدود الإطار

الفراغ (Padding)

#### المسافة ما بين الإطار والمحتوى

```

نقاط مهمة

• لتنسيق عناصر class معين في CSS، نكتب النقطة (.) متبوعة باسم class.
• يتم تنظيم مقطع HTML باستخدام وسم `
  ` وخاصية `class`.
• كل صندوق في نموذج الصندوق له ثلاث خصائص رئيسية: الإطار (Border)، الهامش (Margin)، والفراغ (Padding).

لتنسيق العناصر في class معين تحتاج إلى استخدام النقطة (.) قبل اسم class. على سبيل المثال سيغير المقطع البرمجي التالي لون الخلفية فقط في قسم menu class.

تعلمت أيضا كيف تنظم مقطع HTML البرمجي الخاص بك باستخدام وسم <div> ودالة class.

لكل صندوق حدود سواء كان مرتبًا أم لا، بحيث يفصل هذا الإطار بين حافة كل صندوق عن الآخر.

تأتي الهوامش خارج حدود الإطار.

الفراغ هو المسافة ما بين الإطار والمحتوى.

وزارة التعليم

2025 - 1447

--- SECTION: محدد Class --- لتنسيق العناصر في class معين تحتاج إلى استخدام النقطة (.) قبل اسم class. على سبيل المثال سيغير المقطع البرمجي التالي لون الخلفية فقط في قسم menu class. تعلمت أيضا كيف تنظم مقطع HTML البرمجي الخاص بك باستخدام وسم <div> ودالة class. --- SECTION: خصائص نموذج الصندوق (Box-Model) --- --- SECTION: مثال --- لكل صندوق حدود سواء كان مرتبًا أم لا، بحيث يفصل هذا الإطار بين حافة كل صندوق عن الآخر. --- SECTION: مثال --- تأتي الهوامش خارج حدود الإطار. --- SECTION: مثال --- الفراغ هو المسافة ما بين الإطار والمحتوى. وزارة التعليم 2025 - 1447 --- VISUAL CONTEXT --- **DIAGRAM**: مثال Description: A simple rectangular box labeled 'النص' representing content. Table Structure: Headers: الخاصية | الوصف | مثال Rows: Row 1: الإطار (Border) | لكل صندوق حدود سواء كان مرتبًا أم لا، بحيث يفصل هذا الإطار بين حافة كل صندوق عن الآخر. | النص Context: Illustrates the concept of a border in the box model. **DIAGRAM**: مثال Description: A box labeled 'النص' with arrows indicating space outside the box, representing margin. Table Structure: Headers: الخاصية | الوصف | مثال Rows: Row 1: الهامش (Margin) | تأتي الهوامش خارج حدود الإطار. | النص Context: Illustrates the concept of margin in the box model. **DIAGRAM**: مثال Description: A box labeled 'النص' with arrows indicating space between the border and the content, representing padding. Table Structure: Headers: الخاصية | الوصف | مثال Rows: Row 1: الفراغ (Padding) | الفراغ هو المسافة ما بين الإطار والمحتوى. | النص Context: Illustrates the concept of padding in the box model.