排版基础

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

挑战

简单

在这个项目中，你会运用已经学过的 CSS 技能，创建并设计一个咖啡馆菜单。你会练习使用不同的字体、字号和对齐方式来设置文本样式。你还会通过设置背景色和文本颜色来改进设计，让菜单更美观。

在这个项目中，我们使用外部 CSS 文件为 HTML 文档设置样式。你会看到两个文件：HTML 文件和已经为你关联好的 CSS 文件。

在这个任务中，你将应用样式来更改字体系列和文本对齐方式。

按照以下步骤操作：

将字体系列设置为 Tahoma, Geneva, sans-serif，并通过选择 <body> 元素将其应用于整个页面。
为 <h1> 元素设置 text-align: center;，使标题居中对齐。
为 class 为 welcome 的 <p> 元素设置 text-align: center;，使介绍文本居中对齐。

亲手试试

<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>