شرح دورة الـ CSS للمبتدئين - الدرس الرابع عشر

الSelector :
هو الوسم الذى نخصصه لتطبيق عليه خواص معينه

EX : h2 { color : black ;}

ان كل الجمل التى تطبق عليها وسم h2 ستكتب باللون الاسود

حالات ذكر ال Selector :

1- تجميع ال Selector:

EX : h2 , p { color : black ;}

معنى ذلك ان اكتر من selector  يتم تطبيق عليهم نفس الخواص ..الجمل التى تطبق عليها  و سمى h2 , p  تكون مكتوبه باللون الاسود

=====================================

2-Selector of Attribute :

اختيار التطبيق على حسب خصائص الوسم المذكروه

EX: a [ class ] { color : blue ;}

سيتم كتابه الرابط باللون الازرق فى حاله الوسم a  و ان يحتوى على Class اى كانت قيمه هذه Class ..لابد من تحقق الشرطين

EX: a [ href ] {color : blue ;}

سيتم كتابه الرابط باللون الازرق فى حاله الوسم a  وان يحتوى على خاصيه href اى كانت قيمه ال href 

* يمكن تجميع الخاصيتن فى جمله واحده .. معنى ذلك ان الرابط سيكون باللون الازرق فى حاله وسم a و وجد Class و خاصيه ال Href

a [href] [class] {color : blue ;}

=======================================

3-Selector on Attribute Value :

اختيار التطبيق على حسب قيم الخواص المذكروه للوسم

EX: a [href = "http://www.mindshci.com"]{ font-weight : bold ;}

معنى ذلك .. انه سيجعل الرابط يكتب الخط السميك فى حاله .. وسم ال aو وجود خاصيه ال href و تكون قيمه الhref رابط مدونه مايندز

* يمكن وضع اكثر من خاصيه بجانب href وان تكون لكل خاصيه قيمه ولا يتم تنفيذ مابين {} الا فى حاله وجود جميع الخواص وان تكون قيم الخواص كما تذكر

=========================================

4-Selector on Part of Attribute Value :

اختيار التطبيق على حسب جزء من قيمه الخواص المذكوره للوسم

h2[class~ =" mi"] {background : green ;}

معنى ذلك .. انه سيجعل الجمله المذكوره بعد وسم h2  خلفيه لون اخضر فى حاله
وجود وسم h2 و يحتوى على Class وجزء من (~) اسم الClass  يحتوى على حرفى (mi)

EX:

h2[class ^ =" mi"] ...     (mi)  يبدا ب  Class    اسم ال 

h2[class $ =" mi"] ...     (mi) ينتهى ب Class  اسم ال 

h2[class ! =" mi"] ...      (mi) لا يبدأ ب Class  اسم ال 

ملحوظه : قد لا يتم تطبيق بعض الخواص .. لكن كان لابد من معرفتها تمهيدا لدرس CSS3

=============================================

 :الكود بالطريقه الاولى

النتيجه ..

================================

الآن .. أختبـــــــــــــــــــــــــــــ(ـنفسك)ــــــــــــــــــــــــــــــــــــــر..

قم بتطبيق نفس الكود ولكن بالطريقه الثانيه والثالثه
لديك مايكفيك من لغه الCSS أيها القارىء لكى تحدث فى الكود حسب رغبتك 

ملحوظه..
عند الضغط على اى كلمه فى النتيجه ستصلك الى .............. :)