Menu
CoddyTech

文本样式

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 31 课,共 76 课。

challenge icon

挑战

简单

在这个任务中,你将为页面上的不同元素自定义字体大小、颜色和装饰。 

请按照以下步骤操作:

  1. 将 <h1> 元素的字体大小设为 36px,并应用 underline 装饰。
  2. 将类名为 welcome 的元素的字体粗细设为 700。
  3. 将 <h2> 元素(类别标题)的字体大小设为 24px,字体颜色设为你选择的任意颜色(不能是黑色)。
  4. 将类名为 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>&copy; 2025 Café Delight - All rights reserved</p>
    </footer>
</body>
</html>

使用 CSS 添加样式中的所有课

自己练习: Web 在线编辑器