CSS 是一种格式化网页的标准方式，它拓展了 HTML 的功能，使网页设计者能够以更有效、更易维护的方式设置网页格式。CSS 功能强大，CSS 的样式设定功能比 HTML 多，几乎可以定义所有的网页元素。
二、CSS 是什么
CSS 即层叠样式表（Cascading Style Sheets），是一种用于描述网页文档（如 HTML 或 XML）外观和格式的样式表语言。它主要用于将网页内容的呈现（外观）和结构（内容）分离，从而实现更灵活、更高效的网页设计。
CSS 能够对文本的字体、颜色、大小、行间距等进行设置，还能为元素添加背景颜色、背景图片，设置元素的边框样式、圆角效果等，让网页更美观。例如：
|
1 2 3 4 |
p { color: blue; font-size: 16px; } |
在 CSS 里，注释是用来给代码添加说明或者解释的内容，浏览器会忽略这些注释内容。CSS 注释有且只有一种格式 /**/ ：
|
1 2 3 4 5 6 7 8 9 10 |
/* 这是一个单行的CSS注释 */ p { /* 为段落文本设置颜色为蓝色 */ color: blue; /* 这是一个多行注释 这里可以写更多的说明内容 */ font-size: 16px; } |
三、CSS 引入方式
1、行内样式
行内样式也叫内联样式，是各种引用 CSS 方式中最直接的一种。行内样式就是通过直接设置各个元素的 style 属性，从而达到设置样式的目的。行内样式的格式为：
|
1 |
<标签 style="属性: 属性值;"> |
2、内部样式表
内部样式表是指样式表的定义处于 HTML 文件一个单独的区域，与 HTML 的内容和结构标签分离开来，从而实现对整个页面范围的内容、结构和表现进行统一的控制和管理。
内部样式表处于页面的 <head> 与 </head> 标签之间，内部样式表的格式为：
|
1 2 3 4 5 6 7 |
<head> <style> 标签 { 属性: 属性值; } </style> </head> |
3、链入外部样式表
外部样式表把声明的样式存放在独立的样式文件（.css 文件）中，当页面需要使用样式时，通过 < link >标签外链接外部样式表的文件即可。使用外部样式表，改变一个文件就能改变整个站点的外观。
①用< link >标签链接样式表文件
< link >标签必须放到页面的<head> ...</head> 标签对内。其格式为：
|
1 2 3 4 5 |
<head> ... <link rel="stylesheet" href="外部样式表文件名.css"> ... </head> |
其中，rel 属性用于指定链接的文档与当前文档的关系，当链入外部样式表时，它的值需设为 “ stylesheet ”；href 属性用于指定外部 CSS 文件的路径，可以是相对路径，也可以是绝对路径。
②样式表文件的格式
样式表文件可以用任何文本编辑器（如记事本）打开并编辑，一般样式表文件的扩展名为 .css 。样式表文件的内容是定义的样式表，不包含 HTML 标签。样式表文件的格式为：
|
1 2 3 4 5 |
?选择器 { 属性1: 属性值1; 属性2: 属性值2; /* 可以有更多属性 */ } |
四、CSS 选择符（选择器）
基本选择符包括标签选择符、class 类选择符和 id 选择符。
1、标签选择符
CSS 中的标签选择符（也称为元素选择器）是最基础的选择符类型，它通过 HTML 标签的名称来选择页面中所有该类型的元素，并为这些元素应用统一的样式。语法如下：
|
1 2 3 4 |
标签名 { 属性: 属性值; /* 可以有更多的属性 - 值对 */ } |
2、class 类选择符
在 CSS 里，class 类选择符是一种极为实用的选择符，它能够依据元素的 class 属性值来选择元素并应用样式。类选择符以点号（.）开头，后面紧跟类名，语法如下：
|
1 2 3 4 |
.class-name { 属性: 属性值; /* 可以有更多属性 - 值对 */ } |
3、id 选择符
在 CSS 里，id 选择符是一种用于精准选择特定元素的选择器，它依据元素的 id 属性值来定位元素。id 选择符以井号（#）开头，后面紧跟元素的 id 属性值，语法如下：
|
1 2 3 4 |
#id-name { 属性:属性值; /* 可添加更多的属性 - 值对 */ } |
五、练习
1、练习一下三种 CSS 引入方式
示例代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css三种引入方式</title> <style> h3{ color: blue; font-size: 30px; font-family: 宋体; } </style> <link rel="stylesheet" href="styles.css"> </head> <body> <h2 style="color: brown; font-size: 30px; font-family:楷体"> 测试CSS的引入方式：行内式 </h2> <h3> 测试CSS的引入方式：内嵌式 </h3> <h4> 测试CSS的引入方式：外链式 </h4> </body> </html> |
运行结果：
2、练习一下 CSS 三种选择符
示例代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* 标签选择器 */ p { color: blue; } /* 类选择器 */ .red-text { color: red; } /* id选择器 */ #green-text { color: green; } </style> </head> <body> <p>这是使用标签选择器设置为蓝色的文本。</p> <span class="red-text">这是使用类选择器设置为红色的文本。</span> <p id="green-text">这是使用id选择器设置为绿色的文本。</p> </body> </html> |
运行结果：
