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


新闻标题:CSS样式属性单词代码简写方式有哪些
转载源于:http://scjbc.cn/article/jppped.html

其他资讯