CSS3复习

CSS3:模块化更新模式

发布时间：2001-5-23

属性：（1）文本：{

                              字体

　　　　　　　　  颜色：英文、16进制、完整写法、缩略写法、rgb：数字、百分比（0%-100%）

　　　　                大小：百分比、数字+单位、英文、默认大小为16px====1em

   　　　　　　      行高：数字+单位

　　　　　　　　  字重：数字、英文

　　　　　　　　  字间距：letter-spacing

　　　　　　　　  词间距：word-spacing

　　　　　　　　}

             （2）布局：display、float、overflow、position

　　　   （3）盒模型：宽度/高度、边框、内边距、外边距

　　　　　　border：宽度、样式、颜色、圆角、边框图片

　　　　（4）动画：{

　　　　　　　　 变换：tranform

　　　　　　　　简单动画：transition{

　　　　　　　　　　　　　　　　简单动画的效果，必须触发后才执行：hover

　　　　　　　　　　　　　　       确认能够执行过渡效果的属性名称，默认是所有

　　　　　　　　　　　　　　　　动画的执行时间，动画执行的类型，（贝塞尔曲线），延迟的时间

　　　　　　　　　　　　　　　　}

  　　　　　　　　复杂动画：{

　　　　　　　　　　　　 复杂的动画效果，默认都是自动执行

　　　　　　　　　　　　 动画名称，调用之前必须使用@keyframes先声明定义一个动画效果

　　　　　　　　　　　　 执行动画所花费的时间

　　　　　　　　　　　　 动画的类型，定义或者根据默认设置选择，默认值为：ease

　　　　　　　　　　　　 延迟时间（自定义）、循环次数（数字进行设置，默认值为1）、是否反向、动画结束后的状态

　　　　　　　　　　　　}

　　　　　　　（5）字体图标：显示效果像个图片图标格式，其实是字体

　　　　　　　　　　　  优点：提高网页性能，无限放大不矢真

　　　　　　　（6）媒体查询：@media,响应式页面

　　　　　　　　　CSS3扩展：960网格系统：PC端、静态页面

　　　　　　　　　bootstrap：移动设备优先、响应式页面　　　　　　　　

　　　　　　　　　less：动态CSS