طريقة اضافة CSS الى ملف HTML | أساسيات CSS


03 طرق لإضافة كود CSS إلى صفحات الويب


عندما يقرأ المستعرض كود CSS، فإنه يقوم بتنسيق مستندات HTML بناءً على المعلومات التي يتلقاها من الشفرة. في هذا الدرس، سوف نتعلم كيف تعمل CSS.


يمكن إضافة كود CSS إلى صفحة الويب بعدة طرق:

         الطريقة الخارجية
         الطريقة الداخلية
        ➌ طريقة مضمنة

اضفافة كود CSS بطريقة خارجية

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

يتم وضع المراجع على الصفحة بواسطة عنصر <link> في قسم <head>:

<head>
<link rel="stylesheet" type="text/css" href="mystyle2.css">
</head>

يمكن كتابة ملف خارجي يحتوي على كود CSS بواسطة أي محرر نصوص.

يجب ألا يحتوي هذا الملف على أي علامات HTML ويجب أن يكون بامتداد css. ليتم حفظه.

يوضح المثال التالي محتويات ملف يسمى "mystyle.css":

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

اضافة كود CSS بطريقة داخلية

يمكن استخدام الطريقة الداخلية عندما تحتاج صفحة معينة إلى نمط فريد.

في هذه الطريقة، يتم وضع كود CSS داخل عنصر <style> وداخل جزء <head> من صفحة HTML.

يوضح المثال التالي كيفية استخدام هذه الطريقة:

<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

اضافة كود CSS بطريقة Inline

يمكن استخدام طريقة Inline عندما يحتاج العنصر إلى نمط فريد.

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

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

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

عدة أنماط لعنصر واحد

إذا تم تحديد سمات CSS متعددة لعنصر بطرق مختلفة (خارجية، داخلية، مضمنة)، يتم تطبيق القيمة الأخيرة التي تمت قراءتها على العنصر.

افترض أنه في الطريقة الخارجية، تم تعريف النمط التالي للعنصر <h1>:

h1 {
color: navy;
}

والنمط المحدد في الطريقة الداخلية للعنصر <h1> هو كما يلي:

h1 {
color: orange;
}

إذا كان النمط المحدد في الطريقة الداخلية بعد المرجع الذي يحدد النمط في الطريقة الخارجية، فسيكون العنصر <h1> باللون البرتقالي:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>

ومع ذلك، إذا كان النمط المحدد بواسطة الطريقة الداخلية قبل الإشارة إلى الطريقة الخارجية، فسيكون عنصر <h1> باللون البرتقالي:

<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

ترتيب الأولويات في تطبيق الأسلوب

ما هو النمط الذي سيتم استخدامه عند تحديد أكثر من نمط لعنصر HTML؟

أخيرًا سيكون من الممكن تطبيق أحد الأنماط على عنصر HTML.

فيما يلي الأولويات الخاصة بكيفية تطبيق النمط على عنصر. رقم واحد له الأولوية القصوى والرقم 3 له أقل أولوية:

      نمط مضمن (داخل عنصر HTML)
      الأسلوب في الأسلوب الخارجي والداخلي (في قسم head)
      المتصفح الافتراضي مثبت على النظام.

لذلك، فإن النمط في الطريقة المضمنة (داخل عنصر معين في HTML) له الأولوية القصوى. هذا يعني أنه يمكن تجاهل النمط المحدد في علامة head والنمط المحدد في الطريقة الخارجية وافتراضات المتصفح بواسطة الأسلوب Inline. 


كلمات مفتاحية: