الألوان والخلفيات
جزء من قسم Styling with CSS في رحلة HTML على Coddy. الدرس 32 من 76.
التحدي
سهلفي هذه المهمة، ستقوم بتخصيص ألوان الخلفية لأقسام مختلفة من قائمة المقهى. استخدم إبداعك لاختيار ألوان تجعل القائمة جذابة بصرياً!
اتبع الخطوات أدناه:
- قم بتطبيق لون خلفية على الصفحة بأكملها (
body). اختر أي لون يناسب طابع المقهى. - قم بتطبيق لون خلفية ولون نص على التذييل (
footer) بحيث يكملان التصميم العام للصفحة. - لا تتردد في تغيير لون أي عناصر أخرى لتحسين الأنماط.
جرّب بنفسك
<html>
<head>
<title>Café Menu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Café Delight</h1>
<p class="welcome">Welcome to our café! Enjoy a delicious meal.</p>
</header>
<div class="menu-category">
<h2>Appetizers</h2>
<ul>
<li>
<p class="dish-name">Bruschetta $5.99</p>
</li>
<li>
<p class="dish-name">Garlic Bread $3.50</p>
</li>
</ul>
</div>
<div class="menu-category">
<h2>Main Courses</h2>
<ul>
<li>
<p class="dish-name">Spaghetti Carbonara $12.99</p>
</li>
<li>
<p class="dish-name">Grilled Chicken Salad $9.99</p>
</li>
</ul>
</div>
<div class="menu-category">
<h2>Desserts</h2>
<ul>
<li>
<p class="dish-name">Chocolate Cake $4.99</p>
</li>
<li>
<p class="dish-name">Cheesecake $5.49</p>
</li>
</ul>
</div>
<footer>
<p>© 2025 Café Delight - All rights reserved</p>
</footer>
</body>
</html>جميع دروس Styling with CSS
4أساسيات النصوص
لون النصعائلة الخطحجم الخطسمك الخطمحاذاة النصزخرفة النصتحدي المراجعة رقم 1تحدي المراجعة رقم 27نموذج الصندوق - الجزء الأول
ما هو نموذج الصندوق؟المسافات الداخلية (Padding)الهوامش (Margins)الحدود (Borders)العرض والارتفاعتحدي المراجعة
8نموذج الصندوق (Box Model) - الجزء الثاني
تحجيم الصندوق (Box Sizing)حواف العناصر (Border Radius)التدفق الزائد (Overflow)ظل الصندوق (Box Shadow)تحدي المراجعةتدرّب بنفسك: Playground لـ Web