الدرس 4: استخدام المعرف والفئات

css4
سنتطرق إلى استخدام المعرف والفئات في هذا الدرس.

استخدام المعرف :

تستخدم فكرة المعرف لحفظ تنسيقات معينة باسم هذا المعرف على أن يتم إدراجها مع كل وسم يستخدم هذا المعرف كمتغير ضمن متغيراته الأخرى.لنفترض أننا بحاجة لاستخدام المحاذاة إلى الوسط بشكل متكرر فإننا سنقوم بتعريف معرف يؤدي هذا الغرض كما يلي :

ملف 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 }

  

أضف تعليق


كود امني
تحديث


Go to top