CSS 随笔

标签：

CSS2.0
font-style font-familiy font-size font-weight
line-height color text-transform text-shadow
letter-spacing word-spacing text-decoration

text-indent text-overflow vertical-align text-align
word-wrap

background background-color background-image
background-repeat background-positon background-position-x
background-attachment

POSITON static absolute fixed relative
z-index top right buttom left ( float )

height width max-width min-width max-height min-height

clear float clip overflow overflow-x overflow-y
display visibility

margin margin-top margin-left margin-right margin-buttom

padding padding-left padding-right padding-buttom padding-top

outline outline-width outline-color outline-style

border border:1px solid orange;
border-color border-left-color border-right-color border-top-color
border-width border-left-width border-right-width border-top-width
border-style border-left-style border-right-style border-top-style

list-style === list-style-image list-style-position list-style-tope
marker-offset

border-collapse border-spacing table-layout caption-side empty-cells
speak-header

table tr { color:red }( 包含选择符 )
table>tr { color:red }
CSS2.0
Pseudo-Class
：link :hover :active :visited :focus
:first :left :right :lang :first-child
Pseudo-Elements
:after :before :first-letter :first:line

CSS3.0
border-radius //IE8及以下不支持
box-shadow //IE8及以下不支持
border-image //IE10及以下不支持
background-size //IE8及以下不支持
background-clip //IE8及以下不支持
opacity
//IE8及以下不支持
CSS3新增重要功能
Multi-column
flexBox
new FlexBox
Transform
Transiton
Animation
Image Data Types
Rules and Syntax
aniamation =
animation-name：设置动画名称
animation-duration：设置对象动画的持续时间
animation-timing-function: 设置动画的过渡类型
animation-delay：设置动画延迟多少时间开始执行
animation-iteration-count：设置对象动画的循环次数
animation-direction：设置对象动画在循环中是否反向运动
div{
animation-name: myAnimation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite /*number*/;
animation-direction: alternate/*normal*/;
}
@keyframes myAnimation{
from{ width:2000px;}
to{ width:200px;}
}
@keyframes myAnimation{
0%{ width:200px; }
50%{ width:150px; }
100%{ width:250px; }
}
div{ animation: myfirst 5s linear 2s infinite alternate; }
div{ animation: myfirst 5s linear 2s 10 normal; }

transiform =
transiform:translate( 20px, 20px );
transiform:translateX( 20px );
transiform:translateY( 20px );
transiform:rotate( 45deg );
transiform:scale( 0.4, 2.5 );
transiform:scaleX( 0.5 );
transiform:scaleY( 0.4 );
transiform:skew( 30deg ,30deg );
transiform:skewX( 45deg );
transiform:skewY( 30deg );

transition =
transition-property: 设置参与过渡的属性
transition-duration: 设置过渡的持续时间
transition-timing-function: 设置对象中过渡的动画类型
transition-delay: 设置延迟执行的时间

缩写方式 =
transition: border-color 5s ease-in 1s,
background 5s ease-in 1s,
color 5s ease-in 1s;
拆分方式 =
transition-property: border-color, background-color, color;
transition-duration: 5s, 5s, 5s;
transition-timing-function: ease-in, ease-in, ease-in;
transition-delay: 1s, 1s, 1s;

CSS 随笔

标签：

原文地址：http://www.cnblogs.com/yuanxiaofeng/p/4847751.html