1、引入css的三种方式
- 内联/行内样式，直接通过html标签上的style属性来引用css代码
- 内部样式，在<head>与<body>之间通过<style>标签进行css代码编写
- 外部样式表，在<head>中使用<link>标签引用外部的css文件
或者在<style>标签中来通过@import标签来引用
三种方式的优先级：满足就近原则，内联 》内部 〉外部
2、css中的选择器
- 元素（标签）选择器
- 类选择器
- id选择器
- 选择器组，多个选择器之间用 ，号表示
- 派生选择器：
子代：父子关系，隔代就不管 div > p
后代：父子、孙、曾孙，凡是后背都会管 div p
- 伪类选择器：css伪类可以对css的选择器添加一些特殊效果
伪类属性列表：
：active 向被激活的元素添加样式
：hover 当鼠标悬浮在元素上方时，向元素添加样式
：link 向未被访问的链接添加样式
：visited 向已经被访问的链接添加样式
：first-child 向元素的第一个字元素添加样式
超链接的伪类要遵循爱恨原则的使用顺序，LoVeHAte, lvha
3、css的基本属性
1) 文本属性：
指定字体：font-fmily: value;
字体大小：font-size: value;
ps:像数 em: 倍数
字体加粗：font-weight: normal/bold;
文本颜色：color: value;
文本排列:text-align : left/right/center;
文字修饰:text-decoration : none/underline;
行高:line-height : value;
首行文本缩进:text-indent : value (2em);
2) 背景属性：
background-color：设置背景颜色
background-image：url("xxx/xxx.img"); 设置背景图片
background-repeat：设置背景图片的效果，是否及如何重复
repeat：在垂直方向和水平方向重复
repeat-x：仅在水平方向重复
repeat-y：仅在垂直方向重复
no-repeat：仅显示一次
background-position：10px 20px; 设置背景图像的起始位置
值1 控制水平方向 x轴，正值向右移动，负值向左移动
值2 控制垂直方向y轴，正值向下移动，负值向上移动
background-attachment：背景图片是否固定或者随着页面的其余部分滚动
默认scroll 背景会随着文档滚动
fixed 背景图像固定
3）列表属性：
无序列表：none 无标记，也就是去除标记
disc 默认标记，也就是实现圆
circle 空心圆
square 实心方块
有序列表：decimal 数字
decimal-leading-zero：0开的数字标记，01，02，03
lower-roman：小写罗马数字 i ii iii iv v
upper-roman：大写罗马数字 I II III IV V
lower-alpha:小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)
upper-alpha:大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)
4) 边框属性：
border- 边框宽度
boder-color：边框颜色
border-style样式：none 无边框 、dotted 定义一个点线边框
dashed 定义一个虚线边框
solid 定义实现边框
double 定义两个边框，两个边框的宽度和border-width的值相同
groove 定义3d沟槽边框
5）轮廓属性：轮廓属性是绘制元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
边框 (border) 可以是围绕元素内容和内边距的一条或多条线;
轮廓(outline)是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
CSS outline 属性规定元素轮廓的样式、颜色和宽度
4、盒子模型
5、CSS定位
1、默认定位
块级元素：h1~h6、p 、div 等，它们都是自上而下，垂直排列，自动换行，可以改变宽高
行内元素：a, b, span等，从左向右，水平排列，不换行，不能改变宽高
行内块元素：input，img等，从左向右，水平排列，自动换行，可以改变宽高
2、浮动定位：让元素飞起来，可以靠左或者靠右，还可以消除块级元素独占一行的特性
float取值： none 不浮动、左浮动、右浮动
3、相对定位：和原来的位置进行比较，进行便宜定位
position: relative
4、绝对定位： 和已经定位的祖先元素的距离
position：absolute;
如果父级元素定位了，就以父级为参照物
如果腹肌没定位，就找爷爷级，爷爷级定位了就以爷爷为参照物
如果爷爷没定位就一直向上找，都没定位的话就找 body
5、固定定位：将元素的内容固定再页面的某个位置，当用户向下滚动页面时元素框不随着移动
一般用作广告
position：fixed；
6、z-index：如果 有重叠元素，使用z轴属性，定义上下层次
需要注意的是z轴属性要配合相对或者绝对定位来使用
z值没有额定数值，整形就可以
6、CSS3
1、圆角
border-radius:左上 右上 右下 左下;
border-radius:四个角;
border-radius:50%; 圆形
2、盒子阴影
box-shadow:1 2 3 4 5;
1:水平偏移 2:垂直偏移 3:模糊半径 4:扩张半径5:颜色
3、渐变
1、线性渐变
background:linear-gradient([方向/角度]，颜色列表);
2、径向渐变
background: radial-gradient(颜色列表);
4、背景
1、背景位置
background-origin:指定了背景图像的位置区域
border-box : 背景贴边框的边
padding-box : 背景贴内边框的边
content-box : 背景贴内容的边
2、背景裁切
background-clip:
border-box 边框开切
padding-box 内边距开切
content-box 内容开切
3、背景大小
background-size：
cover 缩放成完全覆盖背景区域最小大小
contain 缩放成完全适应背景区域最大大小
5、过渡动画
1、过渡：从一个状态到另一种状态，中间缓慢的过程，缺点是控制不了中间某个时间点
transition: width 2s ease 1s;
1:过渡或动画模拟的css属性
2:完成过渡所使用的时间(2s内完成)
3:过渡函数。。。
4:过渡开始出现的延迟时间
2、动画：从一个状态到另一个状态，过程中每个时间点都可以控制。
关键帧:@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}... }