一、CSS简介
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML文档样式的样式表语言。它能够控制网页中的文本内容、图片的形状以及版面的布局和外观显示样式。CSS的主要作用是美化网页，使网页布局更加灵活和丰富多彩。
1.1 CSS的作用
美化网页
：通过CSS，可以控制网页的字体、颜色、背景、边框等样式，使网页看起来更加美观。
布局控制
：CSS可以控制网页元素的布局，如宽度、高度、边距、对齐方式等。
提高用户体验
：通过CSS优化网页布局和样式，可以提高用户的浏览体验。
1.2 CSS与HTML的关系
CSS和HTML是网页设计的两大基础。HTML负责网页的结构和内容，而CSS负责网页的样式和外观。两者相互配合，共同构建出一个美观、实用的网页。
二、CSS基本语法
CSS的基本语法由选择器和声明组成。选择器用于指定要修改的HTML元素，声明则用于定义元素的样式。
2.1 选择器
选择器是CSS中的关键部分，它决定了样式应用于哪些元素。以下是一些常用的选择器：
元素选择器
：根据HTML元素选择样式，如
p
、
div
等。
类选择器
：根据元素的类属性选择样式，如
.class
。
ID选择器
：根据元素的ID属性选择样式，如
#id
。
后代选择器
：根据元素的关系选择样式，如
ul li
。
2.2 声明
声明由属性和值组成，用于定义元素的样式。以下是一些常用的CSS属性：
color
：设置文本颜色。
font-size
：设置字体大小。
background-color
：设置背景颜色。
margin
：设置元素的外边距。
padding
：设置元素的填充。
三、CSS引入方式
CSS的引入方式主要有以下三种：
3.1 内部样式表
内部样式表将CSS代码直接写在HTML文件的
3.2 行内样式
行内样式通过在HTML元素的
style
属性中定义样式。这种方式灵活方便，但样式和内容耦合度高，不利于维护。
这是一个红色的段落。
3.3 外部样式
外部样式将CSS代码保存在单独的CSS文件中，并通过
标签引入HTML文件。这种方式样式和内容分离，便于维护和复用。
四、CSS实战案例
以下是一个简单的CSS实战案例，通过CSS设置网页的背景颜色、字体颜色和段落间距。
这是一个设置了样式的段落。
/* style.css */
body {
background-color: #f0f0f0;
color: #333;
}
p {
margin: 20px 0;
}
通过以上案例，我们可以看到CSS在网页美化中的重要作用。掌握CSS，可以让你的网页更加美观、实用。