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样式属性单词代码简写方式有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。