الفصل الثاني الأساسيات في CSS

إليك كورس كامل عن الأساسيات في CSS:

1. المحددات (Selectors) في CSS

المحددات هي الطريقة التي نستخدمها لتحديد العناصر التي نريد تنسيقها. هناك عدة أنواع من المحددات التي نستخدمها بناءً على العنصر أو الفئة أو المعرف.

أ. محدد العنصر (Element Selector)

• يتم تطبيقه على جميع العناصر من نفس النوع في صفحة HTML.
• مثال:
  css

  Copy code

  p {
color: blue;
}


  في هذا المثال، سيتم تغيير لون جميع الفقرات (<p>) إلى الأزرق.

ب. محدد الفئة (Class Selector)

• يستخدم لتنسيق العناصر التي تحتوي على نفس القيمة في السمة class.
• يتم تحديده باستخدام النقطة . قبل اسم الفئة.
• مثال:
  css

  Copy code

  .highlight {
background-color: yellow;
}


  ثم يمكن تطبيقه على العناصر باستخدام class="highlight":

  html

  Copy code

  <p class="highlight">هذا نص مميز</p>


ج. محدد المعرف (ID Selector)

• يستخدم لتنسيق عنصر معين باستخدام القيمة الفريدة في السمة id.
• يتم تحديده باستخدام علامة # قبل اسم المعرف.
• مثال:
  css

  Copy code

  #header {
font-size: 24px;
}


  ثم يمكن تطبيقه على العنصر باستخدام id="header":

  html

  Copy code

  <h1 id="header">عنوان الصفحة</h1>


د. المحددات المشتركة (Combinators)

• المحددات المركبة هي الطريقة التي يمكن من خلالها تطبيق الأنماط على عناصر بناءً على علاقتها بعناصر أخرى.
  • النسل (Descendant): تطبيق التنسيق على العناصر الموجودة داخل عناصر أخرى.
    • مثال:
      css

      Copy code

      div p {
color: red;
}


      في هذا المثال، سيتم تغيير لون جميع الفقرات داخل أي عنصر <div> إلى اللون الأحمر.

  • الأخ (Adjacent): تطبيق التنسيق على العنصر الذي يلي عنصر آخر مباشرة.
    • مثال:
      css

      Copy code

      h1 + p {
font-size: 18px;
}


      في هذا المثال، سيتم تطبيق التنسيق على الفقرة التي تلي <h1> مباشرة.

2. الخصائص والقيم (Properties and Values)

• الخصائص (Properties) هي السمات التي تتحكم في تنسيق العنصر (مثل اللون، الحجم، المحاذاة، إلخ).
• القيم (Values) هي القيم التي تُعطى لتلك الخصائص.

أ. الخصائص الأساسية

• اللون (Color):
  • تحديد لون النص.
  • مثال:
    css

    Copy code

    p {
color: blue;
}

• حجم الخط (Font-size):
  • تحديد حجم النص.
  • مثال:
    css

    Copy code

    h1 {
font-size: 32px;
}

• نوع الخط (Font-family):
  • تحديد نوع الخط المستخدم.
  • مثال:
    css

    Copy code

    body {
font-family: Arial, sans-serif;
}


ب. الهوامش والحشوات

• الهوامش (Margin):
  • المسافة بين العنصر وحدود العنصر المجاور.
  • مثال:
    css

    Copy code

    p {
margin: 20px;
}

• الحشوة (Padding):
  • المسافة بين المحتوى وحدود العنصر.
  • مثال:
    css

    Copy code

    div {
padding: 10px;
}


3. المسافات بين العناصر (Spacing Between Elements)

أ. الهوامش الخارجية (Margin)

• تحديد المسافة بين العنصر وعناصر أخرى.
• مثال:
  css

  Copy code

  .box {
margin-top: 10px;
margin-bottom: 20px;
}


ب. الحشوات (Padding)

• المسافة بين محتوى العنصر وحدوده.
• مثال:
  css

  Copy code

  .container {
padding-left: 15px;
padding-right: 15px;
}


4. الأبعاد (Dimensions)

أ. الطول والعرض (Width and Height)

• تحديد أبعاد العنصر.
• مثال:
  css

  Copy code

  div {
width: 100px;
height: 150px;
}


ب. استخدام النسب المئوية (Percentage)

• تحديد أبعاد العنصر كنسبة مئوية من العنصر الأب.
• مثال:
  css

  Copy code

  div {
width: 50%;
}


5. خلفيات (Backgrounds)

أ. تحديد لون الخلفية

• مثال:
  css

  Copy code

  body {
background-color: lightblue;
}


ب. استخدام الصور كخلفية

• مثال:
  css

  Copy code

  div {
background-image: url('image.jpg');
}


ج. تكرار الخلفية (Background-repeat)

• تحديد ما إذا كان يجب تكرار الصورة في الخلفية.
• مثال:
  css

  Copy code

  div {
background-repeat: no-repeat;
}


6. الحدود (Borders)

أ. إضافة حدود للعناصر

• مثال:
  css

  Copy code

  div {
border: 2px solid black;
}


ب. الحدود المدورة (Border-radius)

• استخدام الحدود المدورة لإعطاء الشكل المستدير للعناصر.
• مثال:
  css

  Copy code

  .box {
border-radius: 10px;
}


7. التنسيق النصي (Text Styling)

أ. الخط العريض (Font-weight)

• تحديد وزن الخط.
• مثال:
  css

  Copy code

  h2 {
font-weight: bold;
}


ب. الميلان (Font-style)

• تحديد نمط الخط (عادي أو مائل).
• مثال:
  css

  Copy code

  p {
font-style: italic;
}


ج. التباعد بين الحروف (Letter-spacing)

• تغيير المسافة بين الأحرف.
• مثال:
  css

  Copy code

  h1 {
letter-spacing: 2px;
}


8. الاستجابة للأجهزة (Responsive Design)

أ. التصميم المتجاوب باستخدام الميديا كويريز (Media Queries)

• استخدام الميديا كويريز لتغيير تصميم الصفحة بناءً على حجم الشاشة.
• مثال:
  css

  Copy code

  @media (max-width: 600px) {
body {
background-color: lightgreen;
}
}


9. أفضل الممارسات

• استخدم التعليقات: لتعريف الشيفرة.
• تنظيم الشيفرة: ترتيب الأنماط حسب الفئات أو العناصر.
• تجنب كتابة الشيفرة المكررة: استخدام الفئات المتكررة لتقليل التكرار.

10. مشروع تطبيقي

• إنشاء صفحة تحتوي على نصوص، صور، وأزرار.
• تطبيق الخصائص التي تعلمتها (مثل الأبعاد، الهوامش، الحشوات، الحدود، والخلفيات).

ملخص الدرس:

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

هل ترغب في المزيد من التفاصيل حول أي جزء من هذا الكورس؟