استخدام وتضمين الملفات CSS How to add CSS to file

-

تتعامل ملفات CSS مع مستندات HTML ، وبالتالي عند قراءة مستندات HTML يقوم متصفح الانترنت browser بتنسيق هذه المستندات بناء على الأنماط الموجودة داخل ملفات CSS في حال وجودها. 


بناء على ما سبق هناك 3 طريق يمكن من خلالها استخدام ملفات CSS داخل مستندات HTML وهي: 

ملفات CSS خارجيه External

ملفات CSS داخلية Internal

ملفات CSS ضمنية Inline

وفيما يلي توضيح لكل طرقة

الطريقة الخارجية External 

في هذه الطريقة يتم عمل ملف CSS منفصل ومستقل في المشروع ومن ثم يتم اضافته الى ملفات HTML 

المثال التالي يوضح ذلك: 

<!DOCTYPE html>
<html>
    <link href="style.css" rel="stylesheet">
<body>
   <p> By Element selector </p>            
   <p id="my-id"> By ID selector </p>     
   <p class="my-id"> By Class selector </p> 
   <a href="https://www.devkum.com" target="_blank"> devkum.com (by Attribute selector)</a>
   <br>
   <br>
   <a href="https://www.devkum.com"> devkum.com (by Pseudo-class selector)</a>
</body>
</html>
لاحظ الكود باللون الاحمر، يعمل هذا الكود على استدعاء ملف CSS باسم Style.css من مصدر خارجي. 

الطريقة الداخلية Internal 
في هذه الطريقة يتم كتابة اكود CSS داخل ملف HTML في جزي مخصص لها يكون في جزء <HEAD> وذلك بإضافة الكود المطلوب داخل
 <Style> ….. </Style>
المثال التالي يوضح ذلك:

<html>
    <head>
<style>
  /*Class selector*/
/*---------------------------------------------*/
.my-id{
    color: rgb(131, 120, 180);
 }
  /*ID selector*/
/*---------------------------------------------*/
#my-id {
    color: rgb(50, 163, 27);
 }
  /*Element selector*/
/*---------------------------------------------*/
p {
    color: rgb(24, 38, 112);
  }
</style>
    </head>
<body>
   <p> By Element selector </p>            
   <p id="my-id"> By ID selector </p>     
   <p class="my-id"> By Class selector </p> 
   <a href="https://www.devkum.com" target="_blank"> devkum.com (by Attribute selector)</a>
   <br>
   <br>
   <a href="https://www.devkum.com"> devkum.com (by Pseudo-class selector)</a>
</body>
</html>

الكود في اللون الأحمر هو المسؤول هنا عن ترتيب وتصميم ملف HTML 

الطريقة الضمنية Inline
في هذه الطريقة يتم إضافة كود CSS مباشرة مع HTML elements 

مثال 

<!DOCTYPE html>
<html>
<body>
   <p> By Element selector </p>            
   <p id="my-id"> By ID selector </p>     
   <p class="my-id"> By Class selector </p> 
   <a href="https://www.devkum.com" target="_blank"> devkum.com (by Attribute selector)</a>
   <br>
   <br>
   <a href="https://www.devkum.com"> devkum.com (by Pseudo-class selector)</a>
   <h1 style="color:rgb(14, 161, 46);text-align:center;">Inline CSS Style</h1>
   <p style="color:red;">Inline CSS Style</p>
</body>
</html>

الكود في اللون الأحمر هو المسؤول هنا عن ترتيب وتصميم ملف HTML 
لا ينصح باستخدام هذه الطريقة الا في حالات خاصة بسبب عدم إمكانية تطبيق جميع إمكانيات CSS في هذه الطريقة.

أكثر من كود CSS لنفس element: 
في حال وجود أكثر من كود CSS لنفس element فسيتم تطبيق الخصائص من آخر قيمة تم قراءتها، 
لنفرض وجود الكود التالي الخاص ب
 <P> element 
خارجي 
p {
    color: rgb(24, 38, 112);
  }
داخلي 
p {
    color: rgb(126, 10, 39);
  }
ضمني 

 <p style="color: brown;"> Inline CSS </p>   

في هذه الحالة سيتم تطبيق القيمة brown بناء على آخر قيمة تم قراءتها 

ترتيب تطبيق كود CSS 
ضمني Inline 
الداخلي Internal 
الخارجي External 
تنسيق الخاص بمتصفح الويب Browser default