[الدرس الثاني] محددات Css

[Admin]

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



أكمل معكم بدرس جديد من دورة أكواد css واللي قلت رح اخلصها بشهر6 والحمدلله صرنا في نصف 7 ولسا الدرس الثاني

ما علينا نكمل في محددات css

يتم استخدام محددات CSS "للعثور" (أو تحديد) عناصر HTML التي تريد تصميمها.

يمكننا تقسيم محددات CSS إلى خمس فئات:

المحددات البسيطة (حدد العناصر بناءً على الاسم والمعرف والفئة)

محددات الدمج (حدد العناصر بناءً على علاقة محددة بينها)

محددات من فئة زائفة (حدد العناصر بناءً على حالة معينة)

محددات العناصر الزائفة (حدد وأسلوب جزء من عنصر)

محددات السمات (حدد العناصر بناءً على سمة أو قيمة سمة) 

ملاحظة : قمت بشرح عدد من فئات المحددات في مواضيع منفصلة

محدد عنصر CSS

مثال

هنا ، سيتم محاذاة جميع عناصر
على الصفحة مع لون نص أحمر:

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 محددة فقط يجب أن تتأثر بمحدد معين.

مثال

في هذا المثال ، ستتم محاذاة
فقط العناصر ذات class = "center":

p.center {
  text-align: center;
  color: red;
}

يمكن أن تشير عناصر HTML أيضًا إلى أكثر من فئة واحدة.

مثال

في هذا المثال ، سيتم تصميم عنصر
وفقًا class = "center" وإلى class = "large":

<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;
}

وهيك بنكون انهينا الشرح لهذا الدرس

اي استفسار لا تتردد في عرضه بالردود

جميع الحقوق محفوظة لـشركة انكور التطويرية

بالتوفيق للجميع

والسلام ختام​

 

[zoolraqey]

جزاك الله خيرا درس جميل ومختصر