الألوان والخلفيات
جزء من قسم 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)تحدي المراجعة