您的位置：首页 > Web前端 > CSS

CSS属性简写汇总

2014-07-15 00:00 302 查看
摘要:CSS代码编写的过程中，代码数量非常庞大，许多属性会被反复使用，这样来来回回地敲打同样的属性名称会占用不少的时间。作为一名优秀的web前端人员，应当了解记忆各种属性的简写方式，用以提高自身的工作效率，缩减代码数量，增强可读性。作为一名刚接触不久的初学者，在网上搜集资料，整理了常用属性的简写模式，供大家参考。

CSS代码编写的过程中，代码数量非常庞大，许多属性会被反复使用，这样来来回回地敲打同样的属性名称会占用不少的时间。作为一名优秀的web前端人员，应当了解记忆各种属性的简写方式，用以提高自身的工作效率，缩减代码数量，增强可读性。作为一名刚接触不久的初学者，在网上搜集资料，整理了常用属性的简写模式，供大家参考。

1、颜色color简写

在颜色值采用16进制，且每两位的值相同，可以简写一半。

1
color

:

#113366

;

简写为

1
color

:

#136

;

2、边距margin和padding简写

外边距margin和内边距padding在CSS中使用率是很高，margin和padding都有四个方向的边距

1

2

3

4
padding-top

:

2px

;


padding-right

:

2px

;


padding-bottom

:

2px

;


padding-left

:

2px

;

有四种简写方式，都很好记

1

2

3

4
padding

:

1px

;//四个方向的边距相同


padding

:

1px

2px

;//第一个值表示上下边距，第二个值表示左右边距


padding

:

1px

2px

3px

;//第一个值表示上边距，中间值表示左右边距，第三个值表示下边距


padding

:

1px

2px

3px

4px

;//边距值以顺时针方向显示，上、右、下、左

3、边框border简写

边框有三个属性

1

2

3

4

5
border-width：

1px

2px

3px

4px

; //上下左右，类似边距的简写


border-style：

solid

dashed

dotted

groove

;


border-color

:

red

#ffffff

;

1


按照width、style和color的顺序简写


1

border:

1px

solid

#ffffff

;//个人喜欢总结为三字口诀“粗型色”

4、背景background简写

一共五个属性，background采用简写将大大提供效率

1

2

3

4

5
background-color

:

#ffffff

||

transparent

;


background-image

:

url

() ||

none

;


background-repeat

:

repeat

||

repeat-x

||

repeat-y

||

no-repeat

;


background-position

:X Y ||(

top

||

bottom

||

center

) (

left

||

right

||

center

);


background-attachment

:

scroll

||

fixed

;

background简写按顺序如下

1
background

:

#fff

url

(img.gif)

no-repeat

0

0

;//个人总结五字口诀“色图重定位”

background的属性有默认值，且不会继承，你可以只声明其中的一个，其它的值会被应用默认值。

1
background

:

transparent

none

repeat

scroll

top

left

;

5、字体font简写

font有六个属性，采用简写的话比如简化代码提供效率，不过简写规则要求比较高，要注意

1

2

3

4

5

6
font-style

:

normal

||

italic

||

oblique

;


font-variant

:

normal

||

small-caps

;


font-weight

:

normal

||

bold

||

bolder

||||

lighter

||(

100

-900

);


font-size

:

16px

||

1em

;


line-height

:

normal

||

16px

;


font-family

:

arial

,

sans-serif

;



上图可以看出font简写规则中font-size和font-famil是必写的，其他的四个属性可选，四个属性默认值都为normal，未声明属性则应用默认值。

1
font

:

italic

normal

bold

12px

/

20px

arial

,

sans-serif

;//个人惯用口绝“型转粗，大高体”

6、列表list-style简写

估计大家用得最多的一个列表属性是list-style:none;其实list-style也有三个属性

1

2

3
list-style-type

:

none

||

disc

||

circle

||

square

||

decimal

||

lower-alpha

||

upper-alpha

||

lower-roman

||

upper-roman


list-style-position

:

inside

||

outside

||inherit


list-style-image

:(

url

) ||

none

||inherit

list-style的默认属性如下，三个都是可选属性，未声明则应用默认值，但是如果声明list-style-image则

list-style-type无效。

1
list-style

:

disc

outside

none

;

常用的CSS简写规则总结完毕，CSS3样式属性简写待总结中。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  CSS 属性简写
相关文章推荐
新的分享
章节导航