الفصل الاول 1. ما هو CSS؟

ahmed nabelByahmed nabel كورس CSS
  • تعريف CSS:
    • CSS (Cascading Style Sheets) هي لغة تنسيق تُستخدم لتحسين مظهر صفحات الويب. يمكن من خلالها تحديد الألوان، الخطوط، الهوامش، الحشوات، والأبعاد، وغيرها من الخصائص التي تُحسن واجهة المستخدم وتجعل الصفحات أكثر جاذبية.
    • الفرق بين HTML و CSS: HTML يستخدم لإنشاء هيكل الصفحة بينما CSS يُستخدم لتنسيق وتجميل هذا الهيكل.
  • أهمية CSS:
    • تساعد CSS في فصل المحتوى (الموجود في HTML) عن التصميم (الموجود في CSS)، مما يسهل تعديل التصميم دون التأثير على المحتوى.
    • يمكن استخدامها لجعل الموقع متجاوبًا مع جميع الأجهزة (Responsive Design).

2. كيفية إضافة CSS إلى HTML

هناك ثلاث طرق لإضافة CSS إلى صفحة HTML:

أ. الأسلوب الداخلي (Internal CSS)

  • يتم إدراج CSS داخل صفحة HTML نفسها، وذلك باستخدام الوسم <style> داخل وسم <head>.
  • مثال:
    html
    <html>
    <head>
    <style>
    body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
    }
    </style>
    </head>
    <body>
    <h1>مرحبًا بالعالم!</h1>
    </body>
    </html>

ب. الأسلوب الخارجي (External CSS)

  • يتم تعريف CSS في ملف منفصل ذو امتداد .css ويتم ربطه بالصفحة HTML باستخدام وسم <link> داخل وسم <head>.
  • مثال:
    • ملف CSS (style.css):
      css
      body {
      background-color: lightblue;
      font-family: Arial, sans-serif;
      }
    • ملف HTML:
      html
      <html>
      <head>
      <link rel="stylesheet" type="text/css" href="style.css">
      </head>
      <body>
      <h1>مرحبًا بالعالم!</h1>
      </body>
      </html>

ج. الأسلوب المدمج (Inline CSS)

  • يتم تطبيق CSS مباشرةً على العنصر داخل وسم HTML باستخدام السمة style.
  • مثال:
    html
    <html>
    <body>
    <h1 style="color: red; text-align: center;">مرحبًا بالعالم!</h1>
    </body>
    </html>

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

المحددات هي الطريقة التي نختار بها العناصر التي نريد تنسيقها. إليك بعض الأنواع الأساسية للمحددات:

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

  • يتم تطبيقه على جميع العناصر من نفس النوع.
  • مثال:
    css
    p {
    color: blue;
    }

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

  • يُستخدم لتطبيق الأنماط على العناصر التي تحتوي على نفس القيمة في السمة class.
  • مثال:
    css
    .highlight {
    background-color: yellow;
    }

    ثم يمكن تطبيق هذه الفئة على أي عنصر في HTML:

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

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

  • يُستخدم لتحديد عنصر معين باستخدام القيمة الفريدة في السمة id.
  • مثال:
    css
    #header {
    font-size: 24px;
    }

    ثم يمكن تطبيقه على عنصر HTML:

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

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

  • المحددات المركبة مثل:
    • النسل (Descendant): تحديد عنصر داخل عنصر آخر.
    • الأخ (Adjacent): تحديد العنصر الذي يلي عنصر آخر.

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

  • الخصائص (Properties) هي السمات التي تحدد كيفية ظهور العناصر (مثل اللون، الحجم، المحاذاة، إلخ).
  • القيم (Values) هي القيم التي تعين لهذه الخصائص.
  • مثال:
    css
    h1 {
    color: red; /* اللون */
    font-size: 32px; /* حجم الخط */
    }

5. قواعد CSS الأساسية

  • الهيكل الأساسي للقواعد: كل قاعدة CSS تتكون من مُحدد (Selector) وكتلة من الخصائص (Properties) والقيم (Values).
    • مثال:
      css
      selector {
      property: value;
      }
  • مثال تفصيلي:
    css
    p {
    color: green;
    font-size: 20px;
    }
  • ملاحظة: عند كتابة أكثر من خاصية داخل نفس القاعدة، يتم فصلها باستخدام الفاصلة المنقوطة ;.

6. أفضل الممارسات في CSS

  • استخدم التعليقات: لتوضيح الشيفرة وتسهيل صيانتها.
    • مثال:
      css
      /* تغيير لون الخلفية إلى الأزرق */
      body {
      background-color: blue;
      }
  • تنظيم الشيفرة: من الأفضل تقسيم الشيفرة إلى ملفات CSS متعددة إذا كانت كبيرة.
  • استخدام الـ Naming conventions: مثل BEM (Block, Element, Modifier) لتسمية الفئات.

7. تطبيق عملي

  • مشروع صغير: تصميم صفحة ويب تحتوي على رأس وجسم مع تنسيق الألوان والخطوط.
  • مثال:
    html
    <html>
    <head>
    <style>
    body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
    }
    h1 {
    color: #333;
    text-align: center;
    }
    p {
    color: #555;
    font-size: 18px;
    line-height: 1.5;
    }
    </style>
    </head>
    <body>
    <h1>مرحبًا بالعالم!</h1>
    <p>هذه صفحة ويب تم تنسيقها باستخدام CSS.</p>
    </body>
    </html>

8. ملخص الدرس

  • CSS هو الأداة الأساسية لتنسيق صفحات الويب، وهو يساعد في تحسين مظهر المحتوى وتوفير تجربة مستخدم مريحة.
  • تعلمنا كيفية إضافة CSS إلى صفحات HTML باستخدام الأساليب الثلاثة.
  • تعرفنا على المحددات (Selectors) واستخداماتها لتحديد العناصر، بالإضافة إلى الخصائص (Properties) والقيم (Values) التي تتحكم في تصميم العناصر.

إذا كنت بحاجة لمزيد من الشرح أو أمثلة إضافية، لا تتردد في سؤالي!

    ahmed nabel

    Similar Posts

    اترك تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *