CSS 技术
浏览本篇文章前可以先看之前的前端网页介绍和html常用标签以便更容易理解
本文目录：
- CSS 技术介绍
- CSS 语法规则
- CSS 和 HTML 的结合方式
- 第一种：
- 第二种
- 第三种
- CSS 选择器
- 标签名选择器
- id 选择器
- class 选择器（类选择器）
- 组合选择器
- 常用样式
CSS相关查阅文档：https://kohler.lanzouo.com/i0XFcz8svob
CSS 技术介绍
CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
CSS 语法规则
选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）。
属性 (property): 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：
p {
color: blue
}
多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)
例如：
p{
color:red;
font-size:30px;
}
注：一般每行只描述一个属性
CSS 注释：
/*注释内容*/
CSS 和 HTML 的结合方式
第一种：
在标签的 style 属性上设置”key:value value;”，修改标签样式。
例：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。
div 标签 1
div 标签 2
span 标签 1
span 标签 2
1px表示边框为1个像素，solid表示边框为实现，red表示边框为红色。
效果：
--style 标签专门用来定义 css 样式代码
我们通过添加style属性来给给原来的标签添加样式：
通过使用border来添加了边框，然后1px代表1像素，solid代表是实线，red代表是红色
CSS的边框样式可以参考链接：https://www.w3school.com.cn/css/css_border.asp
问题：这种方式的缺点？
- 如果标签多了。样式多了。代码量非常庞大。
- 可读性非常差。
- Css 代码没什么复用性可方言。
第二种
在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。格式如下：
xxx {
Key : value value; }
例：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。
Title
div 标签 1
div 标签 2
span 标签 1
span 标签 2
效果：
这次我们是在head标签内就添加style标签来实现我们想要的CSS样式，无论后面有多少标签都可以使用这个样式。
我们提前设置好对哪些标签添加CSS样式，然后后面不用再添加style属性就可以实现我们想要的CSS样式
这种方式的缺点。
1.只能在同一页面内复用代码，不能在多个页面中复用 css 代码。
2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。
第三种
把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。
使用 html 的标签 导入 css 样式文件。
css 文件内容（命名为1.css）：
div{
border: 1px solid yellow; }
span{
border: 1px solid red; }
html文件内容：
Title
div 标签 1
div 标签 2
span 标签 1
span 标签 2