محدد النوع

جزء من قسم التنسيق باستخدام CSS في رحلة HTML على Coddy. الدرس 11 من 76.

يستهدف محدد النوع، المعروف أيضاً باسم محدد العنصر أو محدد الوسم، عناصر HTML بناءً على أسماء الوسوم الخاصة بها. وهو أحد أبسط وأهم المحددات الأساسية في CSS.

إليك بناء الجملة الأساسي لاستخدام محدد النوع (type selector):

tagname {
    property: value;
}

tagname: اسم وسم HTML الذي تريد تنسيقه (على سبيل المثال، p، h1، div).
property: خاصية CSS التي تريد تعيينها (على سبيل المثال، color، font-size).
value: القيمة التي تريد تعيينها للخاصية (على سبيل المثال، blue، 16px).

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

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

في هذا المثال، يقوم محدد النوع p باستهداف جميع عناصر <p> (الفقرة) في مستند HTML. تحدد التصريحات لون النص باللون الأزرق وحجم الخط بـ 16 بكسل لجميع الفقرات.

التحدي

سهل

لقد تم إعطاؤك مستند HTML يحتوي على عناصر متنوعة، بما في ذلك العناوين (<h1>، <h2>)، والفقرات (<p>)، والأقسام (<div>). مهمتك هي استخدام محددات النوع (type selectors) لتنسيق هذه العناصر. اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف جميع عناصر <h1>. قم بتعيين لون النص لعناوين <h1> إلى darkred.
اكتب قاعدة CSS تستهدف جميع عناصر <h2>. قم بتعيين لون النص لعناوين <h2> إلى green.
اكتب قاعدة CSS تستهدف جميع عناصر <p>. قم بتعيين لون النص للفقرات إلى blue وحجم الخط إلى 18 بكسل.
اكتب قاعدة CSS تستهدف جميع عناصر <div>. قم بتعيين لون الخلفية للأقسام إلى lightblue.

جرّب بنفسك

<html>
<head>
    <title>Type Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>