المحددات فى CSS وأنواعها | CSS Selectors
سنتناقش فى هذا الفصل المحددات فى CSS وأنواعها بالتفصيل.
المحددات فى CSS
تُستخدم محددات CSS لتحديد عناصر HTML التي تريد تصميمها.
1. المحدد العام – Universal selector
المحدد العام (*) يقوم بتحديد جميع عناصر HTML فى الصفحة.
مثال للتوضيح:
* {
font-size: 16px;
color: black;
}
فى المثال السابق سيتم تنفيذ التنسيق على جميع عناصر الـ HTML.
2. محدد النوع – Type Selector
يقوم محدد النوع/العنصر بتحديد عناصر HTML بناءً على اسم العنصر. على سبيل المثال:
span {
color: white;
font-weight: bold;
}
فى المثال السابق، العنصر <span> سيتم تطبيق التنسيق المعطى له وهو جعل لونه color “أبيض” وحجم الخط font-weight “سميك”.
3. محدد الفئة – Class selector
تحديد كافة العناصر التي لها سمة Class معينة،
لتحديد عناصر من class معين، اكتب نقطة (.) > متبوعًا بـ (إسم الفئة). كالتالى:
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors</title>
<meta charset="UTF-8" />
<style>
.demo {
color: blue;
}
</style>
</head>
<body>
<h2 class="demo">CSS Selectors</h2>
</body>
</html>
CSS Selectors
فى المثال السابق، جميع العناصر اللى واخده “class=”blue هيبتغير لونها إلى أزرق. لكن فى حالة إحتياجك إلى تحديد فئة class معينة، فيمكنك القيام بذلك كما هو موضح فى المثال التالى:
h2.demo {
color: blue;
}
التنسيق الموجود فى المثال السابق سيتم تنفيذه على أى h2 بداخله class بقيمة demo فقط.
4. محدد المُعرف – ID Selector
لتحديد عنصر بناءً على قيمة سمة الـ id؛ يجب أن يكون هناك عنصر واحد فقط بمعرف معين في مستند HTML.
لتحديد عنصر عن طريق الـ id، نقوم بكتابة علامة (#) متبوعًا بإسم المعرف id. كالتالى:
#demo {
color: blue;
}
5. محددات التجميع – Grouping selectors
يقوم محدد التجميع بتحديد جميع عناصر HTML بنفس تعريفات الأنماط.
فى أوقات كتيرة سيكون لديك عناصر كثيرة لها نفس التنسيق فسوف تحتاج إلى عمل group لهذه العناصر معًا وإعطائهم نفس التنسيق، بدل ما تكرر التنسيق فى كل عنصر على حده.
مثال للتوضيح:
p, span, #header, .demo {
font-size: 17px;
}
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!