ما الذي سيفعله الكود التالي ؟
من هنا ظهرت الفئات في لغة CSS فهي تضيف للغة مرونة هائلة وأصبح بإمكانك أن تتكيف في خواص العناصر بمرونة كبيرة فمثلاً يمكنك تعديل خواص أحد عناصر h6 مع عدم تعديل خواص باقي عناصر h6 .
الفئات باللغة الانجليزية تعني classes (جمع class) وقد تسمى باللغة العربية "كلاسات - ترجمة حرفية" وتسمى أيضاً "أصناف" وفي مشوارنا التعليمي سنطلق عليها اسم "الفئات" .
القاعدة العامة لاستخدام الفئات هي كالتالي :
تلميح : عند تسمية الفئة قم باختيار اسم يدل عليها فمثلاً لو أردت صنع فئة تحمل خواص شعار الموقع فقم بتسميتها logo أو site-logo وغيرها , ولا تقم بتسميتها x أو picture أو image وغيرها مع أنه يجوز لك هذا إلا انه قد يسبب لك الارتباك اثناء التصميم .
لنأخذ مثالاً , اكتب الكود التالي :
شرح السطر الرابع من الكود السابق وهو :
كل ماذكرته ينطبق أيضاً على الفئتين greenColor و blueColor حيث أن أي عنصر h3 تربطه مع الفئة greenColor سيصبح باللون الأخضر , وأي عنصر h3 يربط مع الفئة blueColor سيصبح باللون الأزرق .
س/ اذا استخدمنا الفئة blueColor التي في المثال السابق مع العنصر h1 , يعني أن نكتب :
ج/ لا , لن يعمل الكود ولن يتغير اللون إلى الأزرق , لأننا عندما كتبنا h3.blueColor فهذا يعني أننا خصصنا الفئة blueColor لعناصر h3 فقط ولن تتمكن من استخدامها مع أية عناصر اخرى (نفس الشئ ينطبق على الفئتين redColor و greenColor) .
h1
{
color
: Blue;
}
نعم , الكود السابق سيقوم بتغيير لون جميع عناصر h1 في صفحة HTML إلى اللون الأزرق , ولكن ماذا لو أردت أن تغير لون بعض عناصر h1 فقط وليس جميعها؟ مشكلة أليس كذلك؟من هنا ظهرت الفئات في لغة CSS فهي تضيف للغة مرونة هائلة وأصبح بإمكانك أن تتكيف في خواص العناصر بمرونة كبيرة فمثلاً يمكنك تعديل خواص أحد عناصر h6 مع عدم تعديل خواص باقي عناصر h6 .
الفئات باللغة الانجليزية تعني classes (جمع class) وقد تسمى باللغة العربية "كلاسات - ترجمة حرفية" وتسمى أيضاً "أصناف" وفي مشوارنا التعليمي سنطلق عليها اسم "الفئات" .
القاعدة العامة لاستخدام الفئات هي كالتالي :
selector.className
{
property1 : value;
property2 : value;
}
حيث أن className هو اسم الفئة التي تود ربطها بعنصر HTML , أما selector فهو يمثل عنصر HTML , وليس للفئات تسميات محددة فأنت هو من يحدد تسمية الفئة بأي اسم تريده .تلميح : عند تسمية الفئة قم باختيار اسم يدل عليها فمثلاً لو أردت صنع فئة تحمل خواص شعار الموقع فقم بتسميتها logo أو site-logo وغيرها , ولا تقم بتسميتها x أو picture أو image وغيرها مع أنه يجوز لك هذا إلا انه قد يسبب لك الارتباك اثناء التصميم .
لنأخذ مثالاً , اكتب الكود التالي :
<html>
<head>
<style>
h3.redColor { color: Red; }
h3.greenColor { color: Green; }
h3.blueColor { color: Blue; }
</style>
</head>
<body>
</head>
<body>
<h3 class="red">الفئة
الحمراء</h3>
<h3 class="green">الفئة
الخضراء</h3>
<h3 class="blue">الفئة
الزرقاء</h3>
</body>
</html>
كالعادة قم بحفظ الصفحة ثم افتحها بمتصفح الويب , ستكون مشابهة للصورة :
شرح السطر الرابع من الكود السابق وهو :
h3.redColor { color: Red; }
كما ترى استخدمنا الفئة التي سميناها redColor مع العنصر h3 حسب القاعدة العامة التي ذكرناها سابقاً , وهذا يعني ان أي عنصر h3 سوف يصبح باللون الأحمر عندما نربطه مع الفئة redColor وهذا مافعلناه بالضبط في السطر الثامن :
<h3 class="red">الفئة الحمراء</h3>
حيث استدعينا الفئة redColor وربطناها بالعنصر h3 عن طريق الخاصية class .كل ماذكرته ينطبق أيضاً على الفئتين greenColor و blueColor حيث أن أي عنصر h3 تربطه مع الفئة greenColor سيصبح باللون الأخضر , وأي عنصر h3 يربط مع الفئة blueColor سيصبح باللون الأزرق .
س/ اذا استخدمنا الفئة blueColor التي في المثال السابق مع العنصر h1 , يعني أن نكتب :
<h1 class="blueColor">الفئة الزرقاء</h1>
فهل سيتغير لون العنصر h1 إلى اللون الأزرق ؟ج/ لا , لن يعمل الكود ولن يتغير اللون إلى الأزرق , لأننا عندما كتبنا h3.blueColor فهذا يعني أننا خصصنا الفئة blueColor لعناصر h3 فقط ولن تتمكن من استخدامها مع أية عناصر اخرى (نفس الشئ ينطبق على الفئتين redColor و greenColor) .
اذن كيف نجعل الفئة متاحة لأي عنصر ؟
لجعل الفئة متاحة لأي عنصر ماعليك إلا أن تكتبها بدون ربطها مع أي عنصر (انتبه أن تحذف النقطة) , مثلاً في المثال السابق سنجعل الفئات redColor و greenColor و blueColor متاحة لأي عنصر HTML سواء h1 أو p او غيره :
.redColor { color: Red; }
.greenColor { color: Green; }
.blueColor { color: Blue; }
عندها يمكنك بسهولة ربط أي واحدة من هذه الفئات مع أي عنصر تريد وذلك بنفس الطريقة السابقة بواسطة الخاصية class .