الكورس

Advertisements

المحددات فى CSS وأنواعها | CSS Selectors


سنتناقش فى هذا الفصل المحددات فى CSS وأنواعها بالتفصيل.


 

المحددات فى CSS

 

تُستخدم محددات CSS لتحديد عناصر HTML التي تريد تصميمها.

 


 

1. المحدد العام – Universal selector

 

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

 

مثال للتوضيح:

* {
  font-size: 16px;
  color: black;
}

فى المثال السابق سيتم تنفيذ التنسيق على جميع عناصر الـ HTML.


 

2. محدد النوع – Type Selector

 

يقوم محدد النوع/العنصر بتحديد عناصر HTML بناءً على اسم العنصر. على سبيل المثال:

span {
  color: white;
  font-weight: bold;
}

فى المثال السابق، العنصر <span> سيتم تطبيق التنسيق المعطى له وهو جعل لونه color “أبيض” وحجم الخط font-weight “سميك”. 


 

3. محدد الفئة – Class selector

 

تحديد كافة العناصر التي لها سمة Class معينة،

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

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Selectors</title>
        <meta charset="UTF-8" />

        <style>
            .demo {
                color: blue;
            }
        </style>
    </head>
    <body>

        <h2 class="demo">CSS Selectors</h2>

    </body>
</html>

CSS Selectors

فى المثال السابق، جميع العناصر اللى واخده “class=”blue هيبتغير لونها إلى أزرق. لكن فى حالة إحتياجك إلى تحديد فئة class معينة، فيمكنك القيام بذلك كما هو موضح فى المثال التالى:

h2.demo {
  color: blue;
}

التنسيق الموجود فى المثال السابق سيتم تنفيذه على أى h2 بداخله class بقيمة demo فقط.


 

4. محدد المُعرف – ID Selector

 

لتحديد عنصر بناءً على قيمة سمة الـ id؛ يجب أن يكون هناك عنصر واحد فقط بمعرف معين في مستند HTML.

لتحديد عنصر عن طريق الـ id، نقوم بكتابة علامة (#) متبوعًا بإسم المعرف id. كالتالى:

#demo {
  color: blue;
}

Advertisements

 

5. محددات التجميع – Grouping selectors

 

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

فى أوقات كتيرة سيكون لديك عناصر كثيرة لها نفس التنسيق فسوف تحتاج إلى عمل group لهذه العناصر معًا وإعطائهم نفس التنسيق، بدل ما تكرر التنسيق فى كل عنصر على حده.

 

مثال للتوضيح:

p, span, #header, .demo {
  font-size: 17px;
}


الإبلاغ عن خطأ

×

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

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements