CSS参考手册.docx
《CSS参考手册.docx》由会员分享，可在线阅读，更多相关《CSS参考手册.docx（7页珍藏版）》请在冰豆网上搜索。
CSS参考手册
css动画属性（Animation）:
请使用动画属性时控制外观
@keyframes属性：
规定动画，同时将动画与选择器绑定。
语法：
@keyframesanimationname{keyframes-selector{css-style;}}
animationname必需，定义动画名称。
keyframes必需，动画时长的百分比。
合法值：
0%—100%/from（0%）—to（100%）。
css-styles必需，一个或多个合法的css样式。
浏览器支持：
Firefox支持替代的-moz-animation、Safari和Chrome支持替代的-webkit-animation、Opera支持替代的-o-animation
animation属性：
一个简写属性，包括
animation-name:
规定@keyframes动画名称。
Animation-duration:
规定动画完成一个周期（用ms或s计）。
Animation-timing-function:
规定动画的速度曲线。
Animation-delay:
规定动画开始时间。
Animation-iteration-count:
规定动画播放次数。
Animation-direction:
规定动画是否下周期逆向播放。
默认值：
none0ease01normal继承性：
no版本：
css3
语法：
animation:
namedurationtimingfunctiondelayiteration-countdirection
JavaScript语法：
objectname.style.animation=”mymove5sinfinite”
定义：
需要始终规定animation-duration属性，否则时长为0，就不会播放动画了。
浏览器支持：
IE10Firefox支持animation属性、Safaris和Chrome支持替代的-webkit-animation属性、Opera支持代替的-o-animation属性
可使用简写属性可将动画与div绑定
Animation-name属性：
为@keyframe动画规定名称。
默认值：
none继承性：
no版本:
css3
语法：
animation-name:
keyframename（规定需要绑定的选择器的keyfarame的名称）|none（规定无动画效果）；
JavaScript语法:
objectname.animationName=”mymove”
Animation-duration属性：
定义动画完成需要的时间（用ms或s计）
默认值：
0继承性：
no版本：
css3
语法:
animation-duration:
time（规定动画完成的时间）；
JavaScript语法:
objectname.style.animationDuration=”2s”
Animation-timing-function属性:
规定动画的速度曲线（速度曲线定义动画从一套css样式变为另一套样式所需要的时间，使变化更平滑）。
默认值：
ease继承性：
no版本:
css3
语法：
aniamtion-timing-function:
value;
JavaScript语法:
objectname.style.animationTimingFunction=”ease”
value:
linear:
动画从头到尾的速度相同（0,0,0.25,1）
ease:
动画以低速开始，然后加快，结束前变慢（0.25,1,0.25,1）
ease-in:
动画以低速开始（0.42,0,1,1）
ease-out:
动画以低速结束（0.42,0,0.58,1）
ease-in-out:
动画以低速开始和结束（0,0,0.58,1）
Cubic-bezier（n,n,n,n）:
在cubic-bezier函数中输入自己的值
Animation-delay属性：
定义动画何时开始（用ms或s计），允许负值，负秒前使动画马上开始，但跳过该负秒后进入动画。
默认值：
0继承性:
no版本:
css3
语法:
animation-delay:
time（可选）；
JavaScript语法:
objectname.style.animationDelay=”2s”
Animation-iteration-count属性：
定义动画的播放次数。
默认值：
1继承性：
no版本：
css3
语法：
animation-iteration-count:
n（具体播放次数）｜infinite（无限次数）；
JavaScript语法：
animaitonIterationCount=3
Animation-direction属性：
定义是否应该轮流反向播放动画。
默认值：
normal继承性：
no版本:
css3
语法：
animation-direction:
normal（动画正常播放）｜alternate（轮流反向播放）；
JavaScript语法：
objectname.style.animationDirection=”alternate”
Animate-play-state属性：
规定动画正在运行还是暂停。
默认值：
running继承性：
no版本：
css3
语法：
animation-play-state:
paused|running;
JavaScript语法：
animation-play-state=”paused”
Animation-fill-made属性：
规定动画在播放之前或之后，其动画效果是否可见，其属性值是由逗号分隔的一个或多个模式关键词。
默认值：
none继承性：
no版本:
css3
语法：
animation-fill-made:
none（不改变默认行为）｜forwards（当动画完成时，保持最后一个属性值（在最后一个关键帧中定义））｜backwards（当动画完成时，保持第一个属性值（在第一个关键帧中定义））｜both（向前向后填充模式都应用）
JavaScript语法:
object.style.animationFillMade=”none”
Bacdwards在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性（在第一个关键帧中定义）
CSS背景属性（background）
Background属性；一个简写属性。
默认值：
notspecified继承性：
no版本：
css1+css3包括：
background-color/-position/-size/-repeat/-origin/-clip/-attachment/-image
Background-color属性值：
Color_nameredgreenblue
Hex_name#ff0000#00ff00#0000ff
Rgb_numberrgb（255,0,0）
Transparent透明（默认）
Inherit从父本元素继承
Background-position属性：
设置背景图像的起始位置，并设置图像背景原图像（由background-image定义），背景图像重复，将从这一点开始。
提示：
需要把background-attachment属性设置为”fixed”才能保证在Firefox和Opera中工作。
默认值：
0%%继承性：
no版本：
css1
Value
Topleft
Topcenter
Topright
Centerleft
Centerright
Bottomleft
Bottonright
Bottomcenter
center
如果只定义了一个关键词，那么第二个值将默认为center
X%Y%第一个值是水平位置第二个值是丢垂直位置
左上角0%0%右上角0%100%左下角100%0%右下角100%100%
如果只定义了第一个位置，那么第二个位置将默认为50%
XposYpos第一个水平，第二个垂直
单位是px其他css单位（0px0px）
如果只定义一个值，另外一个值默认为50%
注：
可以混用%和position值
Background-size属性：
规定背景图像的尺寸
默认值：
auto继承性：
no版本：
css3
语法；background-size:
length（宽度高度auto）|percentage（_%_%）cover（平铺最大使完全覆盖背景域？
背景图像的某些部分也许无法显示在背景定位域中）｜contain（图扩至最大使其宽高适应内容域）
JavaScript语法：
objectname.style.backgroundSize=”60px80px”
Background-repeat属性：
设置是否及如何重复背景图像，从图像开始重复，原图像由background-image定义，并根据background-position的值确定。
默认值；repeat继承性:
no版本：
css1
JavaScript语法：
object.style.backgroundRepeat=”repeat-y”
提示：
背景图像的位置根据background-position确定。
如果未规定background-position的属性，图像会被放置在左上角。
Value
Repeat在水平和垂直方向上都重复（默认）
Repeat-x在水平方向上重复
Repeat-y在垂直方向上重复
N0-repeat图像只显示
Inherit从父元素继承属性
Background-origin属性：
规定background-position相对于什么来定位
提示：
如果背景图像的background-attacchment属性设为”fixed”则属性没有效果。
默认值：
padding-box继承性：
no版本：
css3
语法：
background-origin:
padding-box（相对于内边距框来定位）｜border-box（相对于边框盒写定位）｜content-box（相对于内容框定位）
Background－clip属性：
规定背景的绘制区域。
默认值：
border-box继承性：
no版本：
css3
语法：
background-clip:
border-box（背景被裁剪到边框盒）｜padding-box（背景被裁剪到内边距框）｜content（背景被裁剪到内容框）
Background-attachment属性：
规定背景图像是否固定或者随着页面的其余部分滚动。
Value
Scroll图像随着页面其余部分滚动而滚动（默认）
Fixed当页面其余部分滚动时，图像不流动
Iherit规定从父元素继承
Background-image属性：
定义背景图像。
Value:
Noneurl（）inherit
Inherit:
规定从父元素继承background属性设置。
CSS边框属性（border）
Border属性：
一个简写属性。
Border-width/-style/-color
Border-width值
Thick粗Medium中等（默认）thin细length宽度Inherit
Border-style值:
None:
无边框
Hidden ：
与none相同，不过应用于表时除外，对于表，hidden用于解决边框冲突
Dotted：
定义点状边框，在大多浏览器中呈现为实线
Dashed：
定义虚线
Solid定义实线
Double：
双线（宽度等于border-width的值）
Groouve；3D凹槽边框（效果取决于border-color的值）
Ridge：
3D垄状边框（效果取决于border-color的值）
Inset：
3Dinset边框（效果取决于border-color的值）
Outset：
3Doutset边框（效果取决于border-color的值）
Inherit：
从父本元素继承边框属性
BorderBorder-leftborder-rightborder-topborder-bottom
以上属性值{border-widthborder-styleborder-color}
Border-width{上边框右边框下边框左边框}
Border-style{上边框右边框下边框左边框}
Border-color{上边框右边框下边框左边框}
如果只设置两个值则为{上下边框左右边框}
如果只设置三个值则为{上边框左右边框下边框}
border-image属性
包括border-source（边框图片路径）/
border-slice（图片内边框内偏移）/
border–width（边框宽度）/
border–outset
/border–repeat{边框图像区域超出边框量
value:
repeated（平铺）rounded（铺满）stretch（拉伸）}
默认值：
none100%10stretch继承性：
no版本：
css3
Border-radium属性：
用于设置四个border-X-radiums
默认：
0继承性：
no版本：
css3
语法；border-radiums:
1~4length|%/1~4length|%
Border-top-left-radiums
Border-top-right;radiums
Border-bottom-left-radiums
Border-bottom-right-radiums
CSSoutline属性;用于绘制元素周围的一条线，位于边框周围，可以起到一个突出元素的作用，轮廓线不一定是矩形，也不占空间。
包括outline-color/-style/-width
默认：
invertnonemedium继承性：
no版本：
css2
三种属性值与border中的三种属性完全一样
升级会员 