首页 > 代码库 > CSS属性简写汇总
CSS属性简写汇总
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样式属性简写待总结中。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。