كيفية إنشاء CSS

كيفية إضافة جدول النمط

عند قراءة جدول النمط، يستخدم المتصفح هذا للتنسيق مستند HTML. هناك ثلاث طرق للاضافة جدول النمط:

جدول النمط الخارجي

عندما يجب تطبيق النمط على العديد من الصفحات، يكون جدول النمط الخارجي الخيار الأمثل. في حالة استخدام جدول النمط الخارجي، يمكنك تغيير مظهر الموقع بأكمله عن طريق تغيير ملف واحد. كل صفحة تستخدم علامة <link> للروابط إلى جدول النمط.<link> في رأس المستند (الدокумент):

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

سيقرأ المتصفح تصريحات النمط من ملف mystyle.css ويستخدمها لتنسيق المستند.

يمكن تعديل جدول النمط الخارجي في أي محرر نصي. لا يجب أن يحتوي الملف على أي علامات HTML. يجب أن يتم حفظ جدول النمط بامتداد .css. إليك مثال على ملف جدول النمط:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

لا تدع فراغًا بين قيمة الخاصية وأداة القياس. إذا كنت تستخدم "margin-left: 20 px" بدلاً من "margin-left: 20px"، فإن ذلك يكون فعالًا فقط في IE 6، ولكن لا يعمل بشكل صحيح في Mozilla/Firefox أو Netscape.

جدول النمط الداخلي

عندما يحتاج مستند واحد إلى نمط خاص، يجب استخدام جدول النمط الداخلي. يمكنك استخدام علامة <style> لتعريف جدول النمط الداخلي في رأس المستند، مثل هذا:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

النمط المدمج

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

لإستخدام النمط المدمج، يجب عليك استخدام خاصية النمط (style) في العلامات ذات الصلة. يمكن أن تحتوي خاصية النمط على أي خصائص CSS. هذا المثال يوضح كيفية تغيير لون الفقرة و边缘 الخارجي الأيسر:

<p> style="color: sienna; margin-left: 20px">
هذا فقرة
</p>

الأنماط المتعددة

إذا تم تعريف نفس الخاصية لأي خاصية في أكثر من جدول أنماط، فإن قيمة الخاصية ستأتي من جدول الأنماط الأكثر تفصيلاً.

على سبيل المثال، يمتلك جدول الأنماط الخارجي ثلاث خصائص للنوع h3:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

بينما يمتلك جدول الأنماط الداخلي اثنين من الخصائص للنوع h3:

h3 {
  text-align: right; 
  font-size: 20pt;
  }

إذا كان لديك في الصفحة نفسها جدول أنماط داخلي مرتبط بجدول أنماط خارجي، فإن النمط الذي سيحصل عليه h3 هو:

color: red; 
text-align: right; 
font-size: 20pt;

سيتم توريث خاصية اللون (color) من جدول الأنماط الخارجي، بينما سيتم استبدال نص الترتيب (text-alignment) و حجم الخط (font-size) بناءً على قواعد جدول الأنماط الداخلي.