تعلم CSS – المحددات الجزء الأول ( Selectors )

نبذة سريعة 

تعرفنا فيما سبق من أجل كتابة كود CSS يكون هناك مجموعة من الـ Ruleset  ومن ضمن الاشياء التي تحتوي عليها هذه Rule هي المحددات ، في هذا الدرس سنتعرف على المحددات في CSS والتي تستطيع تطبيق عليها أكواد الـ CSS .

 

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

كما قلنا سابقاََ ، هي العناصر المراد تطبيق عليها خصائص الـ CSS  ويتم كتابته قبل قوس البداية ( } )  ويسمي هذا القوس  left curly brace 

 

المحدد بإستخدام إسم العنصر نفسه

نقوم هنا بتحديد المحدد المراد تطبيق عليه خصائصا الـ CSS من خلال كتابة إسم عنصر الـ HTML نفسه المراد تطبيق عليه هذه الخصائص

 

في هذه الحالة تم إختيار عنصر الـ <p> كـ محدد وتم اضافة له خصائص CSS وهذا يعني أي عنصر <p> موجود في هذه الصفحة قم بإعطائه هذه الخصائص الموجودة .

3

 

المحدد بإستخدام إسم الكلاس

في عناصر الـ HTML يمكنك إضافة Attribute للعنصر كخاصية وهي الـ class=’nameClass’  وتستخدم في الـ CSS كما سنري بالصورة :

 

أول شىء عليك أن تعلم ان الـ Class في الـ HTML تعادلها الـ ( . ) النقطة في الـ CSS ، بمعني أوضح لو قمت بكتابة هذا السطر بالـ CSS

.text {
	color: black;
	font-size: 18px;
	background: yellow
}

بمعنى أي Class في الـ ملف الـ HTML بإسم text قم بإعطائه هذه الخصائص بالـ CSS

class=”text”

• الـ Class إسم الـ Attribute وهو كلاس .
• الـ text قيمة الـ Attribute وهي text ويمكن إستخدام أي نص  كقيمة للكلاس ولكن بشرط أن لا يبدأ برقم .

تخيل معي أنه لديك العديد من عناصر الـ HTML تريد إعطائها نفس الخصائص من الـ CSS وكل عنصر يختلف إسمه عن الثاني ، على سبيل المثال لدي عنصر <h2> و <p> و <h3> هل سأقوم بإعطاء كل واحد منهم على حدى خصائص خاصة به بالرغم من أنها نفس الخصائص لكل عنصر ،  هكذا مثلا؟

h3 {
	color: black;
	font-size: 18px;
	background: yellow  
}

h4 {
	color: black;
	font-size: 18px;
	background: yellow   
}

p {
	color: black;
	font-size: 18px;
	background: yellow  
}

 

هذا الكود سليم وسيعمل بشكل صحيح ولكن هل تلاحظ نفس الخصائص مكررة ، من قواعد كتابة الكود المرتب والمنظم هي عدم التكرار للكود ولذلك في هذه الحالة نلجىء لإستخدام الـ Class ، مثال :

3

 

خصائص الـ CSS  التي ستكون متكررة لعنصر ما ، قم بوضعها في .name-class وبعد ذلك أي عنصر سوف يأخد هذه الخصائص قم باستدعاء class لهذا العنصر <div class=’name-class’>

 

المحدد بإستخدام إسم id

وهي شبيه نوعا ما بخاصية الـ class ، كما يمكنك إعطاء خاصية class للعناصر يمكنك أيضاََ اعطاءه خاصية id تقريبا الاثنين متشابهين بالاستخدام ولكن هناك بعض الإختلافات

لا يمكن ان تقوم بإعطاء أكثر من عنصر نفس اسم الـ id لأن الـ id بنفس الإسم لا يتكرر في الصفحة الإ مرة واحدة فقط ، فهو يشبه بطاقتك الشخصية ، هل هناك شخص اخر يحمل نفس بطاقتك الشخصية أم هذا سيكون مخالف ، على عكس الـ class يمكن أن يتكرر لأي عنصر يمتلك نفس الخصائص .

 

مثال لإستخدام الـ id

بنفس الكلاس في داخل عنصر الـ html يتم كتابة خاصية id=”section” ويتم التعبير عن الـ id  في الـ css بالـ ( # )  لكي يتم اعطاءه الخصائص التي تريد بعد ذلك .

 

يمكن استخدم المحدد id بوضع علامة ( # ) متبوعه بقيمة خاصية الـ id كما بنفس الاستخدام في  المحدد class ولكن بدل النقطة نقوم بوضع علامة ( # )، مثال:

3

 

الفرق بين الـ Class والـ ID

إستخدام الـ class وتعريفة بالـ CSS يجب أن يبدأ بـ ( . ) ، بينما عند استخدام الـ id  وتعريفة بالـ CSS يجب أن يبدأ بـ ( # )

 

الـ id  هي إختصار لـ identify وهي بمعنى الهوية التي تُعرّف من خلالها على شيء فريد ،  مثلا لكل شخص رقم وطني (National ID) خاص به ، لا يشترك به مع أحد آخر .

أما الـ Class، فهي تعني صنْف أو فئة ، وتضم مجموعة من العناصر الذين يندرجون تحت صنف معين ..

مثلاً: مجموعة من الأفراد لكل واحد منهم رقم وطنيّ خاص به (ID) ،  وجميعهم مشتركون مثلاً في أن لون بشرتهم بيضاء ..

 

يمكنك إستخدام أكثر من class بنفس الإسم في الصفحة بل ويمكنك إستخدام أكثر من class لنفس العنصر وهذا لا يمكن أن يحدث مع الـ id  .

<div class="text clr-red center">

 

يمكنك إستخدام الـ id في الروابط ، بحيث عند الضغط على الرابط سيذهب الى العنصر الذي يحمل id ، لتوضيح بشكل أدق، تخيل معي انه هناك زر مكتوب به Click Here مثال:

<a href="#contact"> Click Here </a>

هل تلاحظ شىء هنا ، href=”#contact” لاحظ ان هنا ايضاََ #  وهي نفس المستخدمة في الـ CSS والتي تدل على الـ id  وهنا ايضاََ نفس الشىء ، وهذا معنا عند الضغط على هذا الرابط سيتم الانتقال إلى العنصر الذي يحتوي على اسم الـ id

أي ان هذا #contact سيؤدذي الى عنصر يحتوي على <div id=”contact”>

3

 

هذا ما عليك معرفته من فروقات في هذه المرحلة ، وسيتم شرح المزيد في الدروس القادمة .