一些常用属性值的顺序

一些常用属性值的顺序

1.元素边框

border:1px solid red;

border:粗细尺寸 线的样式 颜色；

2.元素背景

background:#f00 url(background.gif) 0 0 no-repeat fixed top;

background:颜色 图像 图像位置 图像大小 是否重复 是否固定 origin 向外剪裁；

• bg-origin:设置背景图像显示的原点[bg-position相对定位的原点]

3.font属性值

font:italic small-caps bold 12px/15px arial,sans-serif

font:字体样式 字体异体 粗细 字号/行高 文字字体

font-variant:字体异体,属性有3个

• normal:默认值，标准字体
• small-caps:会显示小型大写字母
• inherit:继承父元素的属性值

4.list-style属性值

list-style:类型 位置(内外) 插入图像

• type:列表标记类型 circle square upper-alpha lower-roman等
• position:列表标记位置 outside inside(列表标记在内，环绕文本根据标记对齐)
• image：列表标记的图像 url(…)

5.元素外边距

margin：1px 2px 3px 4px;

margin:上 右 下 左；

6.动画

animation:moves 10ms ease 1s 2 reverse paused;

animation:name duration timing-function delay iteration-count play-state

• animation-duration：动画执行时间
• animation-timing-function:设置动画如何完成一个周期
• animation-delay:动画延迟间隔
• animation-iteration-count:动画执行次数
• animation-play-state:指定停止或正在运行的动画

7.文本修饰

text-decoration:overline wavy red;/*文字上方红色波浪线*/

text-decoration：线条装饰方式 线条样式 颜色；

8.过渡

transition:width 2s linear 1s;

四种属性需按顺序排列：

• property:指定css属性的name或transition效果
• duration：效果的时间
• timing-function:效果的转速曲线
• delay：定义效果开始的时候