1、本篇总结了一些 css 常用技巧，为网站重构打下基础，但愿您能学到一点有用的东西。 一.使用 css 缩写 使用缩写可以帮助减少你 CSS 文件的大小，更加容易阅读。css 缩写的主要规则请参看css 基本语法。二.明确定义单位，除非值为 0 忘记定义尺寸的单位是 CSS 新手普遍的错误。在 HTML 中你可以只写;100，但是在 CSS 中，你必须给一个准确的单位，比如：“ width:100em。只有两个例外情况可以不定义单位：行高和 0 值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。三.区分大小写 当在 XHTML 中使用 CSS，CSS 里定义的元素名称是区分大
2、小写的。为了避免这种错误，我建议所有的定义名称都采用小写。class 和 id 的值在 HTML 和 XHTML 中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在 CSS 的定义和 XHTML 里的标签是一致的。四.取消 class 和 id 前的元素限定 当你写给一个元素定义 class 或者 id，你可以省略前面的元素限定，因为 ID 在一个页面里是唯一的，鴆 las s 可以在页面中多次使用。你限定某个元素毫无意义。例如：div#content /* declarations */ fieldset.details /* declarations */ 可以写成#conten
3、t /* declarations */ .details /* declarations */ 这样可以节省一些字节。 五.默认值 通常 padding 的默认值为 0，background-color 的默认值是 transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的 margin和 padding 值都为 0，象这样：* margin:0; padding:0; 六.不需要重复定义可继承的值 CSS 中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能
4、用一些默认值覆盖你的定义。七.最近优先原则 如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码Update: Lorem ipsum dolor set在 CSS 文件中，你已经定义了元素 p，又定义了一个 classupdatep margin:1em 0; font-size:1em; color:#333; .update font-weight:bold; color:#600; 这两个定义中，class=“update 将被使用，因为 class 比 p 更近。你可以查阅 W3C 的“ Calculating a selectors specific
5、ity 了解更多。八.多重 class 定义 一个标签可以同时定义多个 class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有 10 px 的边框。.one;background:#666;.twoborder:10px solid #F00; 在页面代码中，我们可以这样调用 div class=“one“ two/div 这样最终的显示效果是这个 div 既有#666 的背景，也有 10px 的边框。是的，这样做是可以的，你可以尝试一下。九.使用子选择器(descendant selectors) CSS 初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮
6、助你节约大量的 class 定义。我们来看下面这段代码：div id=“subnav“ ul li class=“subnavitem“ a href=# class=“subnavitem“Item 1/a/li li class=“subnavitemselected“ a href=# class=“subnavitemselected“ Item 1/a /li li class=“subnavitem“ a href=# class=“subnavitem“ Item 1/a /li/ul /div 这段代码的 CSS 定义是：div#subnav ul /* Some stylin
7、g */ div#subnav ul li.subnavitem /* Some styling */ div#subnav ul li.subnavitem a.subnavitem /* Some styling */ div#subnav ul li.subnavitemselected /* Some styling */ div#subnav ul li.subnavitemselected a.subnavitemselected /* Some styling */ 你可以用下面的方法替代上面的代码ul id=“subnav“ li a href=# Item 1/a /li li class=“sel“ a href=# Item 1/a /li li a href=# Item 1/a /li /ul样式定义是：#subnav /* Some styling */ #subnav li /* Some styling */ #subnav a /* Some styling */ #subnav .sel /* Some styling */ #subnav .sel a /* Some styling */ 用子选择器可以使你的代码和 CSS 更加简洁、更加容易阅读。
