هناك ثلاث طرق لإدراج الأنماط في صفحتك :
1. الإدراج داخل الوسم.
2. الإدراج في رأس الصفحة.
3. الإدراج في ملف خارجي.
الإدراج داخل الوسم :
هذه الطريقة لا تختلف كثيرا عن استخدام وسوم HTML للتنسيق, لأنك تضع التنسيق مع وسم HTML الذي تريد تنسيقه. سنستخدم كلمة style كمتغير يرسل مع الوسم المراد تنسيقه, المثال التالي يوضح ذلك:
| <html dir="rtl"> <head> <title>لغةCSS </title> </head> <body> <p style="color : red"> السلام عليكم <p/> هذه هي صفحتي الأولى باستخدام لغة CSS <body/> <html/> |
الإدراج في رأس الصفحة :
تستخدم هذه الطريقة إذا كنت تريد تطبيق تنسيق معين على صفحة بكاملها سندرج الأنماط عن طريق الوسم <style> في رأس الصفحة <head>:
| <html dir="rtl"> <head> <title>لغةCSS </title> <style> p {color : "red" } </style> </head> <body> <p> السلامعليكم <p/> هذه هي صفحتي الثانية باستخدام لغة CSS </body> <html/> |
الإدراج في ملف خارجي :
هذه الطريقة هي الخيار الذكي لمن يفكر في برمجة مشاريع من عدة صفحات .ضع كل التنسيقات التي تريدها في هذا الملف الخارجي ثم أدرج رابط لهذا الملف في كل صفحة تريد استخدام الأنماط فيها وهي عادة جميع صفحات مشروعك.فإذا طلب منك زبونك تغير لون الخط المستخدم أو حجمه مفا عليك إلا تغيير سطر واحد في هذا الملف وانتهينا.
هذا الملف يجب أن يحفظ بالإمتداد CSS. يمكنك كتابته عن طريق برنامج المفكرة و إليك المثال:
|
ملف monstyle.css |
صفحة HTML |
|
body {border-style : solid } h2 { color : #5660000 } table { border-right-style : solid } a { color : #005000 ;font-size :1em } p { color : "red" ; border-color : #F990FF } h1,h2,h3,h4,h5,h6{ color : #0560000 } |
<html dir="rtl"> <head> <title>CSS لغة</title> <link rel="stylesheet" type="text/css" href="monstyle.css" /> </head> <body> <p> السلام عليكم <p/> هذه هي صفحتي الثالثة باستخدام لغة CSS <body/> <html/> |
ملاحظة :
يمكن استخدام الطرق الثلاثة معا لإدراج الأنماط في ملف واحد بمعنى أن تستخدم ملفا خارجيا و تستخدم الأنماط في رأس الصفحة وكذلك مع الوسم , لكن أي التنسيقات سيطبقها المتصفح ؟لنفترض أنك حددت حجم خط كل فقرة بالحجم "4" في ملف خارجيثم حددت الحجم "2" لخط الفقرة كذلك في رأس الصفحة ثم حددت الحجم "1" مع وسم الفقرات ,بالنسبة للمتصفح الأنماط ستنساب على بعضها و تكون النتيجة ظهور الفقرة باستخدام الحجم "1" ,فالأفضلية إذن تكون باستخدام الإنسياب التالي (الأول هو الأعلى أفضلية) :
1. التنسيق مع الوسم.
2. التنسيق في رأس الصفحة.
3. التنسيق في الملف الخارجي.