عندما يقرأ المستعرض css ، فإنه يقوم بتنسيق مستند HTML وفقًا للمعلومات الموجودة في css

طرق إدراج CSS

توجد ثلاث طرق لإدراج CSS :

  1. ملف CSS منفصل (css الخارجية)
  2. CSS الداخلية او داخل الصفحة
  3. أسلوب مضمن في عنصر

  • ملف CSS منفصل
  • باستخدام ملف css خارجي ، يمكنك تغيير مظهر موقع ويب بأكمله عن طريق تغيير ملف واحد فقط!

    يجب أن تتضمن كل صفحة مرجعًا لملف CSS داخل عنصر <link> ويتم وضع رابط الملف داخل href بين علامتين تنصيص

    ويدخل العنصر <link> داخل قسم <head>

    مثال

    <!DOCTYPE html>
    <html>
    <head>
      <!-- يجب وضع مسار الملف بشكل صحيح اما من خلال رابط او موقعه في المجلدت -->
      <link rel="stylesheet" href="/style.css">
    </head>
    <body>
    <h1>هذا هو اول عنوان رئيسي</h1>
    <p>هذه اول قطعة لي</p>
    </body>
    </html>

    يمكن كتابة ورقة أنماط خارجية في أي محرر نصوص. يجب ألا يحتوي الملف على أي علامات html يجب حفظ ملف css بامتداد css.

    إليك كيف تبدو التعليمات داخل ملف css

    h1 {
      color: blue;
      font-size:13px;
      }
    p {
      color: red;
      }
    

    ملاحظة: لا تضف مسافة بين قيمة الخاصية والوحدة (مثل margin-left: 20 px;). الطريقة الصحيحة هي:margin-left: 20px;


    CSS في نفس الصفحة

    يمكن استخدام CSS في نفس الصفحة إذا كان لصفحة واحدة نمط\شكل فريد.

    و يتم تحديد الأنماط الداخلية داخل عنصر <style> ، داخل قسم <head> لصفحة HTML:

    مثال

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1 {
      color: blue;
      font-size:13px;
      }
    p {
      color: red;
      }
    </style>
    </head>
    <body>
    <h1>هذا هو اول عنوان رئيسي</h1>
    <p>هذه اول قطعة لي</p>
    </body>
    </html>

    css مضمن في عنصر

    كما يمكن استخدام style مضمن لتطبيق نمط فريد لعنصر واحد.

    لأستخدام الأنماط المضمنة ، أضف سمة النمط إلى العنصر ذي الصلة. يمكن أن تحتوي سمة النمط على أي خاصية CSS.

    يوضح المثال أدناه كيفية تغيير اللون والهامش الأيسر لعنصر <h1>:

    مثال

    <h1 style="color:green;">اترك بصمتك التي تنير الطريق لمن خلفك</h1>

    نصيحة: يفقد النمط المضمن العديد من مزايا ورقة الأنماط (عن طريق مزج المحتوى مع العرض التقديمي). استخدم هذه الطريقة باعتدال.


    ماذا عن انماط متعددة لنفس العنصر؟

    في css الامر يتم ترتيبة تبعا للاولويه والتي تأتي في هذا الشكل

    1. css المضمن
    2. صفحات css الخارجية / و css في نفس الصفحة
    3. الوضع الافتراضي للمتصفح

    كما رأيت اعلاه ف ان كان هناك عنصر يحتوي علي css مضمن مثل

    <h1 style="color:green;">اترك بصمتك التي تنير الطريق لمن خلفك</h1>

    اي وصف اخر للون في صفحة css او اي وصف للون هذا العنصر في قسم style سيتم تجاهلة تماما وتنفيذ الامر المضمن الا وهو اللون الاخضر وهذه تستعمل في الاثتثناءات احيانا ك حل سريع

    بعض الامثلة

    في المثال التالي سنضع وصف للون الخلفية للصفحة ولون العنصر h1 ونري تأثير الاولوية

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="/style.css">
    <style>
    h1 {
        color: aqua;
    }
    </style>
    </head>
    <body>
    <h1>هذا عنوان </h1>
    <h1 style="color:green;">اترك بصمتك التي تنير الطريق لمن خلفك</h1>
    </body>
    </html>

    ماداخل ملف style.css

    h1 {
      color: blue;
      font-size:13px;
      }
    p {
      color: red;
      }

    كما تلاحظ اعلاه ان ترتيب الاولويه اتي ك الاتي

    1. css في عنصر مضمن
    2. css في نفس الصفحة / داخلي
    3. css في ملف خارجي