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;
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！