层叠样式表（Cascading Style Sheets），与HTML一样，也是一种标记语言，其作用就是给HTML页面标签添加各种样式，定义网页的显示效果，将网页内容和显示样式进行分离，提高了显示功能。简单一句话就是，CSS的代码可以告诉浏览器怎么美化HTML标签的内容。
CSS入门使用
css代码可以写在html标签中作为标签的属性值存在，也可以写在html网页中，作为附加代码存在，也可以写在单独的css文档中，通过html的link标签引入使用。
行间样式/行内样式
css代码可以作为在每一个标签的style属性中作为值使用。语法格式：
<标签名 style="样式属性: 属性效果值; 样式属性: 属性效果值;...."><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h4 style="background-color: red; color: lightblue;">黄鹤楼送孟浩然之广陵</h4><p style="background-color: red; color: yellow;">故人西辞黄鹤楼，<br>烟花三月下扬州。</p><p style="background-color: deeppink; color: yellow;">孤帆远影碧空尽，<br>唯见长江天际流。</p>
</body>
</html>内部样式
css可以作为在网页中的附加代码写在style标签内部存在。
代码语法格式：
<style>
选择符1 {样式属性: 属性效果值; 样式属性: 属性效果值;....
}选择符2 {样式属性: 属性效果值; 样式属性: 属性效果值;....
}....
</style><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内部样式，达到了结构与表现分离初步的效果</title><style>h4, p {background-color: red;}h4 {color: lightblue;}p {color: yellow;}.p2 {background-color: deeppink;}</style>
</head>
<body><h4>黄鹤楼送孟浩然之广陵</h4><p>故人西辞黄鹤楼，<br>烟花三月下扬州。</p><p class="p2">孤帆远影碧空尽，<br>唯见长江天际流。</p>
</body>
</html>外部样式
css还可以作为单独的css格式文件存在，通过html的link标签引入到网页中
common.css，代码：
h4, p {background-color: red;}
h4 {color: violet;}
p {color: yellow;}
.p2 {background-color: deeppink;}html 代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外部样式，彻底实现结构与表现的分离</title><link rel="stylesheet" href="common.css">
</head>
<body><h4>黄鹤楼送孟浩然之广陵</h4><p>故人西辞黄鹤楼，<br>烟花三月下扬州。</p><p class="p2">孤帆远影碧空尽，<br>唯见长江天际流。</p>
</body>
</html>针对css提供的三种引入使用方式，我们一般最常用的是外部样式，其次到内部样式。而行间样式在css使用过程中基本上是禁止使用的。而在后续的js特效编写中，行间样式是最常用的。
CSS的基本语法
css主要由三部分构成：选择符，样式属性和属性值
可能外面有很多css的编译工具，例如：less，sass等。可以让开发者在安装less，sass以后，可以在css中实现函数、变量或循环判断等操作。当然即便使用了less或者sass等编译工具，里面编写的大部分代码还是属于css原生代码，而且最终浏览器识别的只会是css代码。
在css中，HTML文档的标签，也叫元素
| 结构 | 描述 |
|---|---|
| 选择符 | 用于查找要美化的一个或多个HTML标签(元素) |
| 样式属性 | 设置HTML元素的外观效果类型，例如：长度、字体颜色、背景、边框等等 |
| 样式属性值 | 设置HTML元素的外观效果的具体描述参数。例如：5px，红色等等。 |
语法格式：
选择符 {样式属性: 样式属性值;样式属性: 样式属性值;样式属性: 样式属性值, 样式属性值, 样式属性值;
}三种CSS引入使用方式的内部样式或者外部样式中，使用的就是css的完整语法： p，#p2，h4就是选择符，表示告诉浏览器，html网页中所有的p，#p2，h4等元素全部添加指定样式。
background-color，表示告诉浏览器，要设置指定元素的外观效果类型是：背景颜色。
color，表示告诉浏览器，要设置指定元素的外观效果类型是：文本字体颜色。
选择符主要是为了按照规定的查找规则，告诉浏览器，我们要给哪些元素需要添加外观效果。
元素选择符通过选择符直接查找到HTML元素，添加样式。
| 选择符 | 描述 |
|---|---|
* | 通配选择符，表示所有的html元素。 |
tag | 类型选择符，也叫元素选择符或标签名选择符，表示通过指定元素的标签名作为选择符，给他们添加样式 |
#id | ID选择符，表示通过给元素添加id属性值，给唯一的id属性值的单个元素添加样式 |
.class | 类选择符，表示通过给元素添加class属性值对元素进行分类，给指定分类的元素添加样式。 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* css的注释只有一种 *//* *，通配选择符，表示任意的HTML元素 */* {background-color: aqua; /* 背景颜色：湖绿色; */}/* 直接使用标签名作为选择符，就是类型选择符，指定网页中的某一类型的元素 */a {color: blue; /* 字体颜色：红色; */text-decoration: none; /* 文本-线条装饰：无; */}/* id选择符，#号后面这个指定元素的id值，表示给某一个元素设置css样式 */#baidu{font-size: 32px; /* 字体-大小：32像素; */font-family: sans-serif; /* 字体-家族：无衬线字体 */}/* 类选择符，通过class属性指定某些HTML元素归纳为同一类，可以通过类选择符，直接指定类的元素添加样式 */.first{font-size: 32px; /* 字体-大小：32px */text-decoration: underline; /* 文本-线条装饰：下划线; */}.second{background-color: gray; /* 背景-颜色：灰色; */color: white; /* 字体颜色：白色; */}.third{border: 5px solid red; /* 边框：边框宽度(1px) 边框类型(实线) 边框颜色(红色) */}</style>
</head>
<body><!-- 元素的属性是唯一的，所以同一个元素中，不能出现多个一样的属性名，如果有多个同名属性，浏览器只会识别第一个属性 --><h1 class="first" class="second">一个标题</h1><!-- 一个元素可以同时属于1或多个不同的分类,类名之间使用空格隔开 --><p class="first third">一个段落</p><p class="second">一个段落</p><a class="second" href="https://www.taobao.com">淘宝</a><br><br><a class="second third" href="https://www.tmall.com">天猫</a><br><br><!-- 一个元素的id属性值不能有多个--><a id="baidu" class="third" href="https://www.baidu.com">BaiDu</a><br><br><!-- 不同的HTML元素中可以声明同一个id属性值，但是不推荐并且强烈反对！因为在将来的js编写特效时会可能出现错误 --><a id="baidu" href="https://www.baidu.com">BaiDu</a><br>
</body>
</html>关系选择符
HTML中，元素和元素之间存在两个关系
关系选择符主要通过元素与元素之间的嵌套关系（父子关系，祖先后代关系）和并列关系（兄弟关系，同辈关系）来查找元素
| 选择符 | 描述 |
|---|---|
选择符1, 选择符2{} | 群组选择符，表示同时给多个不同的选择符对应的元素添加外观效果，也叫并集选择符。 |
选择符A 选择符B{} | 包含选择符，表示给指定的（祖先）选择符A下的（后代）选择符B对应的元素添加外观效果，也叫后代选择符。 |
选择符A>选择符B{} | 子选择符，表示给指定的（父辈）选择符A下一层的（子）选择符B对应的元素添加外观效果，也叫子选择符。 |
| 选择符A+选择符B {} | 相邻选择符，表示给跟着选择符A的下一个（同辈）选择符B对应的元素添加外观效果。 |
| 选择符A~选择符B {} | 兄弟选择符，表示给与选择符A拥有同一个父辈的所有选择符B对应的元素添加外观效果，也叫同辈选择符。 |
我的理解就是，标签不是有很多吗，那怎么找到特定的标签，那就通过这里的关系选择符来进行选择（标签之间的关系
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 群组选择符，同时设置多个选择符对应的元素，添加样式 */h1, p, b, a{color: red;}/* 群组选择符里面的各个选择符成员，可以是任意的选择符，不限于类型选择符 */.p1, .p2, .a1{background-color: yellow;}/* 包含选择符，可以指定某些被指定选择符所包含的元素指定样式 */ul li a{color: blue;}/* 包含选择符中的祖先或后代选择符，不仅可以是上面类型选择符，也可以其他的任意选择符 */.list2 li a{text-decoration: line-through;/* 文本-修饰线条：贯穿线; */}/* 子选择符，用于给指定选择符下的子选择符对应的元素添加样式 */li>a{border: 3px double blue; /* 边框样式：边框宽度[3px] 边框类型[双实线] 边框颜色[蓝色]; */}/* 多种选择符可以相互搭配使用 */ul p>a{background-color: orange;}/* 相邻选择符，设置紧跟着指定选择符的下一个元素，并且该元素符合+号后面的选择符规则时，可以给当前元素加上外观效果 */.p1+p{text-shadow: -5px -5px 2px black; /* 文本阴影效果：水平阴影偏移量[正右负左] 垂直阴影偏移量[正下负上] 模糊效果 阴影颜色 */}/* 兄弟选择符，设置指定元素后面的所有兄弟选择符，实际上是找弟弟 */.li-1~.li-2{text-shadow: -2px -2px 2px red;}</style>
</head>
<body><h1>标题</h1><p class="p1">第1段内容</p><b>加粗文本内容</b><p>第1段内容p1后面的第一个p标签</p><h1>标题</h1><p class="p1">第2段内容</p><p class="p2">第3段内容</p><p>第4段内容</p><p><a href="">第5段内容 p下面的a标签</a></p><p><a class="a1" href="">第6段内容 p下面的a标签</a></p><ul class="list"><li><a href="">第1个li-----------------</a></li><li class="li-1"><a class="a1" href="">第2个li, ul li a</a></li><li class="li-2"><a class="a1" href="">第3-1个li</a></li><li class="li-3"><a class="a1" href="">第3-2个li</a></li><li class="li-2"><a class="a1" href="">第3-3个li</a></li><li><ul><li><p>1</p></li><li><a href="">a2</a></li><li>3</li></ul></li></ul><ul class="list2"><li><a href="">.list2 a</a></li><li><p><a href="">.list2 p a</a><a href="">.list2 p a</a></p></li></ul>
</body>
</html>属性选择符
| 选择符 | 描述 |
|---|---|
选择符[attr="val"] | 给拥有属性名attr并且属性值为val的指定选择符添加外观效果 |
| 选择符[attr] | 给拥有属性名attr的指定选择符添加外观效果 |
| 选择符[attr^="val"] | 给拥有属性名attr并且属性值以val开头的指定选择符添加外观效果 |
| 选择符[attr*="val"] | 给拥有属性名attr并且属性值包含val的指定选择符添加外观效果 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>input[type="text"]{border: 1px solid red;outline-color: red; /* 输入框的焦点外边线-颜色：红色 */}input[disabled]{border: 0; /* 去除边框 */}input[value*='登录']{cursor: pointer;}</style>
</head>
<body><form action=""><input type="text" value="1.0" disabled><br>账号: <input type="text"><br>密码: <input type="password"><br><input type="button" value="登录"><input type="button" value="重新登录"></form>
</body>
</html>同样的道理，前面的可能只是在找，谁谁谁的兄弟或者父辈，这里就直接按照某个人的特征来描述然后选定
伪类选择符
伪类选择符，是根据元素的位置状态或使用状态（交互状态）来查找某一类元素。
| 选择符 | 描述 |
|---|---|
| 选择符:link | 设置超链接在未被访问前的样式。 |
| 选择符:visited | 设置超链接在其链接地址已被访问过时的样式。 |
选择符:hover | 设置元素在其鼠标悬停时的样式。 |
| 选择符:active | 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。 |
| 选择符:focus | 设置元素在成为输入焦点时的样式（用于表单输入框，或者具有contenteditable属性的元素）。 |
选择符:first-child | 匹配父元素的第一个子选择符。 |
| 选择符:last-child | 匹配父元素的最后一个子选择符。 |
选择符:nth-child(n) | 匹配父元素的第n个子选择符。 |
| 选择符:checked | 匹配处于选中状态的选择符。(用于input type为radio与checkbox时) |
| 选择符:disabled | 匹配用户界面上处于禁用状态的选择符。（常用于表单项） |
这部分还挺有趣的，可以让页面变得好看点
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 当鼠标悬停在指定选择符上方时，设置外观效果 */ul li:hover{background-color: red;list-style: circle; /* 列表项类型：圆圈效果; 如果值为none，则去除项目符号 */}/* 当鼠标对指定选择符的元素按下没松开时，设置外观效果 */ul li:active{color: white;}/* 当指定选择符对应的元素获取输入焦点时，设置外观效果 */h1:focus, input:focus{color: red;}a{text-decoration: none;}/* 设置超链接的未访问时的外观样式，决定元素是否处于未访问状态的条件，是浏览器内是否有存在当前超链的访问历史记录 */a:link{color: red;}/* 设置超链接的已访问时的外观样式，决定元素是否处于已访问状态的条件，是浏览器内是否有存在当前超链的访问历史记录 */a:visited{color: blue;}/* 当选择符对应的元素属于父元素的第一个子元素时，设置样式 */.data1 li:first-child{border: 1px solid red;}.data1 li:last-child{border: 1px solid red;}/* 当选择符对应的元素属于父元素的第n个子元素时，设置样式，css中元素的排列序号从1开始 */.data1 li:nth-child(2){background-color: red;}/* 当选择符对应的元素属于父元素的第偶数个子元素时，设置样式，css中元素的排列序号从1开始 */.data2 li:nth-child(2n){background-color: red;}/* 当选择符对应的元素属于父元素的第奇数个子元素时，设置样式，css中元素的排列序号从1开始 */.data3 li:nth-child(2n-1){background-color: red;}/* 当选择符对应的元素属于父元素的指定倍数个子元素时，设置样式，css中元素的排列序号从1开始 */.data4 li:nth-child(3n){background-color: red;}.data4 li:nth-child(3n-1){background-color: yellow;}.data4 li:nth-child(3n-2){background-color: green;}/* 当选择符对应的元素处于被选择状态时，设置外观效果 */input:checked ~ span:after {content: "我被选中了"}/* 当选择符对应的元素处于被禁用状态时，设置外观效果 */input:disabled{color: red;}</style>
</head>
<body><!-- 当HTML元素具有布尔属性，contenteditable 表示当前元素是一个可编辑元素 --><h1 contenteditable>标题</h1><input type="text" placeholder="请输入一段文本内容。"><ul class="data1"><li>1</li><li>2</li><li>2</li><li>2</li><li>2</li><li>3</li></ul><p><a href="https://www.taobao.com">淘宝</a><br><a href="https://www.tmall.com">天猫</a><br></p><hr><ul class="data2"><li>1</li><li>2</li><li>2</li><li>2</li><li>2</li><li>3</li></ul><hr><ul class="data3"><li>1</li><li>2</li><li>2</li><li>2</li><li>2</li><li>3</li></ul><hr><ul class="data4"><li>1</li><li>2</li><li>2</li><li>2</li><li>2</li><li>3</li></ul><p><label><input type="radio" name="lve"> 男<span></span></label><label><input type="radio" name="lve"> 女<span></span></label></p><p><input type="text" value="此处不能修改" disabled></p>
</body>
</html>CSS样式的优先级
css在使用过程中，因为很多的选择符有具有批量查找的特点，所以很容易出现样式污染的问题。样式污染出现的原因是因为css代码编写过程中，因为引入方式、书写先后顺序以及选择符的优先级等问题导致的。（就可能是，哎，你前面设置好了样式，结果后面有部分涉及到了这个标签，就,,会很混乱嘛
针对css中的代码，使用不同的引入方式，会存在不同的优先级问题。三种引入方式中，行内样式的权重是最高的，比另外两种都要高。内部样式与外部样式权重是一样的，所以只要css不是行内样式，不管是外部还是内部样式的使用过程中，写在后面的css代码，会覆盖前面的写的css代码。其中，如果在样式属性值后面加上!important，则表示无视权重，优先使用当前属性值作为最终的展示效果。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="9.1.css"><style>.p1, .p2{color: red;}.p3{color: blue!important; /* 让css无视权重，使用当前属性值作为最终展示效果。 */}</style><link rel="stylesheet" href="9.2.css">
</head>
<body><p class="p1">第1个p标签</p><p class="p3" style="color: orange;">第2个p标签</p><p class="p2">第3个p标签</p><p class="p3" style="color: orange;">第4个p标签</p>
</body>
</html>9.1.css
.p1 {color: yellow;}9.2.css
.p2 {color: yellow;}在css使用过程中，浏览器本身对于HTML元素的外观实际上是预设了一些默认样式的。这些样式存在了user agent stylesheet。所以实际上，user agent stylesheet提供的样式才是权重最低的。所以也是因为浏览器本身对于不同的HTML元素内部预设一些默认外观效果，所以w3c又针对这种情况，又提供了2个纯净标签，是几乎没有任何内置样式的：div、span。其中，div标签代表网页的一个板块，自带换行效果。span标签代码的是文本的一部分内容，所以不会自动换行，也没有任何外观样式。div+span+css往往用于网页的排版布局。
选择符的优先级
当css代码采用外部样式或者内部样式时，针对同一个元素，使用不同的选择符，也会存在优先级的比较，容易导致样式污染的问题。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 通配选择符的优先级比类型选择符的要低 */*{text-decoration: none;color:red;}p{color: blue;}/*子选择符与包含选择符 比 类型选择符的优先级要高。子选择符与包含选择符的优先级一样的，嵌套层级一样时，谁写在后面，就优先显示谁如果嵌套不一样，则嵌套层级越多的，优先级越高。*/b {background-color: red;color: white;}body>p>b{background-color: green;color: red;}p b {background-color: blueviolet;color: pink;}/* 类选择符的优先级比包含选择符或子选择符的优先级要高 */.p3{background-color: yellow;}body p {background-color: blue;}/* 属性选择符与类选择符的优先级是一样的。 */[type=text]{border: 1px solid blue;}.input{border: 1px solid red;}/* 所有的选择符中，ID选择符的优先级最高！ */</style>
</head>
<body><a href="">超链接</a><p class="p1"><b>第1个p标签</b></p><p class="p3"><b>第2个p标签</b></p><p class="p2">第3个p标签</p><p class="p3">第4个p标签</p><input class="input" type="text" value="请输入昵称"><br><br><input class="input" type="text" value="请输入账号"><br></body>
</html>样式属性
颜色
css中针对颜色表达支持三种写法：单词表示法、十六进制表示法和RGB函数表示法。
单词表示法
red; /* 红色 */
yellow; /* 黄色 */
blue; /* 蓝色 */
green; /* 绿色 */
十六进制表示法
采用十六进制数值来表达一个颜色。通常格式：#RRGGBB。计算中所有的颜色都是由屏幕发光来呈现出来的。所以一切的颜色都是基于光的三原色（红、绿、蓝）。每种颜色的发光程度从不亮之间分成了255个级别，使用十六进制来表达则是00~FF之间，如果使用十进制来表达则是0~255。
#ffffff /* 白色，红绿蓝三种颜色都发光而且是最亮*/
#000000 /* 黑色，红绿蓝三种颜色都不发光 */
#ff0000 /* 红色，只有红色发光，其他不发光 */
#00ff00 /* 绿色 */
#0000ff /* 蓝色 */
#ffff00 /* 黄色 */
#ff00ff /* 紫色 */
#00ffff /* 青色 */
/* 当 三种光的原色发光程序一样时，如果不是白色与黑色，则属于灰色。*/
#333333 /* 灰色 */
#666666 /* 灰色 */
#999999 /* 灰色 */
#fafafa /* 灰色 */
#aaaaaa /* 灰色 */
十六进制表达法支持简写。
#aaaaaa ---> #aaa
#aabbcc ---> #abc
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p{/*color: #ffffff;*//*color: #ff0000;*//*color: #00ff00;*//*color: #0000ff;*//*color: #ffff00; !*红色+绿色=黄色*!*//*color: #ff00ff; !*红色+蓝色=紫色*!*/color: #00ffff; /*绿色+蓝色=锭青色*/}</style>
</head>
<body><p>风吹麦浪起，扑面穗生香。金色的麦田里，收割机在麦浪中来回忙碌，一颗颗饱满的麦粒从收割机仓门倾泻而下，源源不断地被送上运粮车，颗粒归仓。</p>
</body>
</html>RGB函数表示法
RGB代表的就是光的三原色
/* 设置不透明颜色 */
rgb(红色, 绿色, 蓝色);
/* 设置透明颜色 */
rgba(红色, 绿色, 蓝色, 透明度);
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p{color: rgb(255,255,255); /*白色 */color: rgb(0,0,0); /* 黑色 */color: rgb(255,0,0); /* 红色 */color: rgb(255,255,0); /* 黄色 */color: rgb(0,255,0); /* 绿色 */color: rgb(0,255,255); /* 青色 */color: rgb(0,0,255); /* 蓝色 */color: rgb(255,0,255); /* 紫色 */}</style>
</head>
<body><p>风吹麦浪起，扑面穗生香。金色的麦田里，收割机在麦浪中来回忙碌，一颗颗饱满的麦粒从收割机仓门倾泻而下，源源不断地被送上运粮车，颗粒归仓。</p>
</body>
</html>颜色属性
| 属性名 | 描述 |
|---|---|
| color | 文本内容的颜色 |
| opacity | 元素以及内容和子元素的透明度，取值范围：0~1之间的数值。 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p{/*background-color: black;*//*opacity: 0.5;*/background-color: rgba(0,0,0,0.5); /* 仅仅是设置背景透明，不会影响到内容的透明度 */color: rgba(255,255,255,0.5);}</style>
</head>
<body><p>风吹麦浪起，扑面穗生香。金色的麦田里，收割机在麦浪中来回忙碌，一颗颗饱满的麦粒从收割机仓门倾泻而下，源源不断地被送上运粮车，颗粒归仓。</p>
</body>
</html>字体
| 属性名 | 描述 |
|---|---|
font-style | 设置字体是否倾斜 normal：默认值，正常 italic：倾斜。 |
font-family | 设置字体的字体家族【经常和自定义字体@font-face配合使用】 |
font-size | 设置字体的大小 ，支持css中所有的常见尺寸单位，如：rem,%,px |
font-weight | 设置字体的粗细 |
| font | 上面所有字体属性的集体简写方式，常见格式：font: 字体倾斜 字体粗细 字体大小/字体行高 字体家族 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>@font-face {font-family: '迷你简卡通';url('迷你简卡通_downcc.TTF') format('truetype');}.p1{font-style: normal; /* 设置字体不要清晰 */}.p2{font-family: '迷你简卡通'; /* 系统内置的无衬线字体，只适用于英文 */}.p3{font-size: 16px; /* 谷歌浏览器中默认字体大小为：16像素; */}.p3{font-weight: bold; /* 设置字体加粗 */}h1,h2,h3,h4,h5,h6{font-weight: normal; /* 去除加粗效果 */}.p4{/*font: italic bold 22px/44px "Arial";*//*font: bold 22px/44px "Arial";*/font: 22px/22px "Arial"; /* 不能继续简写了 */}</style>
</head>
<body><i class="p1">hello，你好</i><div >hello，你好</div><div class="p2">hello，你好</div><div class="p3">hello，你好</div><h1>标题标签默认加粗，我们需要去除加粗效果</h1><div class="p4">hello，你好</div>
</body>
</html>
)
