您的位置:首页 > CSS技巧 > 【 返回上一页

CSS 代码简写优化

css代码简写——CSS代码优化

CSS代码简写代码优化目的让代码化繁为简,便于日后维护、便于开发、节约代码等目的。

简写优化
css 代码简写 CSS代码优化

达到同样的CSS样式效果,一个是比较复杂的CSS代码,一个是简单简化的CSS代码,ThinkCSS推荐以简化代码为主。

常见可以简写CSS属性样式代码:

1、背景简写

background教程:http://www.thinkcss.com/css/1119.shtml

背景颜色简写

background-color:#F00

背景颜色去掉-color

background:#F00

背景图片设置简写

background-image:url(背景图片地址);background-repeat:no-repeat;background-position:10px 20px

简写:

background:url(背景图片地址) no-repeat 10px 20px

2、padding的简写:
padding教程:http://www.thinkcss.com/css/984.shtml

padding简写

padding-bottom:5px; padding-top:5px; padding-left:5px; padding-right:5px

相同值padding简写为

padding:5px

 

padding简写

padding-top:5px; padding-right:6px ;padding-bottom:7px;padding-left:8px; 

简写为

padding:5px 6px 7px 8px

 

padding简写

padding-bottom:5px;padding-top:5px;padding-left:10px;padding-right:10px;

简写为

padding:5px 10px;

 

padding简写

padding-top:5px;padding-left:10px;padding-right:10px;padding-bottom:15px;

简写为

padding:5px 10px 15px;

3、margin的简写
margin教程:http://www.thinkcss.com/css/1006.shtml

margin-bottom:5px; margin-top:5px; margin-left:5px; margin-right:5px

相同值margin简写

margin:5px

 

margin简写

margin-top:5px; margin-right:6px ;margin-bottom:7px;margin-left:8px; 

简写为

margin:5px 6px 7px 8px

 

margin简写

margin-bottom:5px;margin-top:5px;margin-left:10px;margin-right:10px;

简写为

margin:5px 10px;

 

margin简写

margin-top:5px;margin-left:10px;margin-right:10px;margin-bottom:15px;

简写为

margin:5px 10px 15px;

4、border边框缩写
border边框教程http://www.thinkcss.com/css/912.shtml

border-color:#000; border-style:solid; border-width:1px

简写为:

border:#000 solid 1px

 

border-left简写

border-left-color:#000; border-left-style:solid; border-left-width:1px

简写为:

border-left:#000 solid 1px

 

border-right简写:

border-right-color:#000; border-right-style:solid; border-right-width:1px

简写为:

border-right:#000 solid 1px

 

border-top简写:

border-top-color:#000; border-top-style:solid; border-top-width:1px

简写为:

border-top:#000 solid 1px

 

border-bottom简写:

border-bottom-color:#000; border-bottom-style:solid; border-bottom-width:1px

简写为:

border-bottom:#000 solid 1px

以上常用需要注意直接使用简写CSS属性的样式。

如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/jiqiao/1319.shtml

修订日期:2017-04-05 22:27 www.thinkcss.com div css
上一篇:div padding div设置padding内边距样式
下一篇:没有了