一、CSS概述
CSS（层叠样式表）是一种用于描述HTML文档样式的语言，它允许开发者通过添加样式来控制网页的外观和格式。CSS与HTML紧密协作，使得网页不仅具有结构，还拥有丰富的视觉表现力。
1.1 CSS的作用
页面外观美化
：通过CSS，我们可以轻松改变网页的字体、颜色、背景等，使页面更加美观。
布局和定位
：CSS提供了强大的布局功能，如浮动、定位等，帮助我们精确地安排网页元素的位置。
响应式设计
：CSS3引入了媒体查询等技术，使得网页能够适应不同的屏幕尺寸和设备。
1.2 CSS的引入方式
内联样式
：在HTML标签内部使用
style
属性。

内部样式
：在

标签内使用

外部样式
：通过 标签引入外部CSS文件。 二、CSS选择器
选择器用于指定要应用样式的HTML元素。常见的CSS选择器包括：
元素选择器
：选择所有指定类型的元素。
div { color: red; } /* 选择所有div元素 */
类选择器
：选择所有具有指定类名的元素。
.my-class { color: red; } /* 选择所有class为my-class的元素 */
ID选择器
：选择具有指定ID的元素。
#my-id { color: red; } /* 选择ID为my-id的元素 */
属性选择器
：选择具有指定属性的元素。
[type="text"] { color: red; } /* 选择所有type属性为text的元素 */
三、CSS属性
CSS属性用于定义元素的外观和行为。以下是一些常用的CSS属性：
3.1 字体属性
font-family
：设置字体类型。
body { font-family: Arial, sans-serif; }
font-size
：设置字体大小。
body { font-size: 16px; }
font-weight
：设置字体粗细。
h1 { font-weight: bold; }
3.2 文本属性
text-align
：设置文本水平对齐方式。
.text-align-center { text-align: center; }
text-indent
：设置首行缩进。
.text-indent { text-indent: 2em; }
line-height
：设置行高。
.line-height { line-height: 1.5; }
3.3 颜色属性
color
：设置文本颜色。
.text-color { color: red; }
background-color
：设置背景颜色。
.background-color { background-color: #f0f0f0; }
3.4 盒子模型
margin
：设置元素的外边距。
.margin { margin: 10px; }
padding
：设置元素的填充。
.padding { padding: 10px; }
border
：设置元素的边框。
.border { border: 1px solid black; }
四、CSS的工作原理
当浏览器解析HTML文档时，它会将HTML元素转换为DOM树。然后，浏览器会根据CSS规则来应用样式。CSS规则按照以下顺序应用：
浏览器默认样式。
用户自定义样式。
页面内部样式。
外部样式。
五、CSS选择器的优先级
CSS选择器的优先级由以下因素决定：
选择器的特殊性。
选择器的顺序。
六、案例分析与实践
以下是一个简单的网页美化案例：

在这个案例中，我们使用了CSS来设置网页的字体、颜色、背景等样式，使网页看起来更加美观。
七、总结
通过学习CSS，我们可以轻松地美化网页，提升用户体验。掌握CSS选择器和属性，以及了解CSS的工作原理，将有助于我们更好地驾驭DOM，实现网页美化的目标。