CSS样式属性单词代码简写方式有哪些
这篇文章将为大家详细讲解有关CSS样式属性单词代码简写方式有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
1、border(CSS边框)简写：
1)、4个边边框宽度为1px，色彩为#000
border-color:#000; border-style:solid; border-width:1px
概略简写为：
border:1px solid #000;
2)、单独上、下、左、左边框简写
左边：
border-left-color:#000; border-left-style:solid; border-left-width:1px
简写：
border-left:1px solid #000
左边：
border-right-color:#000; border-right-style:solid; border-right-width:1px
简写：
border-right:1px solid #000
上边：
border-top-color:#000; border-top-style:solid; border-top-width:1px
简写：
border-top:1px solid #000
下边：
border-bottom-color:#000; border-bottom-style:solid; border-bottom-width:1px
简写：
border-bottom:1px solid #000
3)、身手性简写边框
无意偶尔只设置3边的边框时刻，我们或者手段性削减代码量。
假设我们不设置上边框，而其他3边为1px完成玄色边框。
传统代码：
Div{border-right:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000}简写：
Div{border:1px solid #000;border-top:0}这样抵达雷同成果也大大地削减CSS代码量
体会更多css边框美化膨胀教程。
2、padding（CSS padding）简写：
1)、四边设置padding内补白属性
古板思想：
Padding-left:2px;Padding-right:3px;Padding-top:4px;Padding-bottom:5px
笼统css padding简写：
Padding:4px 3px 5px 2px
2）、只对3边配置padding
要是咱们差迟"上"设置装备摆设padding，别的3边设置装备摆设padding属性
古板：
Padding-left:2px;Padding-right:3px;Padding-bottom:5px
简写：
Padding:0 3px 5px 2px
3边不异情况：
古板：
Padding-left:2px;Padding-right:2px;Padding-bottom:2px
简写：
Padding:0 2px 2px 2px;
3、margin简写
Margin与padding缩写类似
1）、四边间距设置装备摆设缩写：
传统：
Margin-left:2px;Margin-right:3px;Margin-bottom:5px;Margin-top:4px;
简写：
Margin:4px 3px 5px 2px
2)、四边设置间隔雷同缩写
古板：
Margin-left:2px;Margin-right:2px;Margin-bottom:2px;Margin-top:2px;
简写：
Margin:2px
3）、上下不异、支配雷同
Margin-left:2px;Margin-right:2px;Margin-bottom:5px;Margin-top:5px;
简写：
Margin:5px 2px
4、background简写
bac千克round-color:#000;
也许简写为
bac公斤round:#000;
bac千克round-image:url(图片地点)
可简写为：
bac公斤round:url(图片地址)
CSS背景比较经常使用的花样属性，包孕独自配置一个后台颜色、独自设置靠山为图片、单独配置后盾图片是否几回再三，一再是所有几回再三照旧依据X横向或Y纵向反复。接上来我们先容bac公斤round后援名堂经常使用简写与把稳。
1）、单独设置装备摆设配景一种色采的背景优化
background-color:#CCC
美化为：
background:#CCC
2）、背景为图片，X横向频频平铺
bac公斤round-image:url(//www.css5.com.cn/img201207/CSS5-logo-2012.gif); bac公斤round-position:0 0; background-repeat:repeat-x
简写：
bac千克round:url(//www.css5.com.cn/img201207/CSS5-logo-2012.gif) repeat-x 0 0;
2）、靠山为图片，Y纵向一再平铺
bac千克round-image:url(//www.css5.com.cn/img201207/CSS5-logo-2012.gif); bac公斤round-position:0 0; bac千克round-repeat:repeat-y
CSS简写美化为：
bac千克round:url(//www.css5.com.cn/images2012/logo.gif) repeat-y 0 0;
3）、配景为图片，不反复平铺CSS压缩
bac千克round-image:url(//www.css5.com.cn/img201207/CSS5-logo-2012.gif);bac千克round-position:0 0; background-repeat:no-repeat
简写：
background:url(//www.css5.com.cn/img201207/CSS5-logo-2012.gif) no-repeat 0 0;
4）、配景为图片，网页全布景X与Y一再平铺
bac公斤round-image:url(//www.css5.com.cn/img201207/CSS5-logo-2012.gif);
简写吞并：
background:url(//www.css5.com.cn/img201207/CSS5-logo-2012.gif) ;
5）、后援为黑色，图片向X横向反复平铺
background-color:#CCC;bac千克round-image:url(//www.css5.com.cn/img201207/CSS5-logo-2012.gif); background-position:0 0; background-repeat:repeat-x;
简写兼并：
bac千克round:#CCC url(//www.css5.com.cn/img201207/CSS5-logo-2012.gif) repeat-x 0 0;
这里当心色彩与图片前后轨范。
5、font简写
font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif;
可简写为：
font:12px/12px Arial, Helvetica, sans-serif;
关于"CSS样式属性单词代码简写方式有哪些"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
