تحدي التحديد
جزء من قسم 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)تحدي المراجعةتدرّب بنفسك: Playground لـ Web