التخطي إلى المحتوى
شرح دورة الـ 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
=============================================

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Minds</title>
<style>
 .mm{  font-weight:bold;}
 .kk{ color = red;}
 a[class][href] { Color: purple ; }
</style>
</head>
<body >
<img src=th.png width=400 height=150>
<p>
<a class=mm href =http://www.mindshci.com> 
تشكر مدونه مايندز|علم ينتفع به
<p>
ال 1600 عضو على دعمهم لنا ومتابعتهم لنا 
<p>
ونشكر كل من ساهم بابداء رأيه . ونرحب بجميع الاراء ونرجوان نكون دائما عند حسن ظنكم بنا 
<p>
 تشكر جميع مؤسسى الجروبات الذين سمحوا لنا بنشر دروسنا التعليميه كما
<p>
لكم منا جزيل الشكر والتقدير
<p>
مع تحيات فريق مدونه مايندز |علم ينتفع به
<p>
<h3>
<a href=https://www.facebook.com/tito.eldowy?fref=ts>
مدير عام المدونه:م.محمد صلاح</a>
 </a>
 <p>
<b> <a class=kk href=http://www.mindshci.com/search/label/CSS>
CSSللمتدئين مجانا .. سلسله شروحات لغه ال 
 </a>
</body>
</html>


النتيجه ..

================================
الآن .. أختبـــــــــــــــــــــــــــــ(ـنفسك)ــــــــــــــــــــــــــــــــــــــر..
قم بتطبيق نفس الكود ولكن بالطريقه الثانيه والثالثه
لديك مايكفيك من لغه الCSS أيها القارىء لكى تحدث فى الكود حسب رغبتك 

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

عن الكاتب

التعليقات

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Shares