شاركـ أصدقائك

كورس CSS | شرح Selectors | موقع فولدرات

الرئيسية / الحاسب الآلي / لغات البرمجة / CSS / كورس CSS | شرح Selectors

القرآن الكريم كامل المصحف الذكي (جديد) , المصحف النصي

شرح كورس اكواد بالعربي للمبتدئين css

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

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

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

تشرح هذه الصفحة محددات CSS الأساسية.

محدد عنصر CSS

يحدد محدد العنصر عناصر HTML بناءً على اسم العنصر.

مثال:

هنا ، ستتم محاذاة جميع عناصر

في الصفحة إلى المنتصف ، بلون الأزرق للنص:



<html>
<head>
<style>
p {
  text-align: center;
  color:blue;
} 
</style>
</head>
<body>
 
<p>.ستتأثر كل فقرة بالأسلوب معين</p>
<p id="para1">نعم</p>
<p>لا</p>
 
</body>
</html>

النتيجة كالآتي:

محدد معرف CSS

يستخدم محدد المعرف السمة id لعنصر HTML لتحديد عنصر معين.

يكون معرف العنصر فريدًا داخل الصفحة، لذا يتم استخدام محدد المعرف لتحديد عنصر فريد واحد!

لتحديد عنصر بمعرف محدد ، اكتب حرف التجزئة (#) ، متبوعًا بمعرف العنصر.

مثال:


<html>
<head>
<style>
#para1 {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>
 
<p id="para1">!مرحبا</p>
<p>(style) هذه الفقرة لا تتأثر بالنمط</p>
 
</body>
</html>
</body>
</html>

النتيجة كالآتي:

ملاحظة: لا يمكن أن يبدأ اسم المعرف برقم!

محدد فئة CSS

يحدد محدد الفئة عناصر HTML مع سمة فئة معينة.

لتحديد عناصر بفئة معينة ، اكتب حرف نقطة (.) متبوعًا باسم الفئة.

مثال:


<html>
<head>
<style>
.center {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>
 
<h1 class="center">عنوان أزرق - في الوسط</h1>
<p class="center">فقرة زرقاء - في الوسط</p> 
 
</body>
</html>

النتيجة كالآتي:

يمكنك أيضًا تحديد أن عناصر HTML محددة فقط هي التي يجب أن تتأثر بفئة.

مثال:

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

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

مثال:

في هذا المثال ، سيتم تصميم العنصر

وفقًا للفئة = "center" وللفئة = "large":

<p class="center large">تشير هذه الفقرة إلى فئتين.</p>

ملاحظة: لا يمكن أن يبدأ اسم الفصل برقم!

المحدد العام CSS

يحدد المحدد العام (*) جميع عناصر HTML على الصفحة.

مثال:


<html>
<head>
<style>
* {
  text-align: center;
  color: red;
}
</style>
</head>
<body>
 
<h1>!مرحبا</h1>
 
<p>سيتأثر كل عنصر في الصفحة بالنمط</p>
<p id="para1">نعم</p>
<p>حسنا</p>
 
</body>
</html>

النتيجة كالآتي:

محدد تجميع CSS

يحدد محدد التجميع جميع عناصر HTML بنفس تعريفات الأنماط.

انظر إلى كود CSS التالي (العناصر h1 و h2 و p لها نفس تعريفات النمط):

h1 {
  text-align: center;
  color: blue;
}
 
h2 {
  text-align: center;
  color: red;
}
 
p {
  text-align: center;
  color: red;
}

سيكون من الأفضل تجميع المحددات لتقليل الكود.

لتجميع المحددات ، افصل بين كل محدد بفاصلة.

مثال:


<html>
<head>
<style>
h1, h2, p {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>
 
<h1>!مرحبا</h1>
<h2>عنوان صغير</h2>
<p>الفقرة</p>
 
</body>
</html>

النتيجة كالآتي:

جميع محددات CSS البسيطة

المحدد	مثال	وصف مثال
class.	intro.	لتحديد كل العناصر باستخدام "class="intro
id#	firstname#	لتحديد العنصر بـ "id="firstname
*	*	لتحديد كل العناصر
element	p	لتحديد كافة عناصر
element,element	div, p	لتحديد جميع عناصر وجميع عناصر