CSS3学习笔记

1 2D转换：transform 变换
1.1 translate（x,y）
1.1.1 移动元素，x为正表示在x轴向右移动，y为正表示在y轴向下移动
1.2 rotate
1.2.1 旋转角度，单位（deg）
1.3 scale
1.3.1 缩放大小，单位（x）整体扩大x倍
1.3.2 scale（x,y）,width扩大x倍，height扩大y倍
1.4 skew
1.4.1 skew(x,y) 倾斜角度
1.5 3D转换：rotateX(),rotateY()
2 transtion 过度
2.1 设定某属性动画执行的时间
2.2 transtion-delay 延迟执行的时间
3 animation 动画
3.1 animation｛动画名称 动画时间 infinite｝
3.2 infinite 指的是永不停止的运行
3.3 @keyframes
4 columns 多列布局
4.1 column-count
4.2 column-gap
4.3 column-rule
4.3.1 列之间的线的样式 如：5px outset red
5 新增属性选择器
5.1 [id*=mydiv] 选择id中包含mydiv字符的元素
5.2 [id^=mydiv] 选择id名中前面包含mydiv字符的元素
5.3 [id￥=mydiv] 选择id名中后面包含mydiv字符的元素
6 结构性伪类选择器
6.1 first-line 选择某个元素内容中的第一行内容
6.2 first-letter 选择某个元素内容中的第一个字母
6.3 before 修改某个元素内容前面的内容
6.4 after 修改某个元素内容后面的内容
7 选择器详解（一）
7.1 ：root 选择器，选择整个页面最底部的元素，即选择html
7.2 ：not 选择器 排除某些元素， 如 div *：not（p）
7.3 ：empty 选择器 当内容为空的时候该样式起作用
7.4 ：target 选择器 当触发a链接中target时，为其添加样式
8 选择器详解（二）
8.1 first-child 第一个子元素
8.2 last-child 最后一个子元素
8.3 nth-child 如：li:nth-child(3) 选择li中第三个子元素
8.4 nth-last-child 如：li:nth-last-child(3) 选择li中倒数第三个子元素
8.5 nth-child 如：li:nth-child(odd) 选择li中序号为奇数的子元素
8.6 nth-last-child 如：li:nth-last-child(odd) 选择li中序号为奇数的子元素（从后向前数）
8.7 nth-child 如：li:nth-child(even) 选择li中序号为偶数的子元素
8.8 nth-last-child 如：li:nth-last-child(even) 选择li中序号为偶数的子元素（从后向前数）
8.9 ：nth-of-type(odd) 选择同类型中的奇数项
8.10 ：nth-of-type(even) 选择同类型中的偶数项
8.11 ：only-child 选择只有一个子元素的子元素
9 选择器详解（三）
9.1 ：hover 如 input[type="text"]:hover
9.2 ：focus 获取焦点是显示，点击
9.3 ：active 鼠标按下时显示
9.4 ：checked 当选框被选择后显示
9.5 ：enabled 选择可用的
9.6 ：disabled 选择不可用的
9.7 通用兄弟元素选择器 ~ 选择同一个父级下的所有兄弟选择器
10 文字样式
10.1 text-shadow 文字阴影
10.2 使用服务器端字体
10.2.1 <style type="text/css"> @font-face{ font-family: webfont; /*//字体名自定义*/ src:local("webfont"),url("字体位置")format("truetype"); } div{ font-family: webfont; } </style>
11 盒子相关样式
11.1 block，inline，inline-block，inline-table，list-item
11.2 inline-block 表示具有inline的属性，并且有block的属性
11.3 inline-table 表示表格具有inline的属性，并且有block的属性
11.4 list-item 表示其他元素具有list的属性，如可以添加list-style-type设置序号
11.5 overflow:hidden 超出隐藏 scroll超出滚动 auto 自动
11.6 overflow-x overflow-y 可以针对x,y方向进行设置
11.7 子主题 7
12 white-space
12.1 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 nowrap 文本不会换行，文本会在在同一行上继续直到遇到 <br> 标签为止。 pre-wrap 保留空白符序列，但是正常地进行换行。 pre-line 合并空白符序列，但是保留换行符。 inherit 规定应该从父元素继承 white-space 属性的值。
13 background 新增属性
13.1 background-clip background-clip:border-box 给边框内边距内容都添加背景样式 background-clip:padding-box 给内边距内容都添加背景样式，border没有样式 background-clip:content-box 给内容都添加背景样式，border，padding都没有样式
14 border-radius 设置圆角
15 border-img 给边框添加背景图片
16 动画功能
16.1 transitions transtion:width属性 3s过度时间 linear 线性过度形式
16.2 animations
16.3 实现动画的的方式
16.3.1 linear 匀速变化 ease-in 先慢后快 ease-out 先快后慢 ease 慢 快 慢 ease-in-out 慢 快 慢
17 分支主题 17
17.1 子主题 1