CSS简写规则技巧

说好的幸福呢

说好的幸福呢

2015-02-09 15:26

设计源于生活中的点点滴滴,不存在凭空的想法,只有在实践中不断去学习,才能提高自己,10个CSS简写/优化技巧教程,希望能够帮助到大家!

CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写。CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读。

下面介绍常见的CSS简写规则:

一、盒子大小

这里主要用于两个属性:margin和padding,我们以margin为例,padding与之相同。盒子有上下左右四个方向,每个方向都有个外边距:

margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;

你可以简写成:

margin:1px 2px 3px 4px;

语法margin:toprightbottomleft;

//四个方向的边距相同,等同于margin:1px 1px 1px 1px;margin:1px;//上下边距都为1px,左右边距均为2px,等同于margin:1px 2px 1px 2px;margin:1px 2px;//右边距和左边距相同,等同于margin:1px 2px 3px 2px;margin:1px 2px 3px;//注意,这里虽然上下边距都为1px,但是这里不能缩写。margin:1px 2px 1px 3px;
 

二、边框(border)

边框的属性如下:

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

可以缩写为一句:

border:1px solid #000;

语法border:widthstylecolor;

三、背景(Backgrounds)

背景的属性如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)
background-color:#f00;background-image:url(background.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:00;

可以缩写为一句:

background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:colorimagerepeatattachmentposition;你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:

color:transparent

image:none

repeat:repeat

attachment:scroll

position:0%0%

四、字体(fonts)

字体的属性如下:

font-style:italic;font-variant:small-caps;font-weight:bold;font-size:1em;line-height:140%;font-family:"Lucida Grande",sans-serif;

可以缩写为一句:

font:italic small-caps bold 1em/140%"Lucida Grande",sans-serif;

注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。

五、列表(lists)

取消默认的圆点和序号可以这样写list-style:none;,list的属性如下:

list-style-type:square;list-style-position:inside;list-style-image:url(image.gif);

可以缩写为一句:

list-style:square inside url(image.gif);
 

六、颜色(Color)

16进制的色彩值,如果每两位的值相同,可以缩写一半。例如:

Aqua:#00ffff——#0ffBlack:#000000——#000Blue:#0000ff——#00fDarkGrey:#666666——#666Fuchsia:#ff00ff——#f0fLightGrey:#cccccc——#cccLime:#00ff00——#0f0Orange:#ff6600——#f60Red:#ff0000——#f00White:#ffffff——#fffYellow:#ffff00——#ff0

七、属性值为0

书写原则是如果CSS属性值为0,那么你不必为其添加单位(如:px/em),你可能会这样写:

padding:10px 5px 0px 0px;

试试这样吧:

padding:10px 5px 00 ;

八、最后一个分号

最后一个属性值后面分号可以不写,如:

#nav{border-top:4px solid #333;font-style: normal;font-variant:normal;font-weight: normal;}

可以简写成:

#nav{border-top:4px solid #333;font-style: normal;font-variant:normal;font-weight: normal}

九、字体粗细(font-weight)

你可能会这样写:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)
h1{font-weight:bold;}p{font-weight:normal;}

可以简写成:

h1{font-weight:700;}p{font-weight:400;}
十、圆角半径(border-radius)

border-radius是css3中新加入的属性,用来实现圆角边框。

-moz-border-radius-bottomleft:6px;-moz-border-radius-topleft:6px;-moz-border-radius-topright:6px;-webkit-border-bottom-left-radius:6px;-webkit-border-top-left-radius:6px;-webkit-border-top-right-radius:6px;border-bottom-left-radius:6px;border-top-left-radius:6px;border-top-right-radius:6px;

可以简写成:

-moz-border-radius:0 6px 6px;-webkit-border-radius:0 6px 6px;border-radius:0 6px 6px;

语法border-radius:toplefttoprightbottomrightbottomleft

展开更多 50%)
分享

猜你喜欢

CSS简写规则技巧

平面设计 PS基础
CSS简写规则技巧

CSS学习之css代码的简写的十条规则

Web开发
CSS学习之css代码的简写的十条规则

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

10个CSS简写技巧让你永远受用

Web开发
10个CSS简写技巧让你永远受用

浅谈10个CSS简写和优化的心得技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
浅谈10个CSS简写和优化的心得技巧

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

CSS样式命名规则

Web开发
CSS样式命名规则

CSS语法缩写规则

Web开发
CSS语法缩写规则

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

创意设计舒适脚垫图集

创意设计舒适脚垫图集

ps怎样修逆光人物图片

ps怎样修逆光人物图片
下拉加载更多内容 ↓