文本样式
本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 31 课,共 76 课。
挑战
简单在这个任务中,你将为页面上的不同元素自定义字体大小、颜色和装饰。
请按照以下步骤操作:
- 将
<h1>元素的字体大小设为36px,并应用underline装饰。 - 将类名为
welcome的元素的字体粗细设为700。 - 将
<h2>元素(类别标题)的字体大小设为24px,字体颜色设为你选择的任意颜色(不能是黑色)。 - 将类名为
dish-name的元素的字体颜色设为你选择的任意颜色(不能是黑色)。
亲手试试
<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>使用 CSS 添加样式中的所有课
自己练习: Web 在线编辑器