IT猫扑网:您身边最放心的安全下载站! 最新更新|软件分类|软件专题|手机版|论坛转贴|软件发布

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

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

时间:2015/6/28来源:IT猫扑网作者:网管联盟我要评论(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(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

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

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

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

相关阅读

文章评论
发表评论

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

相关下载

人气排行 DIV CSS完美兼容IE6/IE7/FF的通用方法CSS实例:list-style-type在IE与FF中奇怪的现象解析-CSS布局实例CSS实例:通过定义渐变边框给图片加阴影CSS常用技巧之一 禁止文字自动换行解决用CSS控制DIV居中失效的问题网页页面设计中CSS十大注意css div设置float后高度不能自动增加让CSS兼容IE和Firefox的技巧集合