style.css

/* style.css 示例代码 */

/* 设置全局字体和行高 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* 设置标题样式 */
h1, h2, h3 {
    color: #333;
    margin-bottom: 10px;
}

/* 设置链接样式 */
a {
    color: #007BFF;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* 设置段落样式 */
p {
    margin-bottom: 15px;
}

/* 设置按钮样式 */
button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

/* 设置容器样式 */
.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

/* 解释说明：
1. `body` 样式设置了全局字体和行高，使页面内容更加易读。
2. `h1`, `h2`, `h3` 设置了标题的颜色和底部间距，确保标题之间的间距一致。
3. `a` 和 `a:hover` 设置了链接的样式，包括默认颜色和悬停时的效果。
4. `p` 设置了段落的底部间距，使段落之间有适当的间隔。
5. `button` 和 `button:hover` 设置了按钮的背景颜色、文字颜色、边框、内边距以及悬停效果。
6. `.container` 设置了一个居中的容器，具有固定的宽度、内边距、背景颜色和边框，用于布局内容。 */