استخدام المعرف :
تستخدم فكرة المعرف لحفظ تنسيقات معينة باسم هذا المعرف على أن يتم إدراجها مع كل وسم يستخدم هذا المعرف كمتغير ضمن متغيراته الأخرى.لنفترض أننا بحاجة لاستخدام المحاذاة إلى الوسط بشكل متكرر فإننا سنقوم بتعريف معرف يؤدي هذا الغرض كما يلي :
|
ملف 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 } #center {text-align : center } |
<html dir="rtl"> <head> <title>لغةCSS </title> <link rel="stylesheet" type="text/css" href="monstyle.css" /> </head> <body> <p id="center"> السلام عليكم <p/> هذه هي صفحتي الثالثة باستخدام لغة CSS <body/> <html/> |
استخدام الفئات (Classes)
ماذا لو كنت تريد استخدام أكثر من تنسيق للصفحة الواحدة ،بمعنى أن تنسق الفقرة الأولى في مستندك باستخدام اللون الأحمر و الفقرة الثانية باللون الأخضر و الثالثة باللون الأصفر كل ما عليك أن تتعرف على خاصية الفئات من خلال المثال التالي :
|
صفحة ويب |
ملف HTML |
|
الفقرة الحمراء الفقرة الخضراء الفقرة الزرقاء |
<html dir="rtl"> <head> <title>لغةCSS </title> <style> p.red {color : "red" } p.green {color : "green" } p.blue {color : "blue" } </style> </head> <body> <p class="red">الفقرةالحمراء</p> <p class="green">الفقرةالخضراء</p> </p>الفقرةالزرقاء<p class="blue"> </body > </html> |
فائدة :
لتضيف فئة يمكن استخدامها مع جميع الوسوم في صفحتك استخدم الطريقة التالية :
|
.red { color : "red" } |
احذف إسم الوسم واكتفي بوضع نقطة مع الفئة.
استخدام أشباه الفئات (Pseudo-Classes)
تأخد أشباه الفئات الصيغة العامة التالية :
|
{ "القيمة":المتغير}شبهالفئة : وسم |
أو في حالة وجود فئة أيضا :
|
{"القيمة: "المتغير}شبهالفئة : فئة. وسم |
مثال :
|
ملف monstyle.css |
|
a : link {color : #000088; text-decoration: none } a : visited {color : red ; text-decoration: none } a : hover {color : pink; text-decoration: underline; font-size: 10pt} a : active {color : lightblue; text-decoration: none } |