去掉CSS赘余代码,CSS可以更简洁

王朝网站推广·作者佚名  2011-12-04
窄屏简体版  字體: |||超大  

本篇文章适合css新手学习,对于已经掌握了css的朋友们也可以通过本片文章来复习知识。

作者通过实践,认为在有些情况下css的代码是可以更加简洁的,多数情况下是因为新手对于一些具有多属性的元素代码不能精简来写造成的。

精简的代码对于网页是有莫大的好处的,对于浏览者访问速度会有一定的提升,另外对于搜索引擎也更加可以抓取网页关键内容。废话不说了,下面就看看笔者总结的可以精简的代码:

1.Margin & Padding

例1:

.div {

margin-top:10px;

margin-right: 5px;

margin-bottom:30px;

margin-left:0px;

}

精简后代码如下:

.div { margin:10px 5px 30px 0;})

例2:

.div {

margin-top:10ox;

margin-right:20px;

margin-bottom:0;

margin-left:20px;

}

精简后代码:

.div {

margin:10px 20px 0;

}

例3:

.div {

margin-top:0;

margin-right:auto;

margin-bottom:0;

margin-left:auto;

}

精简后代码:

.div {

margin:0 auto;

}

例4:

.div {

margin-top:50px;

margin-right:50px;

margin-bottom:50px;

margin-left:50px;

}

精简后代码:

.div { margin:50px; }

2.border的缩写

例1:

.div {

border-width:5px;

(thin,thick,medium,set vaule)(default=medium)

border-style:dotted;

(solid,dashed,dotted,double,etc)(default=none)

border-color:blue;

(named,hex,rgb or 0-255)(default=value of elements/elements parent color property)

}

精简后代码:

.div {

border:5px dotten blue;

}

例2:

.div {

border-right-width:2px;

border-right-style:solid;

border-right-color:#666666;

}

精简后代码:

.div {

border-right:2px solid #666;

}

例3:

.div {

border-top-width:3xp;

border-right-width:2px;

border-bottom-width:3px;

border-left-width:2px;

}

精简后的代码:

.div {

border-width:3px 2px;

}

3.Background缩写

.div {

background-color:#CCCCCC;

(named,hex,rgb,0-255)(default=transparent)

background-image:url(images/bg.gif);

(url or none)(defaule=none)

background-repeat:no-repeat;

(repeat,repeat-x,repeat-y or no-repeat)(default=repeat)

background-attachment:scroll;

(fixed or scoll)(default=scroll)

background-position:top left;

(top,right,left,bottom or center)(default=0% 0%)

}

精简后代码:

.div {

background:#CCC url(images/bg.gif) no-repeat 0 0;

}

4.font

.div {

font-family:Verdana,Arial,Helvetica;

font-size:12px;

font-weight:bold;

font-style:italic;

font-variant:normal;

line-height:1.5;

}

精简后代码:

.div {

font:italic bold 12px/1.5 Verdana,Arial,Helcetica;

}

5.list缩写

.div {

list-style-image:url(images/bullet.gif);

list-style-position:inside;

list-style-tupe:squere;

}

精简后的代码:

.div {

list-style:square inside url(images/bullet.gif);

}

6.颜色的缩写

Aqua:#00ffff to #0ff

Black:#000000 to #000

Blue:#0000ff to # 00f

Dark Grey:#666666 to #666

Fuchsia:#ff00ff to #f0f

Light Grey:#cccccc to #ccc

Lime:#00ff00 to #0f0

Orange:#ff6600 to #f60

White:#ffffff to #fff

Yellow:#ffff00 to #ff0

以上元素多属性,因此在某些时候可以遵从一定的规律对它们进行缩写。

更多精彩内容正在整理中,欢迎继续浏览。

文章来源:小帅博客 (http://www.lam5.cn )转载请保留链接。谢谢合作。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航