检查各浏览器的的兼容情况：caniuse.com/
第一章 css3的发展
1.1 CSS3新特性
1. 强大的选择器,在标签中使用指定的元素
2. 半透明度的效果的实现RGBA和HSLA不仅设定色彩还可以设定透明度,还可以用opacity定义不透明
3. 多栏布局
4. 多背景图 background-image,background-repeat,background-size,background-position,background-originand,background-clip.
5. 文字阴影text-shadow
6. 开放字体类型 @font-face
7. 圆角border-radius
8. 边框图片border-image属性允许在元素的边框上设定图片
9. 盒子阴影box-shadow
10. 媒体查询media query适配
1.2 主流浏览器对css3的支持
1. webkit类型的 Safari, Chrome 加私有属性 -webkit-
2. Gecko类型的有Firefox 加私有属性 -mox-
3. Konqueror的类型加私有属性 -khtml-
4. Opera 的浏览器的私有属性是以 -o- 为前缀
5. IE的浏览器的是以-ms-为前缀 (IE8+)
1.3 各主流浏览器对css3支持的模块
第二章 新增选择器
2.1 属性选择器
1. 新增三个选择器E[foo^="bar"]包含"bar"前缀的子字符串,E可以省略
2. E[foo$="bar"]包含后缀为"bar"的类型如img[src$="jpg"]
3. E[foo*="bar"]所有的"bar"元素
兼容性除了IE6不支持其他都支持
2.2 结构伪类选择器
E:root,nth-child(n),nth-last-child(n),nth-last-of-type(n),only-child,only-of-type,E:empty选择E元素不包括子节点
兼容性除了IE8及其以下,Firefox从3.5开始其他都支持
2.3 UI状态和伪类选择器
1. E:enabled 选择E的所有可用UI元素
2. E:disabled E所有不可用UI元素
3. E:checked 选匹配E的所有可用UI元素
IE8及其以下不支持,其他都支持
2.4 其他选择器
E~F 兄弟选择器,E的下一个兄弟F
E:not(s)_选择E的元素,且过滤s选择符的元素
E:target匹配所有E的元素,且匹配的元素存在URL指匹配的元素,样式才有效
第三章 增强文本和颜色的功能
3.1 文本阴影text-shadow属性: color length opacity
有四个值第一个值是水平位移,第二个值是垂直位移,第三个是模糊半径,第四个值是阴影的颜色
3.2 溢出文本省略text-overflow clip|ellipsis|ellipsis-word
不显示省略标记；溢出显示省略标记,插入的位置是最后一个字符；溢出省略,最后一个词
3.4 文本模块解析
1. white-space-collapse 设置如何处理对象内包含的空格字符
2. white-space 用于设置或检索对象内空格字符的处理方式
3. word-break 用于设置或检索对象内文本的字内换行行为
4. text-wrap 定义文本换行/word-wrap ,text-wrap用于设置检索对象内文本的换行
5. word-wrap 用于处理[字符换行
6. text-align 文本对齐
7. text-align-last 最后一行文本的对齐方式,text-aligno为justify值才生效
8. text-justify 用于设置或检索对象内调整文本使用的对齐方式
9. word-spacing 用于检索或设置对象中的单词之间插入的空格
10. letter-spacing 用于检索或设置对象中字符之间的间隔
11. puctuation-trim 用于检索或设置标点符号的修剪
12. text-emphasis 用于检索或设置重点文本样式
13. text-shadow 文本阴影
14. text-outline 文本外轮廓
15. text-indent 对象的文本缩进
16. hanging-puctuation 用于检索或设置对象是否悬挂一个标点符号
3.5 HSL色彩模式
1. 色调(H),饱和度(S),亮度(L)
H: 0/360 表示红色,60黄色,120绿色,180青色, 240表示蓝色,300表示洋红
S:0%-100%
L:0%-100%
3.8 不透明度opacity属性
兼容性除了ie8以下
第四章 css3新增的弹性盒模式
4.1 定义盒子的布局取向box-orient属性
先把父容器的display属性设置为box或者inline-box
兼容性不好
4.2 定义盒子的布局顺序 box-direction属性
4.3 定义盒子的布局位置 box-ordinal-group 用来设置子元素的位置顺序从1开始
4.4 定义盒子的弹性空间 box-flex 灵活的控制子元素在盒子中的显示空间,包括子元素的宽度和高度 初使值0.0
4.5 管理盒子的空间 box-pack和box-align的属性 初使start
4.6 空间溢出管理 box-lines属性 (都不支持)
第五章 盒模型和ui设计
5.1 定义多色边框border-color属性
border-top-color, border-right-color,border-bottom-color,border-left-color
兼容性不好
<!---->
5.2 定义边框背景图border-image属性
<!---->
border-image-slice属性值(27,27,27,27),
<!---->
5.3 设计圆角-border-radius属性
兼容性
<!---->
5.4 设计块阴影box-shadow属性
有六个参数:阴影类型,x轴位移,y轴位移,阴影大小,阴影扩展和阴影颜色
<!---->
5.5 css3边框和背景样式实战
5.6 定义多重坐标原点background属性
<!---->
5.6 定义背景坐标原点background-origin 属性
border: 从边框区域开始显示背景
padding:从补白区域开始显示背景(初使值)
content: 仅在内容区域显示背景
IE和Opera不支持其他支持
5.7 定义裁剪区域background-clip
border: 从边框向外裁剪背景
padding: 从补白区域向外裁减背景
content: 从内容区域向外裁减背景
no-clip: 从边框向外裁剪背景
<!---->
5.8 定义图像大小background-size
5.10 溢出内容处理overflow-x和overflow-y属性
5.11 定义盒模型box-sizing
5.12 自由缩放resize属性
none: 浏览器不提供尺寸调整尺寸机制,用户不能操纵机制调节元素的尺寸
both: 浏览器提供双向尺寸调整机制,允许用户调节元素的宽度和高度
horizontal: 浏览器提供单向水平尺寸调整机制,允许用户调节元素的宽度
vertical: 浏览器提供单向垂直尺寸的调整机制,允许用户调整元素的高度
inherit: 默认继承
兼容性除了safari和chrome其他不支持
5.13 定义外轮廓线outline属性
5.14 定义外轮廓宽度outline-width
5.15 定义外轮廓线样式outline-style
5.16 定义外轮廓线颜色outline-color
5.17 定义外轮廓线位移outline-offset
5.18 定义导航序列号nav-index属性
浏览器按顺序获取焦点
auto: 浏览器默认的顺序
number: 必顺是正整数
inherit: 默认继承
浏览器都支持
5.19 定义方向键控制顺序
nav-up: 控制向上方向键
nav-right: 控制向右方向键
nav-down: 控制向下方向键
nav-left: 控制向左方向键
<!---->
浏览器都支持
5.20 为元素添加内容content属性
normal: 默认值
string: 插入文本的属性值
attr(): 插入元素的属性值
uri(): 插入外部资源,如图像,音频,视频
counter: 计数器,用于插入排序标识
none: 无任何内容
IE8以下不支持其他都支持
<!---->
第六章 css3多列布局
6.1 定义多列布局columns
<column-width>: 定义每列的宽度
<column-count>: 定义列数,
6.2 定义列宽度column-width属性
6.3 定义列数column-count属性
6.4 定义列间距columu-gap属性
6.5 定义列边框样式column-rule属性
6.6 定义跨列显示cloumn-span
6.7 定义栏高度column-fill属性
6.8 分列打印
第七章 css3渐变设计
7.1 Webkit引擎的css渐变实现方法
-webkit-gradient (<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*)
type: 类型linear(线性渐变),radial(径向渐变)
point: 定义起点和结束点坐标(top,bottom...)
radius: 定义径向渐变时,用来设置径向渐变的长度,为该参数设置一个数值
stop: 定义渐变和步长,包括三个类型值,开始颜色,使用函数定义,结束定义,
7.2 Gecko引擎的css渐变实现方法
7.3 IE浏览器引擎的css渐变实现
7.4 W3C标准化的css渐变实现
7.5 CSS渐变
IE不支持css渐变
第八章 css3动画设计
8.1 css(Transform)
matrix(): 定义矩阵变换,既基于x和y坐标重新定位元素的位置
tanslate(): 移动元素对象,既基于x和y坐标重新定位元素
scale(): 缩放元素对象,可以使用任意元素对象尺寸发生变化
rotate():旋转元素对象,取值为一个度数值
skew(): 倾斜元素对象,取一个度数值
8.2 css变形原点transform-origin属性
两个参数,可以是百分比,px,em;left,center,right,top,right...
8.3 css过渡transition属性
8.3.1 transition-property属性来定义轮换css属性如background-color
8.3.2 transition-duration 渡的时间
8.3.3 transition-delay 渡延迟时间
8.3.4 transition-timing-function 过渡效果
ease: 缓解效果
linner:线性效果
ease-in: 渐显效果
ease-out:渐隐效果
ease-in-out: 渐显渐隐效果
cubic-bezier: 特殊的立方贝塞曲线效果
8.4 css动画animation属性
animation-name: css动画的名称
animation-duration: 动画的播放时间
animation-timing-function:动画播放的方式
animation-delay: 动画开始播放的的时间
animation-iteration-count: 动画播放的次数
animation-direction: 动画的播放方向
8.5 css3动画综合实战
第九章 css3新增的其他功能
9.1 引用外部字体类型@font-face
9.2 定义css设备类型Media Queries
9.3 定义投影 CSS Reflections
9.4 定义语音样式CSS3 Speech
