الخطوات العملية:
- استخدم محددات العناصر (محددات العلامات): تستهدف عنصر HTML محددًا، على سبيل المثال
<h1>.
- استخدم محددات الفئات: تستهدف العناصر التي تحتوي على فئة CSS محددة، على سبيل المثال
.header.
- استخدم محددات الهويات: تستهدف عنصرًا فريدًا يحتوي على هوية CSS محددة، على سبيل المثال
main-content#
- استخدم محددات السمات: تستهدف عناصر تحتوي على سمات محددة، على سبيل المثال
input[type="text"].
- استخدم الفئات الزائفة: تستهدف عناصر في حالات محددة، على سبيل المثال
:hover تستهدف العنصر عند تحريك الماوس فوقه.
- استخدم العناصر الزائفة: تستهدف أجزاء محددة من عنصر، على سبيل المثال
::first-line تستهدف السطر الأول من النص.
- استخدم المجمِّعات: تربط محددات مختلفة لاستهداف عناصر محددة، على سبيل المثال
div > p يستهدف فقرات داخل أقسام.
مثال على CSS:
h1 {
color: blue;
font-size: 2em;
}
هذا المثال يستخدم محدد العلامة h1 لاستهداف كل عناصر العنوان <h1> في المستند ويجعلها زرقاء مع حجم خط ضعف الحجم الافتراضي.
ملاحظة:
لتحسين إمكانية الوصول، استخدم محددات السمات لتمييز عناصر معينة مثل [aria-label] و [role]، وتمكين المستخدمين من التفاعل مع الواجهة عن طريق لوحة مفاتيح أو قارئ شاشة.