HTML和CSS代码示例：中华特色美食页面

以下代码示例展示了一个简单的HTML和CSS页面，用于创建一个展示中华特色美食的网页，包含页面标题、描述、热门菜品列表等内容。

HTML代码 (index.html):

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>欢迎来到中华特色美食</h1>
    <p class="description">探索中国美食的美味和多样性！</p>
    <h2>热门菜品</h2>
    <ul>
        <li class="dish">北京烤鸭</li>
        <li class="dish">点心</li>
        <li class="dish">火锅</li>
    </ul>
</body>
</html>

CSS代码 (styles.css):

/* 外部样式表 */

/* 设置字体样式 */
body {
    font-family: Arial, sans-serif;
}

h1 {
    font-size: 36px;
    color: #333;
    text-align: center;
}

h2 {
    font-size: 24px;
    color: #666;
    margin-top: 20px;
}

.description {
    font-size: 18px;
    color: #999;
    text-align: center;
}

/* 设置段落文本样式 */
 p {
    font-size: 16px;
    line-height: 1.5;
    color: #555;
}

/* 设置背景样式 */
body {
    background-color: #f2f2f2;
}

.dish {
    font-weight: bold;
    color: #333;
}

/* 内部样式表 */
<style>
    /* 设置字体样式 */
    h1 {
        font-family: '宋体', sans-serif;
    }

    /* 设置段落文本样式 */
    p {
        font-style: italic;
        text-align: justify;
    }

    /* 设置背景样式 */
    body {
        background-image: url('background.jpg');
        background-size: cover;
    }
</style>

如何使用代码：

将上述HTML代码保存为index.html文件。
将CSS代码保存为styles.css文件，并确保它与index.html文件位于同一目录下。
在index.html文件中的 <head> 部分，使用 <link> 标签引入styles.css文件。

例如：

<link rel="stylesheet" type="text/css" href="styles.css">

在浏览器中打开index.html文件，即可查看效果。