القائمة الرئيسية

الصفحات

شرح CSS selector "المحددات" جزء1 "دورة تعلم css من البداية الى الإحتراف"

 



في هذا الدرس من دورة تعلم css، سنتطرق إلى طريقة تحديد عناصر html في css عبر المحددات فماهي المحددات ؟ وكيف نستخدمها؟

ما هي المحددات؟ 

لـCSS مجموعة من المصطلحات  الّتي تصف اللّغة. فمثلا هذا السطر محتواه:

strong { color: red; }
وفي مصطلحات CSS نقول عن هذا السّطر أنّه قاعدة (rule). تبدأ هذه القاعدة بالكلمة strong والّتي نُسمّيها المحدِّد (selector)، لأنّه يحدّد العناصر تُطبّق عليها القاعدة المعنيّة. ويتم تحديد العناصر عبر الخاصيتين class و id
  

محددات الأصناف (class selectors)؟ 

تستخدام الخاصّية class في HTML لإسناد صنف إلى العنصر، بإمكانك اختيار أي اسم للصنف، ويمكن للصّنف الواحد أن يُسند إلى عدّة عناصر في الصّفحة. لاستخدام محدّد الصنف في CSS اكتب اسم الصّنف مسبوقًا بنقطة (.).

محددات المعرفات (id selectors)؟ 

تستخدم الخاصّية id في عنصر لإسناد مُعرّف إلى هذا العنصر، بإمكانك اختيار أي اسم للمُعرّف، ولكن ينبغي أن لا يكون لعنصرين في الصّفحة المُعرّف ذاته. لاستخدام مُحدّد المعرّف في CSS، اكتب اسم المُعرّف مسبوقًا برمز #.

والآن مع الأمثلة 

لوسم HTML التالي خاصّيتا الصّنف والمعرّف معًا:

<p class="Code" id="principal">
قيمة الخاصّة id، وهي principal يجب أن تكون فريدة لا تتكرّر في كامل المستند، ولكن يمكن استخدام الصّنف code  لأي عدد من العناصر.
القاعدة التالية في CSS تجعل كل العناصر في المستند خضراء اللون، حتى وإن تكن جميعها عناصر <p>:
.code {
  color: green;
}
القاعدة التالية تجعل العنصر الوحيد ذا المعرّف principal عريض الخطّ:
#principal {
  font-weight: bolder;
}

تدريب استخدام محددات الأصناف والمعرفات

  1. حرّر ملفّ HTML الّذي تتدرّب عليه، كرّر الفقرة بنسخها ولصقها.
  2. أضف الخاصّتين id وclass إلى النّسخة الأولى من الفقرة، وأضف id إلى الثّانية كما في المثال أدناه، أو يمكنك نسخ كامل المثال:
<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Sample document</title>
 <link rel="stylesheet" href="style1.css">
 </head>
 <body>
   <p id="first">
     <strong class="carrot">C</strong>ascading
     <strong class="spinach">S</strong>tyle
     <strong class="spinach">S</strong>heets
   </p>
   <p id="second">
     <strong>C</strong>ascading
     <strong>S</strong>tyle
     <strong>S</strong>heets
   </p>
 </body>
</html>
عدّل CSS مُستبدلًا كامل محتوى الملفّ:
strong { color: red; }
.carrot { color: orange; }
.spinach { color: green; }
#first { font-style: italic; }

احفظ الملفّات وحدّث المتصفّح لترى النّتيجة:

 Cascading Style Sheets

 Cascading Style Sheets

كان هذا درسنا اليوم نتمنى اننا قد أوصلنا الفكرة للمزيد من الفهم 


شاهدوا الدرس




تعليقات