أنواع المحددات Css

1. 1 ‫البيور‬ ‫أنس‬ :‫المهندس‬
‫أنواع‬
‫ال‬
‫محددات‬
‫ي‬
‫ف‬
CSS
‫هناك‬
‫عدة‬
‫محددات‬ ‫من‬ ‫أنواع‬
CSS
‫لنا‬ ‫متاحة‬
:
1
.
‫ال‬
‫محدد‬
‫العام‬
.
2
.
‫محدد‬
‫ال‬
‫عنصر‬
.
3
.
‫محدد‬
‫ال‬
‫معرف‬
ID
.
4
.
‫محدد‬
‫ال‬
‫فئة‬
‫الصف‬ ‫أو‬
Class
.
5
.
‫محدد‬
‫الخاصية‬ ‫او‬ ‫السمة‬
Attribute
.
.
1
‫محدد‬
CSS
‫العام‬
.
‫د‬ِّ‫المحد‬ ‫يحدد‬
‫العام‬
CSS
‫الويب‬ ‫صفحة‬ ‫على‬ ‫الموجودة‬ ‫العناصر‬ ‫جميع‬
.
‫مثال‬
:
{
*
blue;
color:
21px;
size:
-
font
}
‫صفحة‬ ‫في‬ ‫الموجودة‬ ‫العناصر‬ ‫جميع‬ ‫على‬ ‫السطران‬ ‫هذان‬ ‫سيؤثر‬
HTML.
‫محدد‬ ‫عن‬ ‫نعلن‬
‫المتعرج‬ ‫القوس‬ ‫بداية‬ ‫في‬ ‫النجمة‬ ‫عالمة‬ ‫بمساعدة‬ ‫عام‬
.
Eng. Anas Alpure

2. 2 ‫البيور‬ ‫أنس‬ :‫المهندس‬
2.
‫عنصر‬ ‫محدد‬
CSS
‫عرف‬ ُ‫ي‬
CSS Element Selector
‫النوع‬ ‫محدد‬ ‫باسم‬ ‫ا‬ ً
‫أيض‬
.
‫يحاول‬
Element Selector
‫في‬
CSS
‫عناصر‬ ‫مطابقة‬
HTML
‫نفسه‬ ‫االسم‬ ‫تحمل‬ ‫التي‬
.
‫محدد‬ ‫فإن‬ ، ‫لذلك‬
<ul>
‫عناصر‬ ‫جميع‬ ‫يطابق‬
<ul>
‫أي‬ ،
‫المرتبة‬ ‫غير‬ ‫القوائم‬ ‫كل‬
‫صفحة‬ ‫في‬
HTML.
‫العنصر‬ ‫لمحدد‬ ‫مثال‬ ‫على‬ ‫نظرة‬ ‫نلقي‬ ‫دعونا‬
.
ul {
border: solid 1px #ccc;
}
‫كود‬ ‫مثال‬ ‫على‬ ‫نظرة‬ ‫نلقي‬ ‫دعونا‬ ، ‫أفضل‬ ‫بشكل‬ ‫هذا‬ ‫لفهم‬
HTML
‫كود‬ ‫لتطبيق‬
CSS
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div class="demo">
<p>Demo text</p>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3 </li>
</ul>

3. 3 ‫البيور‬ ‫أنس‬ :‫المهندس‬
‫عنصر‬ ‫وهي‬ ‫عناصر‬ ‫ثالثة‬ ‫أساسي‬ ‫بشكل‬ ‫سنجد‬ ، ‫المثال‬ ‫هذا‬ ‫في‬
<ul>
‫وعالمة‬
<div>
‫وعنصر‬
<ul>
‫آخر‬
.
‫شفرة‬ ‫ألن‬ ‫ا‬ ً
‫نظر‬
CSS
‫عالمة‬ ‫على‬ ‫تنطبق‬ ‫بنا‬ ‫الخاصة‬
<ul>
‫وجه‬ ‫على‬
‫لعالمات‬ ‫فقط‬ ‫ستتم‬ ‫الحدود‬ ‫في‬ ‫التغييرات‬ ‫فإن‬ ، ‫التحديد‬
<ul>
‫لعالمات‬ ‫وليس‬
<div>.
3.
‫محدد‬
‫ال‬
‫معرف‬
ID
‫معرف‬ ‫محدد‬ ‫يساعد‬
CSS
‫بمحتوى‬ ‫المطور‬ ‫أنشأه‬ ‫الذي‬ ‫المعرف‬ ‫مطابقة‬ ‫على‬ ‫المطور‬
‫به‬ ‫الخاص‬ ‫التصميم‬
.
‫اسم‬ ‫قبل‬ )#( ‫التجزئة‬ ‫عالمة‬ ‫بمساعدة‬ ‫يستخدم‬ ‫المعرف‬ ‫محدد‬
‫المطور‬ ‫قبل‬ ‫من‬ ‫المعلن‬ ‫المعرف‬
.
‫عنصر‬ ‫كل‬ ‫مع‬ ‫ف‬ ّ
‫المعر‬ ‫د‬ِّ‫محد‬ ‫يتطابق‬
HTML
‫سمة‬ ‫له‬
ID
‫عالمة‬ ‫بدون‬ ، ‫المحدد‬ ‫لقيمة‬ ‫مماثلة‬ ‫بقيمة‬
‫التجزئة‬
.
‫مثال‬ ‫هذا‬
:
#box {
width: 90px;
margin: 10px;
}
‫كود‬ ‫استخدام‬ ‫يمكن‬
CSS
‫المعرف‬ ‫على‬ ‫يحتوي‬ ‫الذي‬ ‫العنصر‬ ‫لمطابقة‬ ‫هذا‬
"box"
‫كما‬ ،
‫التالية‬ ‫الجملة‬ ‫في‬
.
<div id = ”box”> </div>
‫العالمة‬ ، ‫هنا‬
<div>
‫مثال‬ ‫مجرد‬ ‫هي‬

4. 4 ‫البيور‬ ‫أنس‬ :‫المهندس‬
.
‫ألي‬ ‫المعرف‬ ‫سمة‬ ‫كتابة‬ ‫يمكننا‬
‫عالمة‬
HTML.
.
‫المعرف‬ ‫سمة‬ ‫على‬ ‫يحتوي‬ ‫عنصر‬ ‫أي‬ ‫أن‬ ‫طالما‬ ‫النمط‬ ‫تطبيق‬ ‫يتم‬ ، ‫مثالنا‬ ‫في‬
"box".
‫فريدة‬ ‫المستخدم‬ ‫المعرف‬ ‫قيمة‬ ‫تكون‬ ‫أن‬ ‫المفترض‬ ‫من‬
.
‫المعرف‬ ‫نفس‬ ‫استخدام‬ ‫تم‬ ‫إذا‬
‫العنصر‬ ‫نمط‬ ‫سيظل‬ ‫ولكن‬ ، ‫الفنية‬ ‫الناحية‬ ‫من‬ ‫صالح‬ ‫غير‬ ‫الكود‬ ‫فإن‬ ، ‫أكثر‬ ‫أو‬ ‫لعنصرين‬
، ‫ا‬ ً‫ساري‬
-
‫تجنب‬
‫استخدام‬
‫المعرف‬ ‫نفس‬
‫عنصر‬ ‫من‬ ‫الكثر‬
.
4.
‫محدد‬
‫ال‬
‫فئة‬
Class
‫فئة‬ ‫محدد‬
CSS
‫فائدة‬ ‫األكثر‬ ‫المحددات‬ ‫أحد‬ ‫هو‬
‫بين‬
‫المحددات‬ ‫جميع‬
.
‫عنها‬ ‫التصريح‬ ‫يتم‬
‫باسم‬ ‫متبوعة‬ ‫نقطة‬ ‫باستخدام‬
class
، ‫المبرمج‬ ‫بواسطة‬ ‫هذا‬ ‫الفئة‬ ‫اسم‬ ‫تعريف‬ ‫يتم‬
‫كما‬
‫المعرف‬ ‫محدد‬ ‫مع‬ ‫الحال‬ ‫هو‬
‫مثال‬
:
{
.square
20px;
margin:
20px;
width:
}
‫كود‬ ‫استخدام‬ ‫يمكن‬
CSS
‫هذا‬
‫ا‬ ‫لمطابقة‬
‫على‬ ‫يحتوي‬ ‫الذي‬ ‫لعنصر‬
‫اسم‬
‫الفئة‬
square
،
‫التالية‬ ‫الجملة‬ ‫في‬ ‫كما‬
.
class="square"></div>
<div

5. 5 ‫البيور‬ ‫أنس‬ :‫المهندس‬
‫قيمة‬ ‫نفس‬ ‫له‬ ‫الذي‬ ‫العنصر‬ ‫يساعدنا‬
‫الفئة‬
class
‫وتجنب‬ ‫األنماط‬ ‫استخدام‬ ‫إعادة‬ ‫في‬
‫الضروري‬ ‫غير‬ ‫التكرار‬
.
، ‫ذلك‬ ‫إلى‬ ‫باإلضافة‬
‫بإضافة‬ ‫لنا‬ ‫يسمح‬ ‫ألنه‬ ‫ا‬ً‫مفيد‬ ‫الفئة‬ ‫محدد‬ ‫يعد‬
‫معين‬ ‫عنصر‬ ‫إلى‬ ‫فئات‬ ‫عدة‬
.
‫من‬ ‫أكثر‬ ‫إضافة‬ ‫يمكننا‬
class
‫إلى‬
‫العنصر‬
‫كل‬ ‫فصل‬ ‫طريق‬ ‫عن‬
‫بمسافة‬ ‫فئة‬
.
‫مثال‬
:
shape”></div>
bold
class=”square
<div
5.
‫سمات‬ ‫محدد‬
attribute
‫األقواس‬ ‫في‬ ‫المذكورة‬ ‫السمة‬ ‫وقيمة‬ ‫للسمة‬ ‫ا‬ ً
‫وفق‬
‫المربعة‬
.
‫قبل‬ ‫مسافات‬ ‫توجد‬ ‫ال‬
‫المربع‬ ‫الفتح‬ ‫قوس‬
.
input[type="text"] {
background-color: #fff;
width: 100px;
}
‫شفرة‬ ‫ستكون‬
CSS
‫لعنصر‬ ‫مطابقة‬ ‫هذه‬
HTML
‫التالي‬
.
<input type="text">

6. 6 ‫البيور‬ ‫أنس‬ :‫المهندس‬
، ‫وبالمثل‬
‫السمة‬ ‫محدد‬ ‫يطابقها‬ ‫فلن‬ ، ‫السمة‬ "‫"نوع‬ ‫قيمة‬ ‫تغيرت‬ ‫إذا‬
.
، ‫المثال‬ ‫سبيل‬ ‫على‬
" ‫من‬ "‫"النوع‬ ‫قيمة‬ ‫تغيرت‬ ‫إذا‬ ‫السمة‬ ‫مع‬ ‫المحدد‬ ‫يتطابق‬ ‫لن‬
text
" ‫إلى‬ "
email
"
.
‫مطابقتها‬ ‫فسيتم‬ ، ‫سمة‬ ‫قيمة‬ ‫وبدون‬ ، ‫فقط‬ ‫بالسمة‬ ‫السمة‬ ‫محدد‬ ‫عن‬ ‫التصريح‬ ‫تم‬ ‫إذا‬
‫عناصر‬ ‫جميع‬ ‫مع‬
HTML
‫السمة‬ ‫لها‬ ‫التي‬
"
type
" ‫القيمة‬ ‫كانت‬ ‫إذا‬ ‫عما‬ ‫النظر‬ ‫بغض‬ ، "
text
"
" ‫أو‬
"email
‫مثال‬
:
{
input[type]
#fff;
color:
-
background
100px;
width:
}
‫األقواس‬ ‫خارج‬ ‫قيمة‬ ‫تحديد‬ ‫دون‬ ‫السمات‬ ‫محددات‬ ‫من‬ ‫االستفادة‬ ‫ا‬ ً
‫أيض‬ ‫يمكننا‬
‫المربعة‬
.
‫العنصر‬ ‫عن‬ ‫النظر‬ ‫بغض‬ ، ‫فقط‬ ‫السمة‬ ‫استهداف‬ ‫على‬ ‫هذا‬ ‫سيساعدنا‬
.
‫مثالنا‬ ‫في‬
" ‫السمة‬ ‫على‬ ً
‫بناء‬ ‫ستستهدف‬ ،
type
" ‫عنصر‬ ‫عن‬ ‫النظر‬ ‫بغض‬ ، "
"input
‫محددات‬ ‫تساعدنا‬
CSS
‫كود‬ ‫نفس‬ ‫استخدام‬ ‫وإعادة‬ ‫استخدام‬ ‫من‬ ‫وتمكيننا‬ ‫بنا‬ ‫الخاص‬ ‫الكود‬ ‫تبسيط‬ ‫على‬
CSS
‫لعناصر‬
HTML
‫المختلفة‬
.
‫إنها‬
‫بنا‬ ‫الخاصة‬ ‫الويب‬ ‫صفحة‬ ‫من‬ ‫معينة‬ ‫وأجزاء‬ ‫أجزاء‬ ‫تصميم‬ ‫في‬ ‫تساعدنا‬
.
‫لنا‬ ‫توفر‬ ‫إنها‬
‫بنا‬ ‫الخاصة‬ ‫الويب‬ ‫صفحة‬ ‫في‬ ‫موحد‬ ‫بشكل‬ ‫متشابهة‬ ‫عناصر‬ ‫تصميم‬ ‫خيار‬
.
‫تعد‬ ، ‫وبالتالي‬
‫محددات‬
CSS
‫في‬ ‫التعلم‬ ‫منحنى‬ ‫من‬ ‫ا‬ ً
‫مهم‬ ‫ا‬ ً
‫جزء‬
CSS.

7. 7 ‫البيور‬ ‫أنس‬ :‫المهندس‬
‫في‬ ‫المتقدمة‬ ‫المحددات‬
CSS
CSS Combinators
1
.
descendant selector (space)
‫الفرع‬ ‫المحدد‬
‫ي‬
2
.
child selector (>)
‫االبن‬
3
.
adjacent sibling selector (+)
‫الش‬
‫المباشر‬ ‫يق‬
4
.
general sibling selector (~)
‫الشقي‬
‫العام‬ ‫ق‬
descendant selector (space)-
‫الفرع‬ ‫المحدد‬
‫ي‬
.‫محدد‬ ‫عنصر‬ ‫من‬ ‫المنحدرة‬ ‫العناصر‬ ‫جميع‬ ‫يطابق‬ ‫الفرعي‬ ‫المحدد‬
div h1 {
color: red;
}
‫الم‬
‫ال‬ ‫ثال‬
‫الون‬ ‫يعطي‬ ‫سابق‬
‫األحمر‬
‫العنا‬ ‫لجمسع‬
‫صر‬
h1
‫ال‬
‫تنحد‬ ‫تي‬
‫من‬ ‫ر‬
‫العنصر‬
div
‫األ‬ ‫من‬ ‫لمزيد‬
‫كو‬
‫ا‬
‫ال‬ ‫راجع‬ ‫د‬
‫التالي‬ ‫رابط‬
https://codepen.io/anas-alpure/pen/QWyPzqM
child selector (>)-
‫المباشر‬ ‫االبن‬
‫اال‬ ‫محدد‬
‫بن‬
‫الع‬ ‫جميع‬ ‫يحدد‬
‫ل‬ ‫مباشر‬ ‫ابن‬ ‫تكون‬ ‫التي‬ ‫ناصر‬
‫لعنصر‬
div > h1 {
color: #0000ff;
}
‫األ‬ ‫الون‬ ‫يعطي‬ ‫السابق‬ ‫المثال‬
‫ل‬ ‫زرق‬
‫جميع‬
h1
‫من‬ ‫مباشر‬ ‫ابن‬ ‫تكون‬ ‫التي‬
‫العنصر‬
div

8. 8 ‫البيور‬ ‫أنس‬ :‫المهندس‬
‫مثل‬
‫الكود‬
‫التالي‬
<div>
<h1>heading 1 (blue)</h1>
<section>
<h1>heading 1</h1>
</section>
</div>
adjacent sibling selector (+)
‫الش‬
‫المباشر‬ ‫يق‬
‫محدد‬ ‫لعنصر‬ ‫متجاورة‬ ‫أشقاء‬ ‫هي‬ ‫التي‬ ‫العناصر‬ ‫جميع‬ ‫المجاور‬ ‫األخوة‬ ‫محدد‬ ‫يحدد‬
.
."‫مباشرة‬ ‫"التالي‬ ‫يعني‬ "‫"المجاور‬ ‫و‬ ،
h1 + p {
color: green;
}
general sibling selector (~)
‫الشقي‬
‫العام‬ ‫ق‬
‫محدد‬ ‫لعنصر‬ ‫أشقاء‬ ‫هي‬ ‫التي‬ ‫العناصر‬ ‫جميع‬ ‫يختار‬ ‫العام‬ ‫األشقاء‬ ‫محدد‬
h1 ~ p {
color: red;
}
‫ي‬ ‫السابق‬ ‫الكود‬
‫لجم‬ ‫احمر‬ ‫لون‬ ‫عطي‬
‫يع‬
p
‫الت‬
‫ش‬ ‫هي‬ ‫ي‬
‫ل‬ ‫تالي‬ ‫قيق‬
h1
‫من‬ ‫لمزيد‬
‫االكو‬
‫التالي‬ ‫الرابط‬ ‫راجع‬ ‫اد‬
https://codepen.io/anas-alpure/pen/MWyymox

9. 9 ‫البيور‬ ‫أنس‬ :‫المهندس‬
:‫المهندس‬
‫البيور‬ ‫أنس‬
‫مضمار‬ ‫منظمة‬
Eng. Anas Alpure