前端开发基础之
CSS3
CaelumTian@SIPC115
表格示例
- table-layout: fixed | auto;
- border-collapse: collapse | separate;
- display: table | row | cell;
- 表格只能应用padding属性
CSS3 高级选择器
- 兄弟选择器:
- E ~ F 一般兄弟选择器
- E + F 相邻兄弟选择器
- 结构伪类:
- :first-child
- :last-child
- :nth-child (孩子)
- :nth-of-type (类型)
border-radius
- border-radius: 5px
- 可以指定四个方向
- 可以使用百分数(50% 10px/10px)
box-shadow
字体图标(@font-face)
- font-family:字体名称
- src: 字体连接
@font-face {
font-family: sipc;
src: url("../../fonts/icomoon.eot");
src: url("../../fonts/icomoon.eot?#iefix") format("embedded-opentype"),
url("../../fonts/icomoon.woff") format("woff"),
url("../../fonts/icomoon.ttf") format("truetype"),
url("../../fonts/icomoon.svg") format("svg");
}
transform
- 平移 (tanslate, translateX, tanslateY)
- 旋转 (rotate, rotateX, rotateY)
- 缩放 (scale, scaleX, scaleY)
tansition(过度)
- 从一个属性切换到另一个属性
- transition-property:规定属性名称(逗号分隔)
- transition-duration:过度需要的时间
- transition-timing-function:规定变化曲线
- transition-delay:规定过度延迟
-
transition: property duration timing-function delay;
@keyframes
- animation: 合写属性
- animation-name:动画名称
- animation-duration:动画完成时间
- animation-timing-function:动画动作曲线
- animation-delay:规定动画何时开始
- animation-iteration-count:规定动画执行次数(infinite)
- animation-direction:规定动画执行方向
-
animation-fill-mode : 属性规定动画在播放之前或之后,其动画效果是否可见 ( none | forwards 保持最后一个值 | backwards | both
)
下节课
- javascript 数据类型
- javascript 基本语法
- javascript 对 dom 的操作
SIPC115 CSS进阶
By caelumtian
SIPC115 CSS进阶
- 626