CSS
内联（写在标签属性里面）
嵌入式（用）
外联（来引入css文件）
优先级是就近原则：内联高于嵌入式高于外联
（class可以有多个） 用.p调用
（id只能有一个） 用#p调用
伪对象
css基本选择器
选择所有元素
style 元素：*{}
根据类型选择元素
style 元素：a{}
body 元素：靠谱学校
根据类选择元素
style 元素：.class1{}
body 元素：
靠谱
根据id选择元素
style元素：#id1{}
body元素：
靠谱
根据属性选择元素
style元素：[herf]{}
body元素：靠谱
选择器动作
style元素：a：hover{}当鼠标经过
body元素：靠谱
创建边框和背景
border属性
background属性
border-radius：10px/10px；（水平半径/垂直半径）
css设置文本样式
text-align：center；居中
direction：rtl；向右靠齐
（rtl和ltr）right to left
letter-spacing：10px；字母间距
word-spacing：10px；单词间距
line-height：10px；行之间的距离（行高）
text-indent：50px；首行缩进
text-decoration：underline；文本修饰
（常用属性underline overline line-through）
text-transform：capitalize；每个单词首字母大写
text-transform：uppercase；所有字母大写
text-transform：lowercase；所有字母小写
font-family：黑体；字体名称
font-size：40px；字体大小
font-style：italic；字体样式斜体
font-variant：small-caps；字体以小型大写字母显示
font-weight：900；字体加粗
text-shadow：1px 10px 10px red；（参数分别是水平偏移，垂直偏移，(模糊程度)，颜色）
css使用过渡
p{
width：100px；（宽）
height：100px；（高）
background-color：antiquewhite；
}
p：hover{（当鼠标指针经过）
width：200px；（宽）
height：200px；（高）
background-color：white；
transition-delay：150ms；（延时）
transition-duration：500ms；（过渡变化时间）
transition-property：background-color；（只有颜色是受前面延时属性控制）
transition-timing-function：ease；（还有ease-in，ease-out，ease-in-out，linear）动画变换速度
}
ease ease-in ease-out ease-in-out
创建动画
p{
width：100px；
height：100px；
background-color：antiquewhite；
}
p：hover{
animation-delay：200ms；
animation-duration：1s；
animation-name：xx；
animation-iteration-count：infinite；（无限循环）
animation-direction：alternate；（第一次正向运行第二次反向运行第三次正向运行…）
}
@keyframes xx{（关键帧）
from{（第一次）
width：100px；
height：100px；
background-color：white；
}
50％{
width：150px；
height：150px；
background-color：yellow；
}
to{（最后一次）
width：200px；
height：200px；
background-color：black；
}
}
使用变换
p{
width：100px；
height：100px；
background-color：antiquewhite；
}
p：hover{
width：100px；
height：100px；
background-color：antiquewhite；
transform：rotate（30deg）；（顺时针以图形中心旋转30度）
transform-origin：top right；（设置旋转中心点）
transform：scale（1.5）；（图形四周缩放比例）
transform：scalex（5）；（只放大x方向）
}
补充：
opacity不透明度
animation-fill-mode：forward；（是动画不会回到最初的样子）
