أرشيف انكور
(نسخة قابلة للطباعة من الموضوع)
https://archive.iinkor.com/t1008
أنقر هنا لمشاهدة الموضوع بهيئته الأصلية

[الدرس الثاني] محددات Css
Admin 14-07-2020 03:50 مساءً
بسم الله الرحمن الرحيم

أكمل معكم بدرس جديد من دورة أكواد css واللي قلت رح اخلصها بشهر6 والحمدلله صرنا في نصف 7 ولسا الدرس الثاني blushing
ما علينا نكمل في محددات css
يتم استخدام محددات CSS "للعثور" (أو تحديد) عناصر HTML التي تريد تصميمها.
ieo10
يمكننا تقسيم محددات CSS إلى خمس فئات:
المحددات البسيطة (حدد العناصر بناءً على الاسم والمعرف والفئة)
محددات الدمج (حدد العناصر بناءً على علاقة محددة بينها)
محددات من فئة زائفة (حدد العناصر بناءً على حالة معينة)
محددات العناصر الزائفة (حدد وأسلوب جزء من عنصر)
محددات السمات (حدد العناصر بناءً على سمة أو قيمة سمة)
ملاحظة : قمت بشرح عدد من فئات المحددات في مواضيع منفصلة
ieo10
محدد عنصر CSS
مثال
هنا ، سيتم محاذاة جميع عناصر [p] على الصفحة مع لون نص أحمر:
CODE
p {<br />
&nbsp; text-align: center;<br />
&nbsp; color: red;<br />
}<br />
<br />

ieo10
محدد CSS id
يستخدم محدد المعرف سمة المعرف لعنصر HTML لتحديد عنصر معين.
يكون معرف العنصر فريدًا داخل الصفحة ، لذلك يتم استخدام محدد الهوية لتحديد عنصر واحد فريد!
لتحديد عنصر بمعرف معين ، اكتب حرف التجزئة (#) ، متبوعًا بمعرف العنصر.
مثال
سيتم تطبيق قاعدة CSS أدناه على عنصر HTML بالمعرف = "para1":
CODE
#para1 {<br />
&nbsp; text-align: center;<br />
&nbsp; color: red;<br />
}<br />
<br />

ملاحظة: لا يمكن أن يبدأ اسم المعرف برقم!
ieo10
محدد فئة CSS
يقوم محدد الفئة بتحديد عناصر HTML بسمة فئة معينة.
لتحديد عناصر من فئة معينة ، اكتب حرف نقطة (.) ، متبوعًا باسم الفئة.
مثال
في هذا المثال ، ستكون جميع عناصر HTML ذات class = "center" باللون الأحمر ومحاذية للمركز:
CODE
.center {<br />
&nbsp; text-align: center;<br />
&nbsp; color: red;<br />
}<br />
<br />

ieo10
يمكنك أيضًا تحديد أن عناصر HTML محددة فقط يجب أن تتأثر بمحدد معين.
مثال
في هذا المثال ، ستتم محاذاة [p] فقط العناصر ذات class = "center":
CODE
p.center {<br />
&nbsp; text-align: center;<br />
&nbsp; color: red;<br />
}<br />
<br />

ieo10
يمكن أن تشير عناصر HTML أيضًا إلى أكثر من فئة واحدة.
مثال
في هذا المثال ، سيتم تصميم عنصر [p] وفقًا class = "center" وإلى class = "large":
CODE
<p class="center large">This paragraph refers to two classes.</p>



ملاحظة: لا يمكن أن يبدأ اسم الفئة برقم!
ieo10
محدد CSS العالمي
يقوم المحدد العام (*) بتحديد جميع عناصر HTML على الصفحة.
مثال
ستؤثر قاعدة CSS أدناه على كل عنصر HTML في الصفحة:
CODE
* {<br />
&nbsp; text-align: center;<br />
&nbsp; color: blue;<br />
}<br />
<br />

ieo10
محدد تجميع CSS
يقوم محدد التجميع بتحديد جميع عناصر HTML بنفس تعريفات الأنماط.
انظر إلى كود CSS التالي (عناصر h1 و h2 و p لها نفس تعريفات الأنماط):
CODE
h1 {<br />
&nbsp; text-align: center;<br />
&nbsp; color: red;<br />
}<br />
<br />
h2 {<br />
&nbsp; text-align: center;<br />
&nbsp; color: red;<br />
}<br />
<br />
p {<br />
&nbsp; text-align: center;<br />
&nbsp; color: red;<br />
}<br />
<br />


سيكون من الأفضل تجميع المحددات لتقليل الشفرة.
لتجميع المحددات ، قم بفصل كل محدد بفاصلة.
مثال
في هذا المثال ، قمنا بتجميع المحددات من الرمز أعلاه:
CODE
h1, h2, p {<br />
&nbsp; text-align: center;<br />
&nbsp; color: red;<br />
}<br />
<br />

ieo10
وهيك بنكون انهينا الشرح لهذا الدرس
اي استفسار لا تتردد في عرضه بالردود
جميع الحقوق محفوظة لـلمشاهدة الروابط يلزمك التسجيل
بالتوفيق للجميع
والسلام ختام
أرشيف انكور

Copyright © 2009-2025 PBBoard® Solutions. All Rights Reserved