CSS导入方式
导入式
<style>
@import url(css/css.css);
<style>
内嵌式
<style>
h1 {
color:red;
}
</style>
外联式
<link rel="stylesheet" href="css/css.css">
行内式
<h1 style="color: red;">我是一个主标题</h1>
选择器
标签选择器
id选择器
类选择器
复合选择器
后代选择器
CSS 选择器中，使用空格表示后代选择器
.box p {
color:red;
}
选择类名为box的标签的后代的p标签
后代不仅仅是儿子 还可以孙子更深层次的
复杂后代选择器
.box ul li .spec em {
color:red;
}
交集选择器
h3.box
h3标签并且类名是box
并集选择器
ul，ol 同时选择
伪类
伪类是添加到选择器的描述词语，指定要选择元素的特殊状态。超级链接拥有4个特殊状态
a:link
a:visited
a:hover
a:active
元素关系选择器
子选择器 div>p div的子标签p
相邻兄弟选择器 img+p 图片后面紧跟着的段落
通用兄弟选择 p~span p元素后面的所有同层级的span
序号选择器
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(3) 第三个子元素
:nth-of-type(3) 第3个某类型子元素
:nth-last-child(3) 倒数第3个子元素
nth-last-of-type(3) 倒数第3个某类型子元素
属性选择器
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|="参赛作品"] 选择有ait属性以“参赛作品-”开头的img标签
CSS3 新增伪类
:empty 选择空标签
:focus 选择当前获得焦点的表单元素
:enabled 选择当前有效的表单元素
:disabled 选择当前无效的表单元素
:checked 选择当前已经勾选的单选按钮或者复选框
:root 选择根元素，即<html>标签
伪元素
css3 新增了 伪元素 特性，顾名思义 表示虚拟动态创建的元素。伪元素用双冒号表示，IE8可以兼容单冒号
::before 和 ::after
::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置content属性表示其中的内容
a::before{
content: "A";
}
这样在a标签的文字的前面会增加一个 A
::after 创建一个伪元素，其将成为匹配选中元素的最后一个子元素，必须设置content属性表示其中的内容
::selection CSS伪元素应用于文档中被用户高亮的部分(使用鼠标圈选的部分)
::first-letter会选中某元素（必须是块级元素） 第一行的第一个字母 ::first-line会选中某元素中（必须是块级元素）第一行全部文字
层叠性
多个选择器可以同时作用于同一个标签，效果是叠加的
层叠选择器冲突处理
id选择器权重 > 类选择器权重 > 标签选择器
复杂选择器权重计算
复杂选择可以通过(id的个数，class的个数，标签的个数)的形式，计算权重
！import提升权重
如果我们需要在某个选择器的某条属性提升权重，可以在属性后面写 !important
.spec {
color: blue !important;
}
文本属性
color属性
十六进制表示法
color:#ff0000
#aabbcc 可以简写为abc
rgb表示法
color:rgb(255,0,0)
rgba表示法
color:rgba(255,0,0,.65)
font-size 属性 设置字号
单位一般是px，也会有em和rem单位
font-weight属性 粗细
normal 正常粗细
bold：加粗 于700等值
lighter 更细 大多数中文字体不支持
bolder 更粗 大多数中文字体不支持
font-style属性设置字体的倾斜
normal：取消倾斜
italic：设置为倾斜
oblique 设置为倾斜字体（用常规字体模拟，不常用）
text-decoration属性
设置文本的修饰线外观的（下划线，删除线）
none没有修饰线
underline下划线
line-through删除线
font-family属性
font-family:"微软雅黑"
字体可以是列表形式，一般英语字体放到前面，后面的字体是前面的字体的“后备”字体
font-family: serif,"Times New Roman","微软雅黑"
字体名称中有空格，必须用引号包裹
定义字体
阿里巴巴普惠字体
text-indent属性 首行文本内容之前的缩进量。
text-indent：2em;
line-height 行高
line-height：30px
line-height：1.5；字号的倍数，推荐的写法。
line-height：150% 字号的倍数，同1.5
单行文本垂直居中
设置 行高=盒子高度 div 100px line-height：100px
text-align:center 文本水平居中
font合写属性
font属性可以用来作为 font-style，font-weight，font-size，line-height和font-family属性的合写。
font：20px/1.5 Arial, "微软雅黑"
font:italic bold 20px/1.5 Arial,"微软雅黑"
继承性
文本相关的属性普遍具有继承性，只要给祖先标签设置，即可在后代所有标签中生效
color
font-开头的
list-开头的
text-开头的
line-开头的
因为文字相关的属性有继承性，所以会设置body标签的字号，颜色，行高等，这样就能当做整个网页的默认样式了
就近原则
盒模型
所有html标签都可以看做成矩形盒子，由width，height，padding，border构成，称为“盒模型”
盒子的总宽度 =width+左右padding+左右border
width属性
width属性表示盒子内容的宽度，width属性的单位通常是px，移动端开放通常也会涉及到百分数，rem等单位
当块级元素（div，h系列，li等）没有设置width属性时，它将自动撑满，单这并不意味着width可以继承
height属性默认是0，但是会被子元素撑开
padding属性
padding：10px，20px，30px，40px 上右下左
padding：10px，20px，30px，上 左右 下
padding：10px，20px， 上下 左右
margin的塌陷
竖直方向的margin有塌陷现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准。
一些元素有默认的margin
一些元素（比如body，ul，p等）都有默认的margin，在开始制作网页的时候，要将他们清除。
* {
margin:0;
padding:0;
}
* 是通配符选择器，表示选择所有的元素
通配符有效率问题，应该使用并集选择器
body，ul，p{
margin:0;
padding:0;
}
盒子水平居中
将盒子左右两边的margin都设置为auto，盒子将水平居中
margin：0 auto;
盒子的垂直居中，需要使用绝对定位技术实现
盒子水平居中 使用 margin：0，auto；
文字的水平居中使用text-align：center
文字上下居中使用行高等于盒子高，让文字垂直居中line-height:100px;
box-sizing 属性
将盒子添加了box-sizing：border-box；之后，盒子的width，height数字就表示盒子实际占有的宽高（不含margin）了，即padding，border变为“内缩的”，不再“外扩"了
# display属性
行内元素和块级元素
块级元素： 不能并排排列，可以设置宽高，当不设置width属性时，width自动撑满，例如 div section header h系列 li ul等
行内元素 可以并排排列，不可以设置宽高，当不设置width属性时自动收缩，例如 a span em，b u i等
行内块
img和表单元素是特殊的行内快，他们技能设置宽度高度，也能够并排显示
行内元素和块级元素的相互转换
使用display:block，可以将元素转为块级元素
使用display：inline 将元素转为行内元素，将元素转为行内元素的应用不多见
使用display：inline-block 即可将元素转为行内块
span设置padding后会侵入上面组件 使用display：inline-block可以解决这个问题。
元素的隐藏
display：none
将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样
使用visibility：hidden可以将元素隐藏，但是元素不放弃自己的位置
CSS浮动定位与背景样式
浮动的基本概念
浮动的最本质功能：用来实现并排 float：left；float：left；float：left；
浮动使用要点：要浮动，并排的盒子都要设置浮动 父盒子要有足够的宽度，否则子盒子会掉下去
浮动的顺序贴靠特性 子盒子会按照顺序进行贴靠，如果没有足够的空间，则会寻找前一个兄弟元素
浮动的元素一定能设置宽高 浮动的元素不再区分块级元素，行内元素，已经脱离了标准的文档流，一律能够设置宽度和高度，即使它是span或者a标签。
使用浮动实现网页布局
垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动。
大盒子带着小盒子跑，一个大盒子中，又是一个小天地，内部可以继续使用浮动。 超市售卖的塑料袋0.3元一个，div是免费的，不要节约盒子。
清除浮动
BFC规范和浏览器差异
BFC（Box Formatting Context，块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
如何创建 BFC
方法1 float的值不是none
方法2 position的值不是static或者relative
方法3 display的值不是inline-block，flex或者inline-flex
方法4 overflow：hidden
什么是 overflow：hidden；
overflow：hidden 表示溢出隐藏，溢出盒子边框的内容将会被隐藏。 overflow：hidden是非常好用的让盒子形成后BFC的方法
BFC的其他作用
BFC可以取消盒子margin塌陷 BFC可以阻止元素被浮动元素覆盖
相对定位
盒子可以相对自己原来的位置进行位置调整，称为相对定位。
position:relative
top:100px;
left:100px;
相对定位的性质
相对定位的元素，会在 ”老家留坑“，本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成”影子“，不会对页面其他元素产生影响。
相对定位用来微调元素位置 相当定位的元素，可以当做绝对定位的参考盒子
绝对定位
盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置。
position：absolute；
top：100px；
left：100px；
绝对定位的元素脱离标准文档流，将释放自己的位置，对其它元素不会产生任何干扰。而是对他们进行压盖。
脱离标准文档流的方法:浮动，绝对定位，固定定位
绝对定位的参考盒子
绝对定位的盒子并不是永远以浏览器作为基准点的
绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点。这个盒子通常是相对定位的，所以这个性质也叫做”子绝父相“
绝对定位的盒子垂直居中
绝对定位的盒子垂直居中是一个非常实用的技术
position:absolute;
top:50%;
margin-top:-自己的高度的一半
堆叠顺序z-index属性
z-index属性时一个没有单位的正整数，数值大的能压制住数值小的。
绝对定位的用处
绝对定位用来制作 ”压盖“，”遮罩“效果
决定定位用来聚合css精灵使用
绝对定位可以结合js实现动画
实际开发中不建议去掉href属性，而是建议设置href="#"或者设置href=”javascript:;“ 禁止链接刷新或跳转
固定定位
不管页面如何卷动，它永远固定在那里
固定定位只能以页面为参考点，没有子固父相这个性质
固定定位脱离标准文档流
固定定位的用途 返回顶部楼层导航等
position：fixed;
top:100px;
left:100px
浮动 子元素要浮动就都要浮动
如何清除浮动
课程难点
什么是BFC，如何创建BFC，BFC有哪些作用
绝对定位如何实现垂直居中
边框与圆角
border：1px solid red；
线宽度 线型 线颜色
值： solid 实线
dashed 虚线
dotted 点状线
## 小属性
border-width 线宽
border-style 线型
border-color 线颜色
## 四个方向边框
border-top border-right
### 小属性
border-top-width
border-top-style
border-top-color
border-left:none 去掉边框
box-shadow属性
box-shadow：10px 20px 30px rgba(0,0,0,.5)
x偏移量 y偏移量 模糊量 颜色
阴影延展
box-shadow：10px 20px 30px 40px rgba(0,0,0,.5)
向4个方向扩展
## 内阴影
box-shadow：inset 10px 20px 30px rgba(0,0,0,.5)
## 多阴影 用逗号分隔开
box-shadow：inset 10px 20px 30px rgba(0,0,0,.5)，inset 10px 20px 30px rgba(0,0,0,.5)
圆角
border-radius
课程重点：
边框有哪三个要素，如何分别设置三个要素，常用线性有哪些
圆角如何设置，正圆形如何设置
阴影如何设置
课程难点
如何用盒子制作三角形
背景
## background-repeat属性用来设置背景的重复模式
repeat： xy均平铺（默认） repeat-x 平铺
repeat-y y平铺 no-repeat 不平铺
background：white url(images/archer.png)
## 径向渐变
盒子的background-image属性可以用 radius-gradient（） 形式创建径向渐变背景
background-image：radial-gradient(50%,50%,red,blue)
## 背景颜色基础知识
background-color属性表示背景颜色
背景颜色可以用十六进制 rgb() rgba() 表示法表示
padding区域是有背景颜色的
## 背景图片 background-image
background-image：url（images/bg1.jpg）
如果样式表是外联的，那么要书写从css出发到图片的路径，而不是从html出发
## 背景图片的尺寸 background-size
background-size：100px 200px；
值也可以用百分数来设置，表示为盒子宽高的百分之多少
需要等比例设置的值，写auto
background-size：300px auto 宽度300 高度按照比例
##contain 和cover 特殊的background-size的值
contain表示将背景图片智能改变尺寸以容纳到盒子里
cover表示将背景图片智能改变尺寸以撑满盒子
## background-clip属性 设置元素背景裁剪到哪个盒子，兼容到IE9
border-box 背景延伸至边框（默认值）
padding-box 背景衍生至内边（padding），不会绘制到边框处（仅在dotted，dashed边框可察觉）
content-box： 背景被裁剪至内容区
## 背景固定 background-attachment属性
background-attachment属性决定背景图像的位置是在视口内固定，或者随着包含他的区块滚动
fixed：自己滚动条不动，外部滚动条不动
local：自己滚动条动，外部滚动条动
scroll：自己滚动条不动，外部滚动条动（默认）
## background-position属性
background-position属性可以设置背景图片出现在盒子的什么位置
background-position：100px 200px；
可以用top，bottom，center，left，right描述图片出现的位置
## CSS 精灵
将多个小图标合并到一张图片，使用background-position属性单独显示其中一个，这样的技术叫做CSS精灵技术，也叫做CSS雪碧图。
CSS精灵可以减少HTTP请求数，加快网页显示速度。缺点也很明显，不方便测试，后期改动麻烦。
## background综合属性
一些常用的背景相关小属性，可以合写到一个background属性中
background：white url（images/archer.png） no-repeat center center;
## 线性渐变
盒子的background-image属性可以用linear-gradient（）形式创建线性渐变背景
background-image：linear-gradient(to right,blue,red)
渐变方向也可以写成度数
background-image：linear-gradient(45deg,blue,red)
可以有多个颜色值，并可以用百分数定义他们出现的位置
linear-gradient(to bottom blue,yellow 20% red)
## 浏览器私有前缀，用来对实验性质的CSS属性加以标识。
crome -webkit-
firefox -moz-
IE，Edge -ms-
欧朋 -o-
## 课程总结
透彻理解每一个background属性，你能不重不漏的说出它们吗
如何实现渐变背景
使用background-position属性实现css精灵
变形
斜切变形
将transform属性的值设置为skew（）即可实现斜切变形
transform：skew（10deg，20deg） x斜切角度 y斜切角度
旋转变形
将transform属性的值设置为rotate（）即可实现旋转变形
transform：rotate（45deg）
.pic6{ /* 以左上角为中心进行旋转*/ transform-origin:0 0; transform: rotate(30deg) }
缩放变形
transform：scale(3); 缩放倍数
数值小于1时，表示缩小元素；大于1表示放大元素
位移变形
transform：translate（100px，200px） 和相对定位非常像，位移变形也会 "老家留坑"，”形影分离“
3D 旋转
将 transform属性的值设置为 rotateX（） 或者rotateY（） 即可实现绕横轴，纵轴旋转
transform：rotateX（30deg） transform：rotateY（30deg）
perspective属性 perspective属性用来定义透视强度，可以理解为人眼到舞台的距离，单位是px
<div> //舞台，必须设置perspective属性
<p></p> //演员，设置transform属性
</div>
空间移动
当元素进行3D旋转后，即可继续添加translatex() translateY() translateZ() 属性让元素在空间进行移动
transform：rotateX(30deg) translateX(30deg),translateZ(100px);
制作一个正方体
正方体的每个面都是舞台经过不同的3D旋转，空间移动自己的位置的
课程总结
2D变形有哪些 3D变形有哪些 每种变形的参数意义是什么，正方向是什么 必须准确理解空间移动的意义 必须掌握perspective属性
CSS 动效
transition过渡
transition过渡属性时CSS3 浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加”补间动画“
transition属性基本使用
transition：width 1s linear 0s； width：什么属性要过渡 1s 动画时长 linear 变化速度曲线 0s：延迟时间
哪些属性可以参与过渡
所有数值类型的属性，都可以参与过渡，比如width，height，left，top，border-radius等
背景颜色颜色和文字颜色都可以被过渡
所有变形（包括2D和3D）都能被过渡
all 如果所有属性都要参与过渡，可以写all
transition：all 1s linear 0s；
过渡的四个小属性
transition-property 哪些属性要过渡 transition-duration 动画时间 transition-timing-function 动画变化曲线（缓动效果） transition-delay 延迟时间
缓动参数
linear 匀速 ease easeIn easeout easeinout
贝塞尔曲线
网站 https：//cubic-bezier.com 可以生成贝塞尔曲线，可以自定义动画缓慢的参数
正方体旋转
如果盒子又是舞台又是演员，这个box整体带着里面的p旋转
需要设置
transform-style：preserve-3d;
动画的定义
可以使用@keyframes来定义动画，keyframe表示”关键帧“，在项目上线前，要补上@-webkit-这样的私有前缀
@keyframes r{
from {
transform:rotate(0);
}
to{
transform:rotate(360deg);
}
}
定义动画之后，就可以使用animation属性调用动画
animation：r 1s linear 0s 3；
r：动画的名字
1s：总时长
linear：动销
0s：延时
3：执行次数
如果想让动画的第2,4,6（偶数次数）自动你想执行，那么要加上alternate参数即可
animation：movelr 2s linear 0s infinite alternate；
如果想让动画停止在最后结束状态，那么要加上forwards
animation：changeToCircle 1s linear 0s forwards；
多关键帧动画
@keyframes changeColor{
0%{
background-color:red;
}
20%{
background-color:yellow;
}
...
}
课程重点
过渡的四个参数是什么意思 什么是过渡的缓慢动作
什么属性能够过渡
如何定义和调用动画？如果想要无线调用动画，应该怎么做
