logo

أهلا وسهلا بك زائرنا الكريم في أرشيف انكور، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .





14-07-2020 03:50 مساءً
معلومات الكاتب ▼
تاريخ الإنضمام : 15-01-2020
رقم العضوية : 1
المشاركات : 2235
الدولة : فلسطين
الجنس :
تاريخ الميلاد : 11-9-1998
الدعوات : 18
قوة السمعة : 440
موقعي : زيارة موقعي

بسم الله الرحمن الرحيم

أكمل معكم بدرس جديد من دورة أكواد 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
وهيك بنكون انهينا الشرح لهذا الدرس
اي استفسار لا تتردد في عرضه بالردود
جميع الحقوق محفوظة لـلمشاهدة الروابط يلزمك التسجيل
بالتوفيق للجميع
والسلام ختام
توقيع :Admin
للتواصل مع الادارة بشأن اي موضوع : لمشاهدة الروابط يلزمك التسجيل



look/images/icons/i1.gif [الدرس الثاني] محددات Css
  24-07-2020 08:51 صباحاً   [1]
معلومات الكاتب ▼
تاريخ الإنضمام : 23-07-2020
رقم العضوية : 249
المشاركات : 161
الجنس :
تاريخ الميلاد : 27-10-1998
الدعوات : 1
قوة السمعة : 20
جزاك الله خيرا درس جميل ومختصر

اضافة رد جديد اضافة موضوع جديد



المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
[الدرس الثالث] شرح تركيب واجه للمواقع الجديدة Admin
5 1073 ditender
[الدرس الاول] تعرف على الموقع Admin
1 702 Admin
[الدرس الاول] شرح حجز نطاق مجاني وحجز الاستضافة Admin
15 2058 samehwsh
[الدرس العاشر] شرح تغيير القالب الخاص باستضافتك Admin
4 1007 Admin
[الدرس الرابع] شرح اضافة دومين اضافي للاستضافة Admin
1 843 Admin

الكلمات الدلالية
الدرس ، الثاني ، محددات ، Css ،









الساعة الآن 08:40 PM