在网页开发中，HTML 负责页面的内容结构，而 CSS（层叠样式表）则负责让这些内容看起来更加美观、有吸引力。通过合理使用 CSS 选择器、布局和样式表，你可以轻松提升页面的视觉效果，使它更具层次感和美感。

在这篇文章中，我们将从基础到高级，逐步教你如何用 CSS 让页面变得美观又有层次。

一、CSS 的基础知识：选择器

CSS 选择器是定位 HTML 元素并为其应用样式的核心工具。掌握选择器的使用方法是提升页面美观的第一步。

1. 基本选择器

o 标签选择器：根据 HTML 标签名选择元素，例如 p { color: blue; }。

o 类选择器：通过 .class 的形式选择特定类别的元素，例如 .header { background-color: #f0f0f0; }。

o ID 选择器：通过 #id 的形式选择具有唯一 ID 的元素，例如 #main-content { margin: 20px; }。

2. 复合选择器

o 后代选择器：用于选择嵌套在某个父容器内的子元素。例如 .container .content { padding: 15px; }。

o 并集选择器：同时选中多个不同的选择器，例如 header nav, header aside { font-size: 20px; }。

3. 常用伪类选择器

o hover：用户悬停在元素上时触发样式变化，例如 a:hover { color: red; }。

o active：用户点击元素时触发样式变化，例如 button:active { transform: scale(0.95); }。

二、布局：让页面有层次感

页面的布局决定了内容的结构和视觉效果。通过合理的布局设计，可以让页面更加美观且有层次感。

1. Flexbox 布局

Flexbox（弹性盒模型）是现代网页布局的核心技术之一。它可以帮助你轻松实现复杂的排版需求。

基本使用方法：

.container {
display: flex;
justify-content: space-between; /* 水平对齐方式 */
align-items: center; /* 垂直对齐方式 */
flex-wrap: wrap; /* 允许元素换行 */
}

示例：使用 Flexbox 实现多列布局

<div class="container">
<div class="item">Item 1