去掉CSS赘余代码,CSS可以更简洁
2011-09-20 17:05
218 查看
本篇文章适合css新手学习,对于已经掌握了css的朋友们也可以通过本片文章来复习知识。 作者通过实践,
认为在有些情况下css的代码是可以更加简洁的,多数情况下是因为新手对于一些具有多属性的元素代码不能精简来写造成的。
精简的代码对于网页是有莫大的好处的,对于浏览者访问速度会有一定的提升,另外对于搜索引擎也更加可以抓取网页关键内容。
废话不说了,下面就看看笔者总结的可以精简的代码
1.Margin & Padding
精简后代码如下:
例2:
精简后代码:
例3:
精简后代码:
例4:
精简后代码:
2.border的缩写
例1:
精简后代码:
例2:
精简后代码:
例3:
精简后代码:
3.Background缩写
精简后代码:
4.font
精简后代码:
5.list缩写
精简后代码:
6.颜色的缩写
以上元素多属性,因此在某些时候可以遵从一定的规律对它们进行缩写。
更多精彩内容正在整理中,欢迎继续浏览。
认为在有些情况下css的代码是可以更加简洁的,多数情况下是因为新手对于一些具有多属性的元素代码不能精简来写造成的。
精简的代码对于网页是有莫大的好处的,对于浏览者访问速度会有一定的提升,另外对于搜索引擎也更加可以抓取网页关键内容。
废话不说了,下面就看看笔者总结的可以精简的代码
1.Margin & Padding
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
以上元素多属性,因此在某些时候可以遵从一定的规律对它们进行缩写。
更多精彩内容正在整理中,欢迎继续浏览。
相关文章推荐
- 去掉CSS赘余代码,CSS可以更简洁
- 纯CSS简洁的TAB切换效果代码
- CSS架构:代码简洁原则
- Csdn Blog模板CSS代码(2):简洁space风格
- [自用门户]介绍css中背景居中显示,介绍边框显示效果(可以试试去掉的效果)
- 采用CSS+JS实现简洁的滑动导航栏_网页代码站(www.webdm.cn)
- 浅绿色简洁CSS导航菜单代码
- 一款经典简洁的CSS滑动门代码
- 最简洁的技文语法着色代码(css+js)
- 最简洁的技文语法着色代码(css+js)
- C#缺省参数可以让代码变得更加简洁明了与时俱进心里敞亮了很多了
- css简洁代码实现 两端对齐
- 超简洁CSS代码感应鼠标放大图片
- 去掉代码中的空行和注释行,可以使用以下正则表达式替换。
- CSS架构:代码简洁原则
- 编写简洁高效的CSS代码
- intell IDEA 代码自动提示功能没有LE ---File >Power Save Mode 被勾选了 去掉勾选就可以了
- 【新手入门教程】简洁纯CSS下拉导航菜单代码
- 用来制作网页特效的CSS代码,也可以用来挂马
- 在eclipse下是的编写HTML/CSS/JS/JSP代码时可以自动提示的解决办法