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

您当前所在位置：首页 → 网络编程 → DIVCSS → 去掉CSS赘余代码，CSS可以更简洁

去掉CSS赘余代码，CSS可以更简洁 时间：2015/6/28来源：绿色软件之家作者：网管联盟我要评论(0): 　　本篇文章适合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(?article/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(?article/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(?article/images/bullet.gif);

　　list-style-position:inside;

　　list-style-tupe:squere;

　　}

　　精简后的代码：

　　.div {

　　list-style:square inside url(?article/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

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

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

关键词标签：简洁,可以,代码,.div,

相关阅读

文章评论

查看所有0条评论>>

热门文章 DIV+CSS网页布局常用的一些基础知识整理