الفصل الرابع التنسيق العام (Layout Styling) في CSS

إليك كورس كامل عن التنسيق العام (Layout Styling) في CSS:

1. مقدمة عن التنسيق العام

• التنسيق العام في CSS يتعامل مع تنظيم وتوزيع العناصر على الصفحة باستخدام أساليب مثل: التخطيط باستخدام الصناديق (box model)، التخطيط باستخدام الشبكات (grid system)، التخطيط باستخدام المرونة (flexbox)، وغير ذلك.

2. نموذج الصندوق (Box Model)

• نموذج الصندوق هو الأساس لفهم التنسيقات في CSS. يتكون كل عنصر HTML من أربعة أجزاء رئيسية:
  • المحتوى (Content): حيث يتم عرض النص أو الصور.
  • الحشوة (Padding): المسافة بين المحتوى وحدود العنصر.
  • الحدود (Border): محيط العنصر.
  • الهامش (Margin): المسافة بين العنصر والعناصر المحيطة به.

أ. الحسابات في نموذج الصندوق

• عرض العنصر (Width) و ارتفاعه (Height) يشملان فقط المحتوى.
• يمكن إضافة الحشوة (Padding) و الحدود (Borders) خارج هذا المحتوى.
• مثال:
  css

  Copy code

  div {
width: 300px;
height: 200px;
padding: 20px;
border: 5px solid black;
margin: 30px;
}


3. **التخطيط باستخدام Flexbox

• Flexbox هو نموذج مرن لتخطيط العناصر، يتيح لك ترتيب وتوزيع العناصر بشكل ديناميكي.
• المبدأ الأساسي: يتحكم في ترتيب وحجم العناصر داخل الحاوية باستخدام خصائص مرنة.

أ. إعداد الحاوية (Flex Container)

• قم بتحديد حاوية مرنة باستخدام display: flex;.
• مثال:
  css

  Copy code

  .container {
display: flex;
}


ب. محاذاة العناصر داخل الحاوية

• يمكنك التحكم في توزيع العناصر داخل الحاوية باستخدام خصائص مثل justify-content و align-items و align-self.
  • محاذاة العناصر أفقيًا باستخدام justify-content:
    • القيم: flex-start, flex-end, center, space-between, space-around.
    • مثال:
      css

      Copy code

      .container {
display: flex;
justify-content: space-between;
}

  • محاذاة العناصر عموديًا باستخدام align-items:
    • القيم: flex-start, flex-end, center, stretch, baseline.
    • مثال:
      css

      Copy code

      .container {
display: flex;
align-items: center;
}


ج. الترتيب باستخدام order

• يمكنك تغيير ترتيب العناصر باستخدام خاصية order.
• مثال:
  css

  Copy code

  .container {
display: flex;
}
.item {
order: 2;
}
.item2 {
order: 1;
}


د. حجم العناصر باستخدام flex-grow, flex-shrink, flex-basis

• flex-grow: يحدد قدرة العنصر على التوسع داخل الحاوية.
• flex-shrink: يحدد قدرة العنصر على التقلص داخل الحاوية.
• flex-basis: يحدد الحجم الأساسي للعنصر قبل أي توسع أو تقليص.
• مثال:
  css

  Copy code

  .item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
}


4. **التخطيط باستخدام CSS Grid

• CSS Grid هو نظام شبكي يمكن من خلاله تقسيم الصفحة إلى صفوف وأعمدة.

أ. إعداد الحاوية (Grid Container)

• قم بتحديد حاوية شبكية باستخدام display: grid;.
• مثال:
  css

  Copy code

  .container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* ثلاث أعمدة متساوية */
}


ب. تعريف الصفوف والأعمدة (Grid Lines)

• يمكنك تحديد عدد الأعمدة والصفوف باستخدام grid-template-columns و grid-template-rows.
• مثال:
  css

  Copy code

  .container {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 150px 100px;
}


ج. تحديد العنصر داخل الشبكة (Grid Item)

• لتحديد مكان العنصر داخل الشبكة، استخدم grid-column و grid-row.
• مثال:
  css

  Copy code

  .item {
grid-column: 1 / 3; /* العنصر سيبدأ من العمود الأول ويصل إلى العمود الثالث */
grid-row: 1 / 2; /* العنصر سيبدأ من الصف الأول */
}


5. **التخطيط باستخدام Positioning

• Positioning في CSS يسمح لك بتحديد موضع العنصر بشكل دقيق داخل الصفحة باستخدام خصائص مثل static, relative, absolute, و fixed.

أ. الخاصية position: static

• القيمة الافتراضية لجميع العناصر.
• مثال:
  css

  Copy code

  div {
position: static; /* لا يتم تغيير موضع العنصر */
}


ب. الخاصية position: relative

• يمكن تحريك العنصر بشكل نسبي بناءً على موقعه الافتراضي.
• مثال:
  css

  Copy code

  div {
position: relative;
top: 20px;
left: 50px;
}


ج. الخاصية position: absolute

• العنصر يتم وضعه بشكل مطلق داخل أقرب عنصر نسبي.
• مثال:
  css

  Copy code

  div {
position: absolute;
top: 50px;
left: 100px;
}


د. الخاصية position: fixed

• العنصر يظل ثابتًا في مكانه حتى عند التمرير.
• مثال:
  css

  Copy code

  div {
position: fixed;
top: 0;
right: 0;
}


6. **التخطيط باستخدام **Float and Clear

• Float كان يستخدم بشكل شائع لترتيب العناصر في الأعمدة، لكنه لا يُستخدم بكثرة الآن لصالح Flexbox و Grid.
• مثال:
  css

  Copy code

  .left {
  float: left;
  }

  .right {
float: right;
}


• Clear يستخدم لإزالة التأثيرات الناتجة عن float.
• مثال:
  css

  Copy code

  .clearfix::after {
content: "";
clear: both;
display: block;
}


7. **التخطيط باستخدام **Viewport and Media Queries

• Media Queries تُستخدم لتغيير التخطيط بناءً على خصائص جهاز العرض مثل العرض والارتفاع.

أ. استخدام Media Queries

• مثال:
  css

  Copy code

  @media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}


8. أفضل الممارسات لتنسيق الصفحة

• استخدم Flexbox أو Grid: لتحقيق تخطيط مرن.
• تجنب استخدام float إلا إذا كان ضروريًا.
• اجعل الصفحة متجاوبة باستخدام Media Queries لضمان التوافق مع جميع الأجهزة.

9. مشروع تطبيقي: تصميم صفحة باستخدام Flexbox و Grid

• قم بإنشاء صفحة تحتوي على رأس (Header)، محتوى رئيسي (Main Content)، شريط جانبي (Sidebar)، و تذييل (Footer) باستخدام Flexbox و Grid.

10. ملخص الدرس

• تعلمنا كيفية تنسيق العناصر باستخدام Flexbox، Grid، و Positioning.
• فهمنا كيفية العمل مع نموذج الصندوق (Box Model) لتحديد المسافات والأبعاد.
• تعرفنا على كيفية استخدام Media Queries لإنشاء تصميمات متجاوبة.