CSS属性简写汇总
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS属性简写汇总，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2287字，纯文字阅读大概需要4分钟。
内容图文
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样式属性简写待总结中。
原文：http://my.oschina.net/u/1866405/blog/291247
内容总结
以上是互联网集市为您收集整理的CSS属性简写汇总全部内容，希望文章能够帮你解决CSS属性简写汇总所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。