تحديد عنصر معين داخل class: `اسم_العنصر.اسم_class`
مثال: `.footer p { color: #f5f5f5; }`
##### التحكم في تدفق المحتوى
###### خاصية تجاوز السعة (Overflow)
للتحكم في المحتوى الأكبر من مساحة الصفحة
قيمها: visible, hidden, scroll, auto
القيمة `auto`: يتم قص المحتوى الزائد وإضافة شريط تمرير عند الحاجة
#### التحكم في تخطيط العناصر
##### نموذج الصندوق (Box Model)
###### المفهوم
تتعامل CSS مع كل عنصر HTML كما لو كان له صندوق خاص
يسمح بالتحكم في الأبعاد والحدود والفراغ حول كل صندوق
###### خصائص نموذج الصندوق
####### الإطار (Border)
حدود تفصل حافة كل صندوق عن الآخر
قد تكون مرئية أو غير مرئية
####### الهامش (Margin)
المساحة خارج حدود الإطار
####### الفراغ (Padding)
المساحة بين الإطار والمحتوى الداخلي
###### التحكم في الفراغ (Padding)
يمكن تحديد قيم لكل جانب من جوانب الفراغ:
`padding-top`: الفراغ العلوي
`padding-right`: الفراغ في الجهة اليمنى
`padding-bottom`: الفراغ السفلي
`padding-left`: الفراغ في الجهة اليسرى
يمكن استخدام نفس الطريقة المختصرة لتحديد الهامش (Margin)
```
نقاط مهمة
يتكون نموذج الصندوق من ثلاث طبقات رئيسية (من الداخل إلى الخارج): المحتوى، ثم الفراغ (Padding)، ثم الإطار (Border)، ثم الهامش (Margin).
يمكن التحكم في الفراغ (Padding) لكل جانب من جوانب الصندوق على حدة باستخدام خصائص CSS المخصصة (مثل `padding-top`).
نفس طريقة التحديد المختصرة للفراغ (Padding) يمكن تطبيقها على خاصية الهامش (Margin).
📋 المحتوى المنظم
📖 محتوى تعليمي مفصّل
نوع: محتوى تعليمي
نموذج الصندوق
نوع: محتوى تعليمي
تتعامل CSS مع كل عنصر في HTML كما لو كان له ما يشبه صندوقه الخاص، مما يسمح لك بالتحكم في الأبعاد والحدود والفراغ حول كل صندوق على حدة.
نوع: محتوى تعليمي
خصائص نموذج الصندوق
الوصف
نوع: محتوى تعليمي
الوصف
الخاصية
نوع: محتوى تعليمي
الخاصية
لكل صندوق حدود سواء كان مرئيًا أم لا، بحيث يفصل هذا الإطار بين حافة كل صندوق عن الآخر.
نوع: محتوى تعليمي
لكل صندوق حدود سواء كان مرئيًا أم لا، بحيث يفصل هذا الإطار بين حافة كل صندوق عن الآخر.
الإطار (Border)
نوع: محتوى تعليمي
الإطار (Border)
تأتي الهوامش خارج حدود الإطار.
نوع: محتوى تعليمي
تأتي الهوامش خارج حدود الإطار.
الهامش (Margin)
نوع: محتوى تعليمي
الهامش (Margin)
الفراغ هو المسافة ما بين الإطار والمحتوى.
نوع: محتوى تعليمي
الفراغ هو المسافة ما بين الإطار والمحتوى.
الفراغ (Padding)
نوع: محتوى تعليمي
الفراغ (Padding)
نوع: محتوى تعليمي
الفراغ
نوع: محتوى تعليمي
يمكنك تحديد نفس القيم لخاصية الهامش (margin) أيضًا وبنفس الطريقة المختصرة.
نوع: محتوى تعليمي
يمكنك تحديد القيم الخاصة بكل جانب من الفراغ (Padding) المحيط بالصندوق:
الفراغ العلوي (padding-top)
نوع: محتوى تعليمي
الفراغ العلوي (padding-top)
الفراغ في الجهة اليمنى (padding-right)
نوع: محتوى تعليمي
الفراغ في الجهة اليمنى (padding-right)
الفراغ السفلي (padding-bottom)
نوع: محتوى تعليمي
الفراغ السفلي (padding-bottom)
الفراغ في الجهة اليسرى (padding-left)
نوع: محتوى تعليمي
الفراغ في الجهة اليسرى (padding-left)
نوع: NON_EDUCATIONAL
وزارة التعليم
Ministry of Education
241
2025 - 1447
🔍 عناصر مرئية
A simple box containing the word 'النص' with no visible borders or padding, representing content.
A box containing the word 'النص' with a yellow border. Dashed lines extend outwards from the border, indicating the margin space.
A box containing the word 'النص' with a yellow border. There is visible space between the border and the text 'النص', representing padding. Dashed lines extend outwards from the border, indicating margin space.
📄 النص الكامل للصفحة
نموذج الصندوق
تتعامل CSS مع كل عنصر في HTML كما لو كان له ما يشبه صندوقه الخاص، مما يسمح لك بالتحكم في الأبعاد والحدود والفراغ حول كل صندوق على حدة.
خصائص نموذج الصندوق
--- SECTION: الوصف ---
الوصف
--- SECTION: الخاصية ---
الخاصية
--- SECTION: لكل صندوق حدود سواء كان مرئيًا أم لا، بحيث يفصل هذا الإطار بين حافة كل صندوق عن الآخر. ---
لكل صندوق حدود سواء كان مرئيًا أم لا، بحيث يفصل هذا الإطار بين حافة كل صندوق عن الآخر.
--- SECTION: الإطار (Border) ---
الإطار (Border)
--- SECTION: تأتي الهوامش خارج حدود الإطار. ---
تأتي الهوامش خارج حدود الإطار.
--- SECTION: الهامش (Margin) ---
الهامش (Margin)
--- SECTION: الفراغ هو المسافة ما بين الإطار والمحتوى. ---
الفراغ هو المسافة ما بين الإطار والمحتوى.
--- SECTION: الفراغ (Padding) ---
الفراغ (Padding)
الفراغ
يمكنك تحديد نفس القيم لخاصية الهامش (margin) أيضًا وبنفس الطريقة المختصرة.
يمكنك تحديد القيم الخاصة بكل جانب من الفراغ (Padding) المحيط بالصندوق:
--- SECTION: الفراغ العلوي (padding-top) ---
الفراغ العلوي (padding-top)
--- SECTION: الفراغ في الجهة اليمنى (padding-right) ---
الفراغ في الجهة اليمنى (padding-right)
--- SECTION: الفراغ السفلي (padding-bottom) ---
الفراغ السفلي (padding-bottom)
--- SECTION: الفراغ في الجهة اليسرى (padding-left) ---
الفراغ في الجهة اليسرى (padding-left)
وزارة التعليم
Ministry of Education
241
2025 - 1447
--- VISUAL CONTEXT ---
**DIAGRAM**: Untitled
Description: A simple box containing the word 'النص' with no visible borders or padding, representing content.
Context: Illustrates the basic content area of the box model.
**DIAGRAM**: Untitled
Description: A box containing the word 'النص' with a yellow border. Dashed lines extend outwards from the border, indicating the margin space.
Context: Illustrates the border and margin properties of the box model, showing space outside the border.
**DIAGRAM**: Untitled
Description: A box containing the word 'النص' with a yellow border. There is visible space between the border and the text 'النص', representing padding. Dashed lines extend outwards from the border, indicating margin space.
Context: Illustrates padding (space between content and border) and margin (space outside the border).
🎴 بطاقات تعليمية للمراجعة
عدد البطاقات: 5 بطاقة لهذه الصفحة
ما هو المفهوم الذي تتعامل معه CSS لكل عنصر في HTML كما لو كان له صندوق خاص يسمح بالتحكم في الأبعاد والحدود والفراغ؟
أ) نظام التخطيط (Layout System)
ب) نموذج الصندوق (Box Model)
ج) نموذج العنصر (Element Model)
د) نظام التباعد (Spacing System)
الإجابة الصحيحة: b
الإجابة: نموذج الصندوق (Box Model)
الشرح: 1. CSS تعامل كل عنصر HTML كصندوق مستقل. 2. هذا النموذج يسمح بالتحكم في أبعاد العنصر وحدوده والمسافات حوله وداخله. 3. المكونات الأساسية للنموذج هي: المحتوى، الفراغ (Padding)، الإطار (Border)، والهامش (Margin).
تلميح: هو نموذج أساسي في CSS يحدد كيفية ترتيب العناصر وتباعدها.
التصنيف: تعريف | المستوى: سهل
في نموذج صندوق CSS، ما هو الجزء الذي يمثل المسافة بين محتوى العنصر وإطاره؟
أ) الهامش (Margin)
ب) الإطار (Border)
ج) الفراغ (Padding)
د) المحتوى (Content)
الإجابة الصحيحة: c
الإجابة: الفراغ (Padding)
الشرح: 1. نموذج الصندوق يتكون من عدة طبقات تحيط بالمحتوى. 2. الفراغ (Padding) هو المساحة الداخلية الفاصلة بين محتوى العنصر (مثل النص) وبين حدوده (Border). 3. يمكن التحكم في الفراغ لكل جانب من جوانب الصندوق (علوي، سفلي، يمين، يسار).
تلميح: هذه المسافة تكون داخل حدود العنصر، وتحيط بالمحتوى.
التصنيف: مفهوم جوهري | المستوى: متوسط
أي مما يلي يصف بشكل صحيح دور الإطار (Border) في نموذج صندوق CSS؟
أ) يحدد المساحة الخارجية المحيطة بالصندوق.
ب) يفصل بين حافة كل صندوق عن الآخر، سواء كان مرئيًا أم لا.
ج) يحدد المساحة الداخلية بين المحتوى والإطار.
د) يحدد حجم ومساحة المحتوى الأساسي للعنصر.
الإجابة الصحيحة: b
الإجابة: يفصل بين حافة كل صندوق عن الآخر، سواء كان مرئيًا أم لا.
الشرح: 1. الإطار (Border) هو الحد الفاصل الذي يحيط بالفراغ (Padding) والمحتوى. 2. وظيفته الأساسية هي فصل حافة الصندوق عن العناصر الأخرى. 3. يمكن أن يكون الإطار مرئيًا (بلون وسُمك) أو غير مرئي (شفاف)، لكنه موجود كجزء من النموذج.
تلميح: الإطار هو الخط أو الحافة التي تحدد شكل الصندوق، ووجوده ليس شرطًا أن يكون مرئيًا.
التصنيف: مفهوم جوهري | المستوى: متوسط
في نموذج صندوق CSS، ما هو الجزء الذي يقع خارج حدود الإطار (Border) ويخلق مسافة بين الصندوق والعناصر المحيطة به؟
أ) الفراغ (Padding)
ب) المحتوى (Content)
ج) الهامش (Margin)
د) الإطار الداخلي (Inner Border)
الإجابة الصحيحة: c
الإجابة: الهامش (Margin)
الشرح: 1. نموذج الصندوق له طبقات تبدأ من الداخل (المحتوى) إلى الخارج. 2. بعد الإطار (Border) تأتي طبقة الهامش (Margin). 3. الهامش هو المساحة الخارجية التي تفصل الصندوق عن العناصر الأخرى في الصفحة، مما يؤثر على التباعد والتخطيط العام.
تلميح: هذه المسافة تكون خارج العنصر بالكامل، وتؤثر على موقعه بالنسبة للعناصر الأخرى.
التصنيف: مفهوم جوهري | المستوى: متوسط
إذا أردت التحكم في المسافة بين محتوى الصندوق وحافته العلوية فقط في CSS، أي خاصية يجب استخدامها؟
أ) margin-top
ب) border-top
ج) الفراغ العلوي (padding-top)
د) spacing-top
الإجابة الصحيحة: c
الإجابة: الفراغ العلوي (padding-top)
الشرح: 1. خاصية الفراغ (Padding) يمكن تطبيقها على جميع الجوانب مرة واحدة أو على كل جانب على حدة. 2. للتحكم في جانب محدد، نستخدم الخصائص الفرعية مثل padding-top للجانب العلوي. 3. هذه الطريقة تمنح تحكمًا دقيقًا في تصميم كل جانب من جوانب الصندوق.
تلميح: هذه الخاصية تتحكم في الفراغ (Padding) المخصص للجانب العلوي فقط.