 |
| لغة البرمجة CSS |
 |
| لغة البرمجة CSS |
 |
| لغة البرمجة CSS |
 |
| لغة البرمجة CSS |
 |
| لغة البرمجة CSS |
 |
| لغة البرمجة CSS |
 |
| لغة البرمجة CSS |
الدرس الثالث من دروس CSS
اتكلمنا فى الدرس الثانى على بعض selectors المستخدمة فى CSS .وهى
public selector _ nesting selector _ grouping selector
id & class selector _ attribute selector .
النهاردة ان شاء الله هنكمل شرح selectors
<html>
<head>
<style>
</style>
</head>
<body>
<div>---------------------------------start parent
<p>direct child p1</p>----direct child
<p>direct child p2</p>----direct child
<h3>
<p>indirect child p3</p>---indirect child
</h3>
</div>----------------------------------end parent
<p> outside the div p4</p>---outside the div
<p> outside the div p5</p>---outside the div
</body>
</html>
فى الكود السابق هنلاحظ ان العنصر الاب parent هو div وبداخلة مجموعة من العناصر وهذة العناصر تسمى الابناء child وهى اما ان تكون ابناء مباشرين او ابناء غير مباشربن .
وفى نهاية هذا div يوجد مجموعة من العناصر خارجة وهى اشقاء لهذا div
عاوزين نعرف كيفة الوصول لابناء هذا div .
درسنا من قبل public selector
وفية يتم مباشرة كتابة عنصر HTML يلية الخاصية ثم القيمة .
وهنا يتم تطبيق هذة الخصائص على هذا العنصر حتى لو تكرر هذا العنصر فى صفحة HTML اكثر من مرة .
<style>
P{
Color:red;
}
</style>
سوف يتم تنسيق اى برجراف p بداخل الصفحة باللون الاحمر .
p1,p2,p3,p4,p5
- اما لو اردنا فقط تنسيق اى برجراف p بداخل div سواء كان ابن مباشر direct child او غير مباشر indirect child .
هنا هيظهر دور nesting selector وتم دراسته من قبل .
وفية يتم كتابة الاب الخاص بالعنصر يلية اسم العنصر الابن
هنا يتم فقط تطبيق الخصائص على هذا العنصر فقط التى بداخل هذا الاب .
<style>
div p{
color:red;
}
</style>
سوف يتم فقط تنسيق اى برجراف بداخل div باللون الاحمر
p1,p2,p3
النهاردة ان شاء الله عاوزين نوصل لابناء هذا div سواء ابناء مباشرين او غير مباشرين على حدى .
-لو اردنا تنسيق اى ابن غير مباشر برجراف indirect child وهى p3 هنستخدم nesting selector .
<style>
div h3 p{
Color:red;
}
</style>
-اما لو اردنا تنسيق اى ابن مباشر برجراف direct child وهى p1,p2
هنا هيظهر دور المحدد <
تستخدم فى حالة الرغبة فى تطبيق مجموعة من الخصائص على الابناء المباشرين لعنصر معين .
مثال: لو اردنا تغيير لون اى برجراف بداخل div بشرط فقط الابناء المباشرين الى اللون الاحمر
div>p{color:red}
سوف يتم تنسيق اى ابن مباشر لعنصر div وهى p1,p2
كدا احنا قدرنا نوصل لابناء اى عنصر سواء كانوا ابناء مباشرين او غير مباشرين على حدى .
اما لو اردنا الوصول لاى عنصر خارج العنصر المحدد يتم ذلك باستخدام احد المحدات التالية :
المحدد +
يستخدم فى حالة الرغبة فى تطبيق مجموعة من الخصائص على اى عنصر ياتى بعد العنصر المحدد بشرط ان ياتى بعده مباشرة .
<style>
div+p
{color:red}
</style>
سوف يتم تنسيق اول برجراف p ياتى مباشرة بعد div باللون الاحمر p4 .
اما فى حالة الرغبة فى تطبيق مجموعة من الخصائص على جميع العناصر التى تاتى بعد العنصر المحدد .
هنا هيظهر دور المحدد ~
<style>
div~p{
color:red;
}
</style>
سوف يتم تنسيق جميع البرجرافات p التى تاتى بعد div باللون الاحمر p4,p5 .
What is CSS in HTML?
What is CSS stand for?
Why is CSS used?
What are the 3 types of CSS?
What is CSS template?
How CSS is used in HTML?
What are CSS rules?
How does CSS actually work?
What is CSS explain types of CSS?
Who invented CSS?
What is HTML and CSS used for?
What are CSS properties?
لغة البرمجة
لغة البرمجة c
لغة البرمجة جافا
لغة البرمجة بايثون
لغة البرمجه
لغة البرمجة c++4
لغة البرمجه جافا
لغة البرمجة فيجوال بيسك
لغة البرمجة go
لغة البرمجة المناسبة للروبوت
لغة البرمجة logo
لغة البرمجه c++
لغة البرمجة
لغة البرمجة c++ للمبتدئين
لغة البرمجة c
لغة البرمجة r
لغة البرمجة بايثون python
لغة البرمجة html
لغة البرمجة c sharp
لغة البرمجة بايثون
لغة البرمجة دارت
لغة ا
