夏岳嵩的Blog - DIV+CSS

高效使用CSS编码的方法

xia05070115@126.com(xiayuesong) — Wed,04 Mar 2009 10:37:59 +0800

CSS 之所以被看好的原因之一就在于它能减小页面大小，而由此缩短网页下载时间，不仅仅是首页的载入，还包括样式表被缓存以后，后续页面的载入也被加快了的那部分时间。这没错，但首页载入时间的缩短几乎看不出来，这是因为 CSS 代码往往过于冗长了。

　　好吧，现在一切都不同了。学点高效地进行 CSS 编码的技巧吧，让你把样式表马上裁减到最小为止。自然，你可能看不到什么惊人的改变，但对于大站来说，微小的字节减少也很重要。

　　有很多地方可以减少代码的长度，包括简记属性 (shorthand properties)，多重声明 (multiple declarations)，默认值 (default values)，继承 (inheritance)，和空白 (white space)。

　　简记属性

　　Zeroing page margins 提到了一组这样的简记属性，但对于此还有更多的。

　　通常简记属性包括：　　

以下是引用片段：
Example Source Code font (控制 "font-size", "font-weight", "line-height", 等等) background (控制元素的背景，放置位置，重复次数，等等)
　　list-style (设置列表元素前边那个“原点”的属性)
　　margin (定义 box 各侧的边缘空白 (margin) 宽度)
　　border (定义 box 边界 (border) 的属性 —— 有很多和边界有关的简记属性) padding (定义 box 各侧的补白 (padding) 宽度)

　　例如， font 属性是用于同时设置 font-style, font-variant, font-weight, font-size, line-height, 和 font-family 的简记属性。当然，它们并非全都必须写在简记属性中。一旦在简记属性中忽略了其中某个，那些缺失的属性都将被设置为它们的初始值，就像 W3C 规范中 font property 一节提到的那样。若需要控制很多和字体相关的属性，使用这个简记属性就可以省下样式表中的大量字节了。

　　background 和 list-style 属性也是如此。现在还剩下关于 CSS 盒 (box) 模型四边的那些属性和一点没法归类的杂碎了。

　　盒侧边的简记属性

以下是引用片段：
任何块级 (block level) 元素 (像 div，表格，列表，段落等) 的四边都有边白 (margin)，边界 (border)，和补白 (padding)，都可以分别设置不同的宽度。对于边界 (border) 来说，还能给每边分配不同的 border-style 和 border-color 。若要一条条地显式地指明所有这些属性，代码就会变得很冗长。使用简记规则的意义正在于此：彻底地减少这样负担。

　　“钟面”

　　当需要指定这三类“盒侧”属性之一，而且各侧的情况又是一样的时候，使用简记属性最基本的功能就行了：　　

以下是引用片段：
Example Source Code margin: 5px;border-width: 5px;padding: 5px;

　　注意：要让边界显示出来，还必须设置 border-style 属性，否则单有 border-width 边界是显示不出来的。既可以直接通过 border-style 来设置它，也可以通过 border 属性。

　　然而很有可能某一侧需要一个不同的值，这时 CSS 的“钟面”特性就上台了。把此处的盒子想象为一个钟面，当指针指向 12 点时，表示盒子的正上方，这就是简记属性中第一个值的含义;下一个是 3 点，这是盒子的右侧;接下来是 6 点，表示盒子的下方;最后呢是 9 点，盒子的左侧。

　　让我们看看这个例子吧。在页面中我们需要一个 10px 上边白，5px 右边白， 3px 下边白，无左边白的盒子。则 margin 简记属性应该这么写：　　

以下是引用片段：
Example Source Code margin: 10px 5px 3px 0;

　　在属性的声明中，几个值必须也只能用空格来分隔。而且只要那个值不是零，就必须给它指定单位。

　　为什么零宽度的边白就不需要指定单位了呢?因为零个任何单位 (px, em, %, 等等) 的值也就等于任意其他单位的值。

　　改进的钟面

　　当某些值重复时，这些“盒侧”属性还能压榨得更短。前面提到过，若各侧都一样，可以只指定一个，让它应用到全部。而一旦顶部和底部的样式是一致的，左侧和右侧却是另一种，margin 的代码可以这么写：　　

以下是引用片段：
Example Source Code margin: 10px 5px;

　　这行代码把顶部和底部的边白设置为 10px，两侧设为 5px。最后一个技巧是这样的：若顶部和底部的不同，两侧的却是一样的，比如上边白 10px，左右边白 5px，下边白 20px，我们可以这么写：　　

以下是引用片段：
Example Source Code margin: 10px 5px 20px;

　　这些缩写完全是根据给出值的数目和顺序决定的。总结起来，一个值 = 所有各侧;两个值 = 上下一种，两侧另一种;三个值 = 上侧一种，左右同一种，下侧一种;当然还有四个值 = 按照顺时针。好了，现在不那么难记住了吧?

边界 (border) 的一些区别

　　同样的钟面简记模型也可以用于 border 简记属性和 padding。 border-width , border-color , border-style , 与 padding 也采用和 margin 一样的方式工作。然而处理 border 属性时却有点不同。 border 属性是同时给盒子的各侧设置 border-width, border-style, 及 border-color 属性的。

　　如果所有四侧的样式都一样，那当然不会有什么问题。可万一他们不同呢?我们还得回去用那些老式的 border-top, border-right 们?没错，是可以。但幸好我们还有更有效率一点的方法。

　　考虑我们这个盒子的各个边界有同样的 style 和 color，但宽度不同的情况，最有效的方法是，先像往常一样用 border 简记法来定义好 border-width, border-style, 和 border-color;然后再设置一次 border-width 属性，覆盖上面设置的宽度：

以下是引用片段：
Example Source Code border: 10px solid red;
　　border-width: 10px 5px 3px 0;

　　如果所有的边界属性 (width、style 和 color) 都各侧不同，那上面的方法恐怕就没什么用了，但通常不会遇到这么怪异的情况。如果变化的属性仅仅是 border-style 或者 border-color 的话，上述的方法改改就可以像 border-width 的情况那样用了。

　　下面我们看看在另一种情形下书写高效的 CSS 会带来什么改变。

　　多重声明

　　考虑我们有 6 个采用绝对定位的 div (比如 Dreamweaver 里的层)，且它们的其他属性都一样，只不过在页面中的位置不同。因为它们的位置不同，自然应该有不同的 ID 或者是 class，但剩下的属性还是一样的。

　　一个 (所见即所得的) 布局编辑器恐怕给每个 ID 都各自写一套属性，包括字体的规则、文本的规则、位置的定义等等。可一遍遍地给这些 div 重复完全一样的规则未免笨了点，不是么?那这样就可以把这些规则减到最短了：

以下是引用片段：
Example Source Code #first {left: 0;}
　　#second {left: 100px;}
　　#third {left: 200px;}
　　#fourth {left: 300px;}
　　#fifth {left: 400px;}
　　#sixth {left: 500px;}
　　#first, #second, #third, #fourth, #fifth, #sixth {
　　position: absolute;
　　top: 0;
　　width: 75px;
　　font-size: .9em;
　　font-weight: bold;
　　text-align: center;
　　line-height: 1.4em;
　　background-color: silver;
　　color: navy;
　　padding: 5px;
　　border: 1px solid navy;
　　}

　　列出所有类似的这些 div 的 ID，用 , 和一个空格分隔，下面的规则块会被应用到所有这些 ID 上。显然这样的规则如果给每个 ID 都重复一遍，代码就膨胀得多了。这恐怕是最常用也最有效的缩短样式表方法了。

　　注意：注意最后一个 ID 选择符并没有跟着一个逗号。(若多了逗号) 有些浏览器中可能还能看到那些 div，另一些就有可能把这样的样式表视为错误而不显示任何一个 div 了。

　　默认值

　　许多 CSS 属性都有它们的默认值，如果这个属性没被定义取代，它们就将应用于 HTML 元素上。比如说每个补白属性中， padding-top , padding-right , padding-bottom , 和 padding-left 的初始值都是 0 。因此如果某个元素不需要任何的补白，自然就可以不设置补白的那些属性了。

　　注意：那些简记属性——比如我们先前讨论过的—— 里面，或者其本身都没有什么默认的值。毕竟简记属性其实只是独立属性的一种重现而已，所以如果硬说它们有默认值的话，采用的也是独立属性的那些默认值。尽管 CSS 规范的 Property Index 一节中规定的许多默认值都是 none 或 0 ，浏览器们却往往给不同的属性设置一些不同的默认值。

　　例：Opera 浏览器给 body 元素设置了 8px 的补白。h1-h6 标题和段落，默认都有非零的边白。列表和列表子项中用到的默认边白和补白，每个浏览器都有所不同。

　　继承

　　另一个避免写出冗余代码的方法是，了解哪些属于父元素的属性会由子元素继承下来。会被继承的属性只有很少一些，而且其中大部分是不常用的，比如 voice-family 。所以列个能继承的常用属性的表，其实是很短的，下面就是按字母顺序排出的：

以下是引用片段：
Example Source Code color
　　font (及其相关属性)
　　letter-spacing
　　line-height
　　list-style (及其相关属性)
　　text-align
　　text-indent
　　text-transform
　　white-space
　　word-spacing

　　在某些老式浏览器中，继承功能可能有些问题，然而大部分现代浏览器在这方面都处理得很正确。记住上面这个列表，可以让你少写点多余的代码。当然了，如果你想看看完整的列表，还是参考 CSS 2 Property Index。

　　空白

　　并非指的是 CSS 的 white-space 属性，这个属性早有确定的值了。我们说的是样式表本身含有的那些空白。空白常用于换行字符，和在一行里面用来改进可读性的空格。尽管把它们都删除可能会剩下个把字节，但好处毕竟有限。

　　关键是，如果把它们都删除了，CSS 文件就会变得非常难读，更难修改。要是你真的打算这么做，不妨创建一个主 CSS 文件，再根据它生成一个删除了所有空白的副本，修改的时候只修改主文件，根据主文件重新生成一次副本就行了。

　　请注意，CSS 编码中需要一些空白，删除那些必要的会导致你未曾预料的问题。如果 W3C 规范中用了 "space separated" 这样的语句，那么空格就不可省略。常见的像简记属性中分隔值的那些空格，还有下降合并符 (descendant combinator)，或者称为下降选择符，就是一个空格。所以说不到非用不可的时候，删除空白这样的方法还是少用。

巧用CSS控制li标记样式

xia05070115@126.com(xiayuesong) — Wed,04 Mar 2009 10:32:51 +0800

说明：

　　设置或检索对象的列表项所使用的预设标记。

　　若list-style-image属***为none或指定图像不可用时，list-style-type属***将发生作用。

　　仅作用于具有display值等于list-item的对象(如li对象)。

　　注意：ol对象和ul对象的type特***为其后的所有列表项目(如li对象)指明列表属***。请参阅我的其他著作。

　　IE5.5尚不支持所有CSS2的值。

　　对应的脚本特***为listStyleType

语法：　　

　　参数：

以下是引用片段：
disc : 　CSS1　实心圆
　　circle : 　CSS1　空心圆
　　square : 　CSS1　实心方块
　　decimal : 　CSS1　阿拉伯数字
　　lower-roman : 　CSS1　小写罗马数字
　　upper-roman : 　CSS1　大写罗马数字
　　lower-alpha : 　CSS1　小写英文字母
　　upper-alpha : 　CSS1　大写英文字母
　　none : 　CSS1　不使用项目符号
　　armenian : 　CSS2　传统的亚美尼亚数字
　　cjk-ideographic : 　CSS2　浅白的表意数字
　　georgian : 　CSS2　传统的乔治数字
　　lower-greek : 　CSS2　基本的希腊小写字母
　　hebrew : 　CSS2　传统的希伯莱数字
　　hiragana : 　CSS2　日文平假名字符
　　hiragana-iroha : 　CSS2　日文平假名序号
　　katakana : 　CSS2　日文片假名字符
　　katakana-iroha : 　CSS2　日文片假名序号
　　lower-latin : 　CSS2　小写拉丁字母
　　upper-latin : 　CSS2　大写拉丁字母

CSS布局最常用属性float（浮动）和position（定位）的详细解说

xia05070115@126.com(xiayuesong) — Sun,01 Mar 2009 10:25:07 +0800

在进行CSS网页布局时，对元素与容器进行布置与规划，最常用的两个属性就是浮动float和定位position。这两个属性的理解对CSS网页布局的学习非常重要。

首先了解float（浮动）和position（定位）属性的基础知识：

float（浮动）属性：

　　float:none|left|right
　　取值：
　　　　none: 默认值。对象不飘浮
　　　　left: 文本流向对象的右边
　　　　right: 文本流向对象的左边

float（浮动）属性的一个实例（一行两列）：