`

• حاوية لعناصر HTML
• لتطبيق أنماط CSS على المجموعة

###### خاصية `class`

• لتطبيق نفس التنسيق على عناصر متعددة

#### تخطيط العناصر

##### مثال تطبيقي: صفحة مشجعي كرة القدم

###### Menu

• يحتوي على قائمة روابط التنقل (الصفحة الرئيسية، التاريخ، المعرض، نبذة، اتصل بنا)
• لون الخلفية: `#426C35`

###### Main

• يحتوي على المحتوى الرئيسي
• لون الخلفية: `#f5f5f5`

####### ألبوم الصور

• مكان لتبادل الأفكار والآراء
• يمكن إضافة صور أو مقالات عبر نموذج
• صور مرتبطة بكرة القدم (كأس العالم، الملعب، الاستاد، شعار السعودية)

####### معلومات مفيدة

• طرق التواصل: البريد الإلكتروني (info@example.com)
• مواقع زيارة: Fifa.com، UEFA.com

###### Photos (اليوم الصور)

• قسم لعرض مجموعة واسعة من الصور
• صور المباريات واللاعبين والفرق والبطولات
• يهدف لتوفير تجربة بصرية غنية
• لون الخلفية: `#F0EDE4`

###### Footer (نبذة)

• قسم يحتوي على معلومات مفيدة
• يلخص أهداف الصفحة
• لون الخلفية: `#777777`

#### تطبيق الأنماط باستخدام CSS

##### إنشاء ملف CSS

• يُنشأ ملف باسم `style.css` في مجلد الصفحات (مثال: في محرر Visual Studio Code)

##### ربط CSS بـ HTML

• استخدام وسم `` داخل قسم `` في ملف HTML
• مثال: ``

##### تعيين الخطوط الأساسية

• الخطوة الأساسية: تعيين خط عام للنصوص غير المصممة
• مثال: `font-family: 'Tahoma', 'Open Sans', sans-serif;`

##### خصائص CSS للخلفية

###### background-color

• لتعيين لون خلفية العناصر

###### background-image

• لتعيين صورة خلفية للعناصر

###### background-repeat

• لتحديد كيفية تكرار صورة الخلفية

###### background-position

• لتحديد موضع صورة الخلفية

##### محددات CSS

###### محدد class

• الصيغة العامة: `.اسم_class`
• مثال: `.menu { background-color: #426C35; }`
• تحديد عنصر معين داخل 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)

###### تطبيق عملي للتنسيق

####### محاذاة النص (text-align)

• تُستخدم لتوسيط النص داخل العنصر.

####### تطبيق الخصائص على الأقسام

• `.main`

- `overflow: auto;`

- `text-align: center;`

- `background-color: #f5f5f5;`

- `padding-top: 20px;`

- `padding-bottom: 20px;`

• `.photos`

- `overflow: auto;`

- `padding-top: 20px;`

- `padding-bottom: 40px;`

- `text-align: center;`

- `background-color: #F0EDE4;`

• `.footer`

- `overflow: auto;`

- `padding-top: 20px;`

- `padding-bottom: 20px;`

- `text-align: center;`

- `background-color: #777777;`

###### ملاحظة مهمة

• يجب الابتعاد عن استخدام الأرقام الكبيرة عند تغيير خصائص نموذج الصندوق، حيث إنها من الممكن أن تتسبب في تشويه مظهر الصفحات الإلكترونية.

#### محتوى صفحة مشجعي كرة القدم

##### الهدف

• تشجيع اللاعبين أثناء المباراة.

##### التاريخ

• بدأت في إنجلترا منتصف القرن التاسع عشر.
• الرياضة الأكثر شعبية في العالم.
• يتابعها أكثر من 250 مليون شخص في أكثر من 200 دولة.
• ظاهرة عالمية تجمع الناس من مختلف الثقافات.

##### نبذة عن الصفحة

• مكان لاكتشاف كل ما يتعلق بكرة القدم.
• التواصل مع محبي كرة القدم الآخرين عبر الصور أو التعليقات.

##### معلومات مفيدة

• البريد الإلكتروني: info@resample.com
• مواقع زيارة: Fifa.com، UEFA.com

##### العناصر المرئية

###### Figure 1: Saudi National Team

• تمثل جانب المنتخب الوطني في كرة القدم.

###### Figure 2: FIFA World Cup Trophy

• تمثل الجائزة الكبرى في كرة القدم الدولية.

###### Figure 3: Football Stadium

• توضح مكان إقامة المباريات.

#### التحكم في حجم ومحاذاة الصور

##### استخدام قواعد CSS

• لتحديد حجم ومحاذاة الصور.
• لجعل الصور أكثر جاذبية باستخدام خصائص أخرى.

##### تطبيق قواعد CSS على الصور

• داخل قسم `.photos` باستخدام محدد `.photos img`.

##### خصائص CSS المستخدمة للصور

###### الإطار (Border)

• `border-style: solid;`
• `border-width: 2px;`
• `border-color: #426C35;`

###### نصف قطر الإطار (border-radius)

• `border-radius: 6px;`
• لتغيير مظهر حواف الصورة.

###### الهامش (Margin)

• `margin: 2px;`

###### ملاءمة الكائن (object-fit)

• `object-fit: cover;`

###### موضع الكائن (object-position)

• `object-position: top;`

##### المعرض (Photos)

• قسم لعرض الصور بعد تطبيق أنماط CSS عليه.

#### تنسيق شريط التصفح

##### تنسيق قائمة التنقل الرئيسية (`.menu ul`)

• `text-align: center;`
• `padding-top: 20px;`
• `padding-bottom: 20px;`
• `text-decoration: none;`

##### تنسيق عناصر القائمة (`.menu li`)

• `display: inline-block;`
• `text-align: center;`

##### تنسيق روابط القائمة (`.menu li a`)

• `display: inline-block;`
• `height: auto;`
• `width: 150px;`
• `color: #333333;`
• `background-color: #f5f5f5;`
• `padding: 10px;`
• `margin: 4px;`
• `text-align: center;`
• `font-size: 18px;`
• `font-weight: bold;`
• `text-decoration: none;`
• `border-radius: 4px;`

##### تأثير التمرير (`.menu li a:hover`)

• `background-color: #d6d599;`

#### عرض النتيجة النهائية في المتصفح

##### شكل الصفحة في المتصفح

• تظهر الصفحة في المتصفح مع شريط تصفح (Navigation Bar) بعد تطبيق التنسيقات عليه.

##### تفاعل واجهة المستخدم

• يتغير لون زر شريط التصفح عند تمرير الفأرة عليه (Hover Effect).

#### تنسيق قسم التذييل (Footer)

##### تنسيق قائمة التذييل (`.footer ul`)

• `text-align: center;`
• `padding-top: 10px;`
• `padding-bottom: 10px;`
• `text-decoration: none;`

##### تنسيق عناصر قائمة التذييل (`.footer li`)

• `display: inline-block;`
• `text-align: center;`

##### تنسيق روابط قائمة التذييل (`.footer li a`)

• `display: inline-block;`
• `height: auto;`
• `width: auto;`
• `color: #333333;`
• `background-color: #f5f5f5;`
• `padding: 10px;`
• `margin: 4px;`
• `text-align: center;`
• `font-size: 16px;`
• `font-weight: bold;`
• `text-decoration: none;`

##### تأثير التمرير على روابط التذييل (`.footer li a:hover`)

• `background-color: #d6d599;`

##### عرض النتيجة النهائية

• ستظهر الصفحة على المتصفح بالشكل التالي بعد تنسيق التذييل.

##### محتوى قسم التذييل (نبذة)

• من خلال هذه الصفحة يمكننا تبادل الأفكار والأراء.
• من خلال فريق كرة القدم الذي يسمح له بـ جـول كرة القدم بـشـكل عـام فـي وقـت حـالـي.
• يمكننا أيضاً التواصل من خلال الصور أو المقالات إلى المعرض.

##### معلومات مفيدة في التذييل

• UEFA.com
• Fifa.com
• info@example.com

#### إصلاح عناوين الأقسام

##### تنسيق عنوان h1

• `color: #426C35;`
• `font-weight: bold;`
• `font-size: 36px;`

##### تنسيق عنوان h2 داخل قسم .main

• `overflow: auto;`
• `margin-top: 40px;`
• `margin-left: auto;`
• `margin-right: auto;`
• `width: 200px;`
• `padding: 10px;`
• `background-color: #d6d599;`
• `color: #426C35;`
• `font-weight: bold;`
• `text-align: center;`
• `border-radius: 30px;`

##### تنسيق عنوان h2 داخل قسم .photos

• `color: #426C35;`
• `font-size: 28px;`

##### تنسيق عنوان h2 داخل قسم .footer

• `color: #d6d599;`

##### تنسيق الفقرات داخل قسم .footer

• `.footer p { color: #f5f5f5; }`

```

نقاط مهمة

• يمكن تخصيص تنسيق كل عنوان (`

  `, `

  `) بشكل مختلف بناءً على القسم الذي يوجد فيه.

• يتم استخدام محددات CSS مثل `.main h2` لتطبيق الأنماط على عناوين `

  ` داخل العناصر ذات الفئة `main`.

• تشمل خصائص التنسيق الشائعة للعناوين: اللون (`color`)، حجم الخط (`font-size`)، سمك الخط (`font-weight`)، محاذاة النص (`text-align`)، ولون الخلفية (`background-color`).
• يمكن استخدام خصائص نموذج الصندوق مثل `margin` و `padding` و `border-radius` لتحسين التباعد والمظهر المرئي للعناوين.