أكمل معكم بدرس جديد من دورة أكواد css واللي قلت رح اخلصها بشهر6 والحمدلله صرنا في نصف 7 ولسا الدرس الثاني
ما علينا نكمل في محددات css
يتم استخدام محددات CSS "للعثور" (أو تحديد) عناصر HTML التي تريد تصميمها.
يمكننا تقسيم محددات CSS إلى خمس فئات:
المحددات البسيطة (حدد العناصر بناءً على الاسم والمعرف والفئة)
محددات الدمج (حدد العناصر بناءً على علاقة محددة بينها)
محددات من فئة زائفة (حدد العناصر بناءً على حالة معينة)
محددات العناصر الزائفة (حدد وأسلوب جزء من عنصر)
محددات السمات (حدد العناصر بناءً على سمة أو قيمة سمة)
ملاحظة : قمت بشرح عدد من فئات المحددات في مواضيع منفصلة
محدد عنصر CSS
مثال
هنا ، سيتم محاذاة جميع عناصر [p] على الصفحة مع لون نص أحمر:
CODE
p {<br />
text-align: center;<br />
color: red;<br />
}<br />
<br />
محدد CSS id
يستخدم محدد المعرف سمة المعرف لعنصر HTML لتحديد عنصر معين.
يكون معرف العنصر فريدًا داخل الصفحة ، لذلك يتم استخدام محدد الهوية لتحديد عنصر واحد فريد!
لتحديد عنصر بمعرف معين ، اكتب حرف التجزئة (#) ، متبوعًا بمعرف العنصر.
مثال
سيتم تطبيق قاعدة CSS أدناه على عنصر HTML بالمعرف = "para1":
CODE
#para1 {<br />
text-align: center;<br />
color: red;<br />
}<br />
<br />
ملاحظة: لا يمكن أن يبدأ اسم المعرف برقم!
محدد فئة CSS
يقوم محدد الفئة بتحديد عناصر HTML بسمة فئة معينة.
لتحديد عناصر من فئة معينة ، اكتب حرف نقطة (.) ، متبوعًا باسم الفئة.
مثال
في هذا المثال ، ستكون جميع عناصر HTML ذات class = "center" باللون الأحمر ومحاذية للمركز:
CODE
.center {<br />
text-align: center;<br />
color: red;<br />
}<br />
<br />
يمكنك أيضًا تحديد أن عناصر HTML محددة فقط يجب أن تتأثر بمحدد معين.
مثال
في هذا المثال ، ستتم محاذاة [p] فقط العناصر ذات class = "center":
CODE
p.center {<br />
text-align: center;<br />
color: red;<br />
}<br />
<br />
يمكن أن تشير عناصر HTML أيضًا إلى أكثر من فئة واحدة.
مثال
في هذا المثال ، سيتم تصميم عنصر [p] وفقًا class = "center" وإلى class = "large":
CODE
<p class="center large">This paragraph refers to two classes.</p>
ملاحظة: لا يمكن أن يبدأ اسم الفئة برقم!
محدد CSS العالمي
يقوم المحدد العام (*) بتحديد جميع عناصر HTML على الصفحة.
مثال
ستؤثر قاعدة CSS أدناه على كل عنصر HTML في الصفحة:
CODE
* {<br />
text-align: center;<br />
color: blue;<br />
}<br />
<br />
محدد تجميع CSS
يقوم محدد التجميع بتحديد جميع عناصر HTML بنفس تعريفات الأنماط.
انظر إلى كود CSS التالي (عناصر h1 و h2 و p لها نفس تعريفات الأنماط):
CODE
h1 {<br />
text-align: center;<br />
color: red;<br />
}<br />
<br />
h2 {<br />
text-align: center;<br />
color: red;<br />
}<br />
<br />
p {<br />
text-align: center;<br />
color: red;<br />
}<br />
<br />
سيكون من الأفضل تجميع المحددات لتقليل الشفرة.
لتجميع المحددات ، قم بفصل كل محدد بفاصلة.
مثال
في هذا المثال ، قمنا بتجميع المحددات من الرمز أعلاه:
CODE
h1, h2, p {<br />
text-align: center;<br />
color: red;<br />
}<br />
<br />
وهيك بنكون انهينا الشرح لهذا الدرس
اي استفسار لا تتردد في عرضه بالردود
جميع الحقوق محفوظة لـلمشاهدة الروابط يلزمك التسجيل
بالتوفيق للجميع
والسلام ختام