تحدي التحديد
جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 16 من 76.
التحدي
سهللقد تم تزويدك بمستند HTML يحتوي على عناصر متنوعة، بما في ذلك العناوين (<h1>، <h2>)، والفقرات (<p>)، وقسم (<div>)، وقائمة غير مرتبة (<ul>) مع عناصر قائمة (<li>). مهمتك هي استخدام أنواع مختلفة من المحددات (selectors) لتنسيق هذه العناصر. اتبع الخطوات أدناه:
- اكتب قاعدة CSS باستخدام محدد النوع (type selector) يستهدف جميع عناصر
<p>. قم بتعيين لون النص إلى blue وحجم الخط إلى 16 بكسل. - أضف سمة
classبالقيمة "highlight" إلى عنصر<h2>وعنصر<div>. - اكتب قاعدة CSS باستخدام محدد الفئة (class selector) يستهدف جميع العناصر التي تحمل الفئة "highlight". قم بتعيين لون الخلفية إلى yellow.
- أضف سمة
idبالقيمة "special" إلى عنصر<ul>. - اكتب قاعدة CSS باستخدام محدد المعرف (ID selector) يستهدف العنصر الذي يحمل المعرف "special". قم بتعيين لون الخلفية إلى lightgray وحجم الخط إلى 20 بكسل.
- اكتب قاعدة CSS باستخدام محدد المجموعة (group selector) يستهدف جميع عناصر
<h1>و<li>. قم بتعيين لون النص إلى red.
جرّب بنفسك
<html>
<head>
<title>Selection Challenge</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>
<p>This is another paragraph.</p>
<div>This is a division.</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>جميع دروس Styling with CSS
4أساسيات النصوص
لون النصعائلة الخطحجم الخطسمك الخطمحاذاة النصزخرفة النصتحدي المراجعة رقم 1تحدي المراجعة رقم 27نموذج الصندوق - الجزء الأول
ما هو نموذج الصندوق؟المسافات الداخلية (Padding)الهوامش (Margins)الحدود (Borders)العرض والارتفاعتحدي المراجعة
8نموذج الصندوق (Box Model) - الجزء الثاني
تحجيم الصندوق (Box Sizing)حواف العناصر (Border Radius)التدفق الزائد (Overflow)ظل الصندوق (Box Shadow)تحدي المراجعة