محددات CSS
يحدد محدد CSS عنصر (عناصر) HTML الذي تريد تنسيقه.
محددات CSS
تُستخدم محددات CSS "للبحث" (أو تحديد) عناصر HTML التي تريد تصميمها.
يمكننا تقسيم محددات CSS إلى خمس فئات:
- محددات بسيطة (حدد العناصر بناءً على الاسم والمعرف والفئة)
- محددات Combinator (حدد العناصر بناءً على علاقة محددة بينهم)
- محددات الفئة الزائفة (حدد العناصر بناءً على حالة معينة)
- محددات العناصر الزائفة (حدد ونمط جزءًا من عنصر)
- محددات السمات (حدد العناصر بناءً على سمة أو قيمة سمة)
تشرح هذه الصفحة محددات CSS الأساسية.
محدد عنصر CSS
يحدد محدد العنصر عناصر HTML بناءً على اسم العنصر.
مثال
هنا ، ستتم محاذاة جميع عناصر <p> في الصفحة إلى المنتصف ، بلون أحمر للنص:
p
{
text-align: center;
color: red;
}
محدد معرف CSS
يستخدم محدد الهوية خاصية id لعنصر HTML لتحديد عنصر معين.
معرف عنصر فريد داخل الصفحة ، لذلك يتم استخدام محدد الهوية لتحديد عنصر فريد واحد!
لتحديد عنصر بمعرف معين ، اكتب حرف التجزئة (#) ، متبوعًا بمعرف العنصر.
مثال
سيتم تطبيق قاعدة CSS أدناه على عنصر HTML بالمعرف = "para1":
#para1
{
text-align: center;
color: red;
}
ملاحظة: لا يمكن أن يبدأ اسم المعرف برقم!
محدد فئة CSS
يحدد محدد الفئة عناصر HTML بسمة فئة معينة.
لتحديد عناصر بفئة معينة ، اكتب حرف نقطة (.) ، متبوعًا باسم الفئة.
مثال
في هذا المثال ، ستتحول جميع عناصر HTML التي تحتوي على class = "center" إلى اللون الأحمر وتكون بمحاذاة الوسط:
.center {
text-align: center;
color: red;
}
يمكنك أيضًا تحديد أن عناصر HTML محددة فقط هي التي يجب أن تتأثر بفئة.
مثال
في هذا المثال فقط <p> العناصر التي تحتوي على class = "center" ستكون حمراء ومحاذاة للوسط:
p.center {
text-align: center;
color: red;
}
يمكن أن تشير عناصر HTML أيضًا إلى أكثر من فئة واحدة.
مثال
في هذا المثال ، سيتم تصميم العنصر <p> وفقًا للفئة = "center" وللفئة = "كبير":
<p class="center large">This paragraph refers to two classes.</p>
ملاحظة: لا يمكن أن يبدأ اسم الفصل برقم!
المحدد العام CSS
يحدد المحدد العام (*) جميع عناصر HTML على الصفحة.
مثال
ستؤثر قاعدة CSS أدناه على كل عنصر HTML في الصفحة:
*
{
text-align: center;
color: blue;
}
محدد تجميع CSS
يحدد محدد التجميع جميع عناصر HTML بنفس تعريفات الأنماط.
انظر إلى كود CSS التالي (العناصر h1 و h2 و p لها نفس تعريفات النمط):
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}سيكون من الأفضل تجميع المحددات لتقليل الكود.
لتجميع المحددات ، افصل بين كل محدد بفاصلة.
مثال
في هذا المثال قمنا بتجميع المحددات من الكود أعلاه:
h1, h2, p
{
text-align: center;
color: red;
}
جميع محددات CSS البسيطة
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only <p> elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |