CSS – طرق الاضافة


لتضمين واضافة اجزاء CSS الى صفحات الويب هناك 3 طرق:

  • التضمين Embedding CSS
  • داخل الصفحة Inline CSS
  • خارج الصفحة External CSS

التضمين Embedding

فيه يتم تضمين اجزاء CSS داخل عناصر HTML مباشرة وذلك باستخدام السمة style. يعيب تلك الطريقة ان انماط CSS تكون احد سمات (attributes) عنصر HTML ولا يمكن تعميمه، اي اننا نحتاج ان نكرر كتابته مع كل عنصر من عناصر الصفحة.

لا يوصى باستخدام تلك الطريقة. يفضل دائما الفصل ما بين عناصر HTML و انماط CSS.

مثال:

<!DOCTYPE html>
<html>
   <head>
      <title>CSS</title>
   </head>	
   <body
	  <h1>التضمين Embedding</h1>
	  <p>اهلا في عالم الويب</p>
	  <p style="color:red;">اهلا في عالم الويب</p>
	  <p style="color:green;">اهلا في عالم الويب</p>
	  <p style="color:red;">اهلا في عالم الويب</p>
	  <p style="color:red;">اهلا في عالم الويب</p>
	  <p style="color:green;">اهلا في عالم الويب</p>
   </body>	
</html>

داخل الصفحة Inline CSS

الطريقة الثانية لاستخدام CSS هو عنصر style وعادة ما يكون داخل جزء head من صفحة الويب. يعيب تلك الطريقة ان انماط CSS لا يمكن استخدامها خارج الصفحة المعرفة بداخلها. وسنحتاج تعريف تلك الانماط مرة اخرى داخل كل صفحة.

في المشاريع الكبرى قد يحتوي الموقع على مئات الصفحات لذا تعريف CSS داخل الصفحة قد لا يكون افضل اختيارا.

مثال:

<!DOCTYPE html>
<html>
   <head>
      <title>CSS</title>
	  <style>
		.red-class {
		  color: red;
		} 
		.green-class {
		  color: green;
		} 
	   </style>
   </head>	
   <body
	  <h1>داخل الصفحة Inline</h1>
	  <p>اهلا في عالم الويب</p>
	  <p class="redClass">اهلا في عالم الويب</p>
	  <p style="greenClass">اهلا في عالم الويب</p>
	  <p style="greenClass">اهلا في عالم الويب</p>
   </body>	
</html>

خارج الصفحة External CSS

يتم انشاء صفحات خارجية ويتم تعريف فيها انماط CSS. ونقوم بالاشارة الى تلك الملفات في صفحة الويب التي نريد تطبيق تلك الانماط عليها. تكون تلك الصفحات الخارجية من امتداد css. لكي نشير الى ملف css نستخدم العنصر link داخل HTML و السمة href لكي نشير الى مكان ملف css.

في الدروس القادمة سوف نستخدم هذة الطريقة.

مثال (ننشأ ملف ونختار اسمه وليكن styles.css ونضع فيه الانماط التي نريدها):

.red-class {
  color: red;
} 
.green-class {
  color: green;
}

صفحة الويب:

<!DOCTYPE html>
<html>
   <head>
      <title>CSS</title>
	  <link rel="stylesheet" href="styles.css">
   </head>	
   <body
	  <h1>داخل الصفحة Inline</h1>
	  <p>اهلا في عالم الويب</p>
	  <p class="redClass">اهلا في عالم الويب</p>
	  <p style="greenClass">اهلا في عالم الويب</p>
	  <p style="greenClass">اهلا في عالم الويب</p>
   </body>	
</html>