مقدمة في المحددات

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 10 من 76.

في CSS، تعتبر المحددات (selectors) أنماطاً تُستخدم لتحديد عناصر HTML التي تريد تنسيقها. فهي جزء أساسي من قواعد CSS، لأنها تحدد العناصر التي سيتم تطبيق الأنماط عليها.

هناك أنواع مختلفة من المحددات (selectors)، كل منها يستهدف العناصر بطرق مختلفة. إن فهم المحددات أمر أساسي لإتقان CSS وإنشاء صفحات ويب منسقة بشكل جيد.

إليك قاعدة CSS أساسية مع محدد:

selector {
    property: value;
}

selector: يستهدف عناصر HTML التي سيتم تنسيقها.
property: خاصية التنسيق التي تريد تغييرها (على سبيل المثال، color، font-size).
value: القيمة التي تريد تعيينها للخاصية (على سبيل المثال، blue، 16px).

على سبيل المثال:

p {
    color: blue;
    font-size: 16px;
}

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

التحدي

سهل

لقد تم تزويدك بمستند HTML. استخدم CSS داخلي لتنسيق المستند بالخصائص التالية:

قم بتعيين لون الخلفية لجميع عناوين h1 إلى green.
قم بتعيين لون النص لجميع عناوين h1 إلى white.
قم بتعيين حجم الخط لجميع الفقرات (p) إلى 18px.

لقد تم تزويدك بكود CSS مبدئي لذلك.

ورقة مرجعية

تُعد محددات CSS أنماطاً تُستخدم لتحديد عناصر HTML التي ترغب في تنسيقها. فهي تحدد العناصر التي سيتم تطبيق الأنماط عليها.

الهيكل الأساسي لقاعدة CSS:

selector {
    property: value;
}

selector: يستهدف عناصر HTML المراد تنسيقها
property: خاصية التنسيق التي تريد تغييرها (على سبيل المثال: color، font-size)
value: القيمة التي تريد تعيينها للخاصية (على سبيل المثال: blue، 16px)

مثال يستهدف جميع عناصر الفقرة (paragraph):

p {
    color: blue;
    font-size: 16px;
}

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
    <style>
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>John Doe</h1>
    <p>Web Developer</p>
</body>
</html>