اتكلمنا فى الدرس الاول من دروس تعلم لغة css وهى عبارة عن مقدمة لشرح css وماهي متطلبات تعلمها وهل تستطيع كتابة كود css بدون تعلم لغة اخري وماهي الادوات المطلوبة لكتابة كود css وطرق وضع الاكواد وربطها بصفحة ال HTML وممكن تطلع عليه من خلال الرابط التالي:
طبعا انا ذكرت من قبل فى دروس html انى حابب اشرح دروس الويب بصورة مرتبة .
النهاردة ان شاء الله هبداء بشرح selector في الدرس الثاني من دروس شرح لغة CSS
<html>
<head>
<style>
</style>
</head>
<body>
<div>
<h1>order</h1>
<p>the first</p>
<p>the second</p>
<img src=”1.jpg”>
</div>
<img src=”2.jpg”>
<p>the third</p>
</body>
</html>
والسؤال : ماذا لو اردنا مثلا تنسيق اى برجراف p داخل الصفحة باللون الاحمر .هنا هيظهر دور اول selector وهو :
1-public selector
وفية يتم مباشرة كتابة عنصر HTML يلية الخاصية ثم القيمة .
وهنا يتم تطبيق هذة الخصائص على هذا العنصر حتى لو تكرر هذا العنصر فى صفحة HTML اكثر من مرة .
<style>
P{
Color:red;
}
</style>
سوف يتم تنسيق اى برجراف p بداخل الصفحة باللون الاحمر .
first and second and third
– لو اردنا فقط تنسيق اى برجراف p فقط بداخل div هنا هيظهر دور :
2-nesting selector
وفية يتم كتابة الاب الخاص بالعنصر يلية اسم العنصر هنا يتم فقط تطبيق الخصائص على هذا العنصر فقط التى بداخل هذا الاب .
<style>
div p{
color:red;
}
</style>
سوف يتم فقط تنسيق اى برجراف بداخل div باللون الاحمر وهو first and second .
-اما لو وجد مجموعة من العناصر تشترك فى نفس الخواص هنا هيظهر دور :
3-Grouping selector
تستخدم فى حالة وجود مجموعة من الخصائص مشتركة بين اكثر من عنصر .
مثال: لو اردنا تغيير لون اى برجراف وكذلك العنصر h1 الى اللون الاحمر
p{color:red}
h1{color:red}
باستخدام ال Grouping يتم اختصار الكود السابق
<style>
p,h1
{color:red}
</style>
سوف يتم تنسيق اى برجراف p واى عناوين h1 باللون الاحمر .
4 – id selector
يمكن تمييز اى عنصر ب id وذلك لتنسيق عنصر معين فريد من عناصر HTML بتنسيقات معينه .وهذا id لايمكن تكرارة .
مثال : لو ارد تنسيق برجراف second فقط باللون الاحمر
<p id=”part1″ >the second</p>
<style>
#part1{
color:red;
}
</style>
-لو اردنا فقط تنسيق the first and the third باللون الاحمر
هنا هيظهر دور :
5- class selector
يستخدم لتنسيق مجموعة من العناصر تشترك فى نفس الخصائص
<p class=”part1″>the first</p>
<p class=”part1″>the third</p>
<style>
.part1{
color:red
}
</style>
سوف يتم تنسيق جميع العناصر التى تاخد نفس هذا الكلاس باللون الاحمر .
6-attribute selector :
ذكرنا فى شرح HTML ان هناك مجموعة من العناصر لها صفات او سمات مثل العنصر img الخاص بعرض الصور والعنصر a المسئول عن عمل روابط للصفحة .
ويمكن فى CSS استخدام هذة الصفات فى تمييز العنصر عن باقى العناصر .
مثال : لتغيير عرض وطول الصورة
1.jpg
<style>
img [src=”1.jpg”]
{
width:200px;
height: 200px;
}
</style>
دا طبعا مش كل selector لسة هنكمل باقى selector فى الدرس القادم .
نقلا عن مهندس / Fawzy Syam
