1、什么是CSS
Cascading Style Sheet 翻译为：层叠样式列表
| 语言 | 功能 | |
| 结构层 | HTML | 搭建结构、放置部件、描述语义 |
| 样式层 | CSS | 美化页面、实现布局 |
| 行为层 | JavaScript | 实现交互效果、数据收发、表单验证等 |
2、CSS的作用
结构与样式分离的方式，便于后期维护与改版
可以用多套样式，使网页有任意样式切换的效果
使页面载入更快、降低服务器的成本
3、CSS书写位置
内嵌式：在学习CSS时，最常使用内嵌式，顾名思义，内嵌在.html件中，在<head></head>标签对中，书写<style></style>标签对，在里面书写CSS语句。
外链式：可以将CSS单独存为.css文件，然后使用<link>标签引入它：<link rel="stylesheet" href="css.css">，外链式的优点：多个html网页，可以共用一个css样式表文件。
行内式：样式可以直接通过style属性写在标签身上：<h2 style="color: red;">我是二级标题</h2>，行内式牺牲了样式表的批量设置样式的能力，只能给一个标签设置样式，所以不常用，后台工程师较常用行内式。
导入式：导入式是最不常见的样式表导入方法：<style>@import url(css/css.css);</style>,使用导入式引入的样式表，不会等待css文件加载完毕，而是会立即渲染HTML结构，所以页面会有几秒中的“素面朝天”的时间
4、CSS样式文件结构
p{
background-color:red;
font-size:26px;
} #p为样式选择器，background-color为属性，red为属性值，：为分隔符<head>
<meta charset="UTF-8">
<title>层叠样式表</title>
<style type="text/css">
p{
/*设置背景颜色和字号*/
background-color:red;
font-size:26px;
}
</style>
</head>
<body>
<p>你好</p>
<p>世界</p>
</body>5、什么是选择器
选择器是用来选择（找到）需要添加样式的位置
常用的选择器有标签选择器、类选择器等
5.1、标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签，无论这个标签所处位置的深浅。标签选择器“覆盖面”非常大，所以通常用于标签的初始化。
5.2、标签可以有id属性，是这个标签的唯一标识 ，id的名称只能由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母，同一个页面上不能有相同id的标签。CSS选择器可以使用井号#前缀，选择指定id的标签
5.3、class属性表示“类名”，类名的命名规范和id的命名规范相同。使用点.前缀选择指定class的标签，多个标签可以为相同类名，同一个标签可以同时属于多个类，类名用空格隔开。
5.4、原子类：在做网页项目前，可以将所有的常用字号、文字颜色、行高 、外边距、内边距等都先设置为单独的类。HTML标签就可以“按需选择”它的类名了，这样可以非常快速的添加一些常见样式
5.5、复合选择器
| 选择器名称 | 示例 | 示例的意义 |
| 后代选择器 | .box .spec | 选择类名为box的标签内部的类名为spec的标签 |
| 交集选择器 | li.spec | 选择既是li标签，也属于spec类的标签 |
| 并集选择器 | ul, ol | 选择所有ul和ol标签 |
后代选择器：CSS选择器中，使用空格表示“后代”，“后代”并不一定是“儿子”，后代选择器可以有很多空格，隔开好几代
交集选择器：选择有.spec类的h3标签，此时应该使用交集选择器:h3.spec { font-style: italic;}
并集选择器：并集选择器也叫作分组选择器，逗号表示分组：ul, ol { list-style: none; }
| 伪类 | 意义 |
| a:link | 没有被访问的超级链接 |
| a:visited | 已经被访问过的超级链接 |
| a:hover | 正在被鼠标悬停的超级链接 |
| a:active | 正在被激活的超级链接（按下但没松开鼠标） |
a标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效：
LOVE HATE ：: link : visited : hover : active
| 名称 | 举例 | 意义 |
| 子选择器 | div>p | div的子标签p |
| 相邻兄弟选择器 | img+p | 图片后面紧跟着的p段落将被选中 |
| 通用兄弟选择器 | p~span | p元素之后的所有同层级的span元素 |
子选择器：当使用 > 符号分隔两个元素时，它只会匹配那些作为第一 个元素的直接后代元素，即两个标签为父子关系。后代选择器不一定是子元素。
相邻兄弟选择器：相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。说白了，a+b就是选择“紧跟在a后面的一个b”。
通用选择器：通用兄弟选择器（~），a~b 选择a元素之后所有同层级b元素。
序号选择器：
| 举例 | 意义 |
| :first-child | 第一个子元素 |
| :last-child | 最后一个子元素 |
| :nth-child(x) | 第x个子元素 |
| :nth-of-type(x) | 第x个某类型子元素 |
| :nth-last-child(x) | 倒数第x个子元素 |
| :nth-last-of-type(x) | 倒数第x个某类型子元素 |
:first-child表示“选择第一个子元素”。
:last-child表示“选择最后一个子元素”。
:nth-child()可以选择任意序号的子元素。
:nth-child()可以写成an + b的形式，表示从b开始每a个选一个，注意不能写为b + an，例：2n+1等价于odd，表示奇数、2n等价于even，表示偶数。
:nth-of-type()将选择同种标签指定序号的子元素。
| 举例 | 意义 |
| img[alt] | 选择有alt属性的img标签 |
| img[alt="故宫"] | 选择alt属性是故宫的img标签 |
| img[alt^="北京"] | 选择alt属性以北京开头的img标签 |
| img[alt$="雪景"] | 选择alt属性以雪景结尾的img标签 |
| img[alt~="相机"] | 选择alt属性中有空格隔开的相机字样的img标签 |
| img[alt*="雨"] | 选择alt属性中含有雨字的img标签 |
| img[alt|="参赛作品"] | 选择alt属性以“参赛作品-”开头的img标签 |
5.7、CSS3新增伪类
| 伪类 | 意义 |
| ：empty | 选择空标签 |
| ：focus | 选择当前获得焦点的标签 |
| ：enabled | 选择当前有效的表单元素 |
| ：disabled | 选择当前无效的表单元素 |
| ：checked | 选择当前已经勾选的单选按钮或着复选框 |
| ：root | 选择根元素，即<html>标签 |
::before和::after：::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置 content 属性表示其中的内容。::after 创建一个伪元素，其将成为匹配选中的元素的最后一个子元素，必须设置 content 属性表示其中的内容。
::section：::selection CSS伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分）。
6、文本与字体属性
颜色也可以用rgba()表示法，最后一个参数表示透明度，介于0到1之间，0表示纯透明，1表示纯实心。例：color: rgba(255, 0, 0, .65);
font-size属性用来设置字号，单位通常为px。此外还有em、rem单位。网页文字正文字号通常是16px，浏览器最小支持10px字号。例：font-size: 30px;
font-weight属性设置字体的粗细程度，通常就用normal和bold两个值，font-weight:normal;表示正常粗细，与400等值。font-weight:bold;表示加粗，与700等值。
font-style属性设置字体的倾斜,通常用normal和italic两个值，font-style: normal;表示取消斜体，可以把天生倾斜的i、em等标签设置为不倾斜。font-style: italic；设置为倾斜字体。
text-decoration属性用于设置文本的修饰线外观的（下划线、删除线），有三个属性值：text-decoration: none;表示没有修饰线，text-decoration: underline;下划线，text-decoration: line-through;删除线。
font-family属性用于设置字体，字体可以是列表形式，一般英语字体放到前面，后面的字体
@font-face {
font-family: '字体名称';
font-display: swap;
src: url('eot字体文件地址');
src: url('eot字体文件地址') format('embedded-opentype'),
url('woff2字体文件地址') format('woff2'),
url('woff字体文件地址') format('woff'),
url('ttf字体文件地址') format('truetype'),
url('svg字体文件地址') format('svg');
} 6.2、段落和行相关属性
text-indent属性定义首行文本内容之前的缩进量，缩进两个字符应该写作：text-indent: 2em；（em表示字符宽度）
line-height属性用于定义行高，属性的单位可以是以px为单位的数值 ：line-height: 30px;属性也可以是没有单位的数值，表示字号的倍数 ，这是最推荐的写法：line-height: 1.5;属性也可以是百分数，表示字号的倍数line-height: 150%;
单行文本垂直居中：设置行高=盒子高度，即可实现单行文本垂直居中，设置text-align: center，即可实现文本水平居中。
font属性可以用来作为font-style, font-weight, font-size, line-height和font-family属性的合写，例：font: 20px/1.5 Arial, "微软雅黑";（字号/行高 字体）。font: italic bold 20px/1.5 Arial, "微软雅黑";（倾斜 加粗 字号/行高 字体）
6.3、继承性：文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有标签中生效。包括：• color • font- 开头的 • list- 开头的 • text- 开头的 • line- 开头的。因为文字相关属性有继承性，所以通常会设置body标签的字号、颜色、行高等，这样就能当做整个网页的默认样式了。
在继承的情况下，选择器权重计算失效，而是“就近原则”
7、盒模型
所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型
| 小属性 | 意义 |
| padding-top | 上padding |
| padding-right | 有padding |
| padding-bottom | 下padding |
| padding-left | 左padding |
padding的四数值写法:padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的padding，例：padding: 10px 20px 30px 40px；
padding的三数值写法：padding属性如果用三个数值以空格隔开进行设置，分别表示上、左和右、下的padding，例：padding: 10px 20px 30px;
| 小属性 | 意义 |
| margin-top | 上margin，“向上踹” |
| margin-right | 右margin，“向右踹” |
| margin-bottom | 下margin，“向下踹” |
| margin-left | 左margin，“向左踹” |
.box {box-sizing: border-box; width: 200px; height: 200px; border: 10px solid #000; padding: 10px; }
box-sizing属性大量应用于移动网页制作中，因为它结合百分比布局、弹性布局等非常好用，在PC页面开发中使用较少。
7.3、display属性：行内元素和块级元素
| display属性类型 | 是否并排显示 | 是否能设置宽高 | 当不设置width属性时 | 举例 |
| 块级元素 | 否 | 是 | width自动撑满 | div、section、header、h系列、li、ul等 |
| 行内元素 | 是 | 否 | width自动收缩 | a、span、em、b、u、i、等 |
7.4、浮动用来实现并排：用浮动用来实现并排。
浮动使用要点：要浮动，并排的盒子都要设置浮动。父盒子要有足够的宽度，否则子盒子会掉下去。子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素。
· 浮动的元素一定能设置宽高：浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标签等。
右浮动：float:right;即可设置右浮动
7.5、使用浮动实现网页布局
垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动！“大盒子带着小盒子跑”，一个大盒子中，又是一个小天地，内部可以继续使用浮动。div是免费的！不要节约盒子！
7.6、BFC（Box Formatting Context，块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
一个盒子不设置height，当内容子元素都浮动时，无法撑起自身，这个盒子没有形成BFC。
如何创建BFC：方法一：float的值不是none、方法二：position的值不是static或者relative 、方法三：display的值是inline-block、flex或者inline-flex、方法四：overflow:hidden;
overflow:hidden;表示溢出隐藏，溢出盒子边框的内容将会被隐藏，overflow:hidden;是非常好用的让盒子形成BFC的方法。
BFC的其他作用：一、BFC可以取消盒子margin塌陷，二、BFC可以可以阻止元素被浮动元素覆盖。
7.7、清除浮动
清除浮动：浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响。
清除浮动的方法一：让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动。此时最好的方法就是overflow:hidden属性。
清除浮动方法二：给后面的父盒子设置clear:both属性。clear表示清除浮动对自己的影响，both表示左右浮动都清除。
清除浮动方法三：使用::after伪元素给盒子添加最后一个子元素，并且给::after设置clear:both。
清除浮动方法4：在两个父盒子之间“隔墙”，隔一个携带clear:both的盒子，即：在两个父盒子之间添加div盒子，里面添加clear：both属性。
7.8、相对定位、绝对定位（子绝父相）、固定定位.........
8、边框border属性的三要素
边框border属性的三要素 ：线宽度、线型、线颜色：border:2px(线宽度) solid(线型) red(线颜色)
8.1、边框三要素的小属性
| 小属性 | 意义 |
| border-width | 线宽 |
| border-style | 线型 |
| border-color | 线颜色 |
可以在后面用小属性去改变已经设定的属性。
8.2、线型
| 线型值 | 意义 |
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点状线 |
8.3、四个方向的边框
| 属性 | 意义 |
| border-top | 上边框 |
| border-right | 右边框 |
| border-bottom | 下边框 |
| border-left | 左边框 |
8.4、四个方向边框的三要素小属性
8.5、去掉边框
设置：border-left：none；属性即可去掉边框，以次类推。
8.6、边框圆角的设置
border-radius属性的值通常为px单位，表示圆角的半径。
border-radius属性可以单独设置四个圆角：border-radius: 10px(左上) 20px(右上) 30px(右下) 40px(左下);
也可以使用小属性，单独设置四个角
border-radius属性的值也可以用百分比做单位，表示圆角起始于每条边的哪里，正方形盒子如果设置的border-radius属性为50%，就是正圆形。
8.7、盒子阴影
box-shadow属性用来实现盒子的阴影：box-shadow: 10px 20px 30px rgba(0,0,0,.4);【x偏移量 y偏移量 模糊量 颜色】
阴影延展：box-shadow: 10px 20px 30px 40px rgba(0,0,0,.4); 【x偏移量 y偏移量 模糊量 阴影延伸 颜色】
内阴影 ：box-shadow属性值前加inset单词，表示内阴影：box-shadow: inset 10px 20px 30px 40px rgba(0,0,0,.4);
多阴影：box-shadow属性值可以用逗号隔开多个，表示携带多个阴影。
9、背景与渐变
9.1、背景颜色：background-color属性表示背景颜色，背景颜色可以用十六进制、rgb()、rgba()表示法表示，padding区域是有背景颜色的。
9.2、背景图片：background-image属性用来设置背景图片，图片路径要写 到url()圆括号中，可以是相对路径，也可以是http://开头的绝对路径：background-image: url(images/bg1.jpg);
注意：如果样式表是外链的，那么要书写从CSS出发到图片的路径，而不是从html出发。
background-repeat属性用来设置背景的重复模式：
background-size属性用来设置背景图片的尺寸，兼容到IE9：background-size: 100px 200px;【宽度 高度】、值也可以用百分数来设置，表示为盒子宽、高的百分之多少、需要等比例设置的值，写auto。
contain和cover：contain和cover是两个特殊的background-size的值：
9.2.1、contain表示将背景图片智能改变尺寸以容纳到盒子里
9.2.2、cover表示将背景图片智能改变尺寸以撑满盒子
background-clip 属性用来设置元素的背景裁切到哪个盒子。兼容到IE9。
background-attachment 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动：
background-position属性可以设置背景图片出现在盒子的什么位置：background-position: 100px 200px; 可以用top、bottom、center、left、right描述图片出现的位置。
9.3、CSS精灵：将多个小图标合并制作到一张图片上，使用 background-position属性单独显示其中一个，这样的技术叫做CSS精灵技术，也叫作CSS雪碧图。
一些常用的背景相关小属性，可以合写到一条background属性中:background: white url (images/archer.png) no-repeat center center; 【背景颜色 背景图片地址 背景重复 背景位置】
10、2D与3D转换......
748
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
