css|设计|网页|网页设计|网站加速

　　关于CSS　

　　用CSS缩写给你的网站加速

　　Web网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种，包括Web服务器的速度、访问者的Internet连接情况，以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度，但是你可以控制构成网站Web页面的文件大小。

　　为了让网站能够更快，Web的建设者都会按常规地压缩和优化网站上的每一个图像文件，这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量。由于CSS样式表是纯文本文件，和图像相比相对较小，所以Web建设者很少考虑采取措施减少其CSS样式表文件的大小。但是，通过使用CSS缩写以及其他的一些简单技巧，你可以在很大程度上减少样式表的大小。在我对自己样式表的一次非正式的特别测试中，我把文件的大小降低了大约25-50%。

　　用CSS缩写给你的网站加速

　　Web网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种，包括Web服务器的速度、访问者的Internet连接情况，以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度，但是你可以控制构成网站Web页面的文件大小。

　　为了让网站能够更快，Web的建设者都会按常规地压缩和优化网站上的每一个图像文件，这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量。由于CSS样式表是纯文本文件，和图像相比相对较小，所以Web建设者很少考虑采取措施减少其CSS样式表文件的大小。但是，通过使用CSS缩写以及其他的一些简单技巧，你可以在很大程度上减少样式表的大小。在我对自己样式表的一次非正式的特别测试中，我把文件的大小降低了大约25-50%。

　　使用CSS的缩写性质

　　CSS的缩写性质(shorthand property)是一些专用的性质名，用来代替多个相关性质的集合。例如，间隙性质(padding property)是顶部间隙(padding-top)、右侧间隙(padding-right)、底部间隙(padding-bottom)和左侧间隙(padding-left)的缩写。

　　使用速写性质让你能够把多个性质/属性对(property/attribute pair)压缩进CSS样式表的一行代码里。例如，想一想下面的代码：

　　将它用一些缩写性质来替代就能够把代码减少为下面这样，两者的实际效果是完全一样的：

　　要注意，缩写性质还有多个属性，每一个(属性)都对应一个被组合进入缩写性质的常规性质。属性由空白隔开。

　　当属性是类似的值的时候，例如用于边框空白性质(margin property)的线性测量的时候，接在缩写性质之后的属性的顺序很重要。属性的次序是从顶部(顶部的边框空白)开始，然后围绕格子(box)按顺时针次序继续。

　　如果缩写性质的所有属性都是相同的，那么你可以简单地列出单个属性，然后在前面将它复制四遍。因此，下面的两个性质是相等的：

　　margin: 5px 5px 5px 5px;

　　margin: 5px;

　　类似的，你可以使用接在边框空白或者间隔性质之后的两个属性来代表顶部/底部和右侧/左侧属性对。

　　margin: 5px 10px 5px 10px;

　　margin: 5px 10px;

　　属性的顺序在它们是不相似的值的时候是不重要的。因此，边框颜色、边框风格和边框宽度等属性可以以任何顺序接在大纲性质(outline property)之后。忽略某个属性等同于从样式规则里忽略掉对应的常规性质。

　　下面是CSS缩写性质的列表以及它们所表示的常规性质。

　　Background(背景)：背景附件、背景颜色、背景图像、背景位置、背景重复

　　Border(边框)：边框颜色、边框风格、边框宽度

　　border-bottom(底部边框)：底部边框颜色、底部边框样式、底部边框宽度

　　border-left(左侧边框)：左侧边框颜色、左侧边框样式、左侧边框宽度

　　border-right(右侧边框)：右侧边框颜色、右侧边框样式、右侧边框宽度

　　border-top(顶部边框)：顶部边框颜色、顶部边框样式、顶部边框宽度

　　cue(声音提示)：前提示、后提示

　　font(字体)：字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸

　　list-style(列表样式)：列表样式图像、列表样式位置、列表样式类型

　　margin(空白)：顶部空白、右侧空白、底部空白、左侧空白

　　outline(大纲)：大纲颜色、大纲样式、大纲宽度

　　padding(间隙)：顶部间隙、右侧间隙、底部间隙、左侧间隙

　　pause(暂停)：后暂停、前暂停

　　减少空白

　　减少CSS样式表大小的另一种方法是从文档里删掉大多数无用的空白。换句话说，将每条规则打破放进一行代码里，即把原来插入到代码里用来把每个性质/属性分割到不同行的换行符和缩进符删掉。

　　例如，下面的代码示例在内容上相同，但是第二个要精炼得多：

　　删掉注释

　　将注释从你的CSS代码里删掉是减少文件大小的另一种方式。尽管注释对于代码的阅读很有用，但是它无助于浏览器生成你的Web页面。很多Web建设者都习惯给每一行代码都加上注释，或者至少给每一条规则声明都加上。这样的慷慨注释在CSS样式表里是极少需要的，因为大多数CSS性质和属性都很容易阅读和理解。如果你对类、ID，以及其他的选择器都使用有意义的名称，你就可以省掉大多数的注释，同时仍然能够保持代码的可读性和可维护性。

　　使用速写性质、删除无用的空白、省略注释都能够在很大程度上减少你CSS样式表文件的大小。这反过来会对加速你Web网站速度的总体目标作出小的、但是可能会是显而易见的贡献。

　　为什么要使用 CSS?

　　自从 Dreamweaver MX 2004 发布以来，我曾经无数次向 Dreamweaver 的新老用户演示它的新特征和新功能。每次进行产品演示，我很快就会极力称赞 Dreamweaver MX 2004 设计和呈现 CSS(或层叠样式表)的新功能。

　　然而最近某位新用户问了一个问题，说实话，这个问题一下子让我张口结舌。这位用户只是问：“我为什么要使用 CSS?”当时我意识到，尽管我们这些每天与 HTML 和 CSS 打交道的人非常了解 CSS 的优点，但仍有很多人并不了解。或者说并不完全了解 CSS 所能提供的所有优点。本文是我对上面那位新用户的书面回答。

　　CSS 起源

　　回顾 CSS 的优点之前，我要先介绍一下它的历史。Web 管理组织 W3C 在 1996 年 11 月推荐使用 CSS，并批准了 CSS 1 级规范。CSS 1 级规范说明了用于 HTML 页面的属性。这些属性代替了传统的字体标签和其他“样式”标记，例如颜色和边距。1998 年 5 月，W3C 批准了 CSS 2 级规范，将一些附加功能添加到 1 级规范，并引进了定位属性。这些属性代替了表格标签普遍(但是错误)的用法，用来设计页面元素的表示。CSS 规范的最新版本是 CSS 2.1，它改进了某些属性，并删除了在当前浏览器里没有作用或作用很小的属性。

　　不幸的是，就像很多新技术一样，CSS 经历了漫长的过程才被广泛采纳。其中的重要原因在于浏览器，以及为这些浏览器建立站点的 Web 设计者们。CSS 批准期间，Netscape Navigator (NN) 仍然是主导浏览器，而该浏览器基本上不支持 CSS。Microsoft 在其第 3 版浏览器中添加了对 CSS 非常有限的支持，但当时大多数的 Web 设计者(本人在内)仍然将 NN 作为首选平台进行页面编码。

　　很多年来，每发行一个新版本，浏览器制作者们都扩展了对 CSS 的支持。今天，Internet Explorer 6、Netscape Navigator 7、Mozilla、Opera 和 Safari 都全面支持 CSS。但这并不意味着我们作为 Web 设计者和开发者的生涯不存在问题。尽管上述所有浏览器都支持 CSS Level 2，它们的兼容程度仍然各不相同。而且在某些情况下，特定属性仍然会带给你很多麻烦。也就是说，您仍然需要遵守老的信条“测试再测试”。但如果您坚持使用 CSS 规范的核心属性，您将能够正确地呈现页面。

　　但是为什么 W3C 认为需要创建 CSS 规范呢?当我创建基于 HTML 的 Web 站点和应用程序时，这一切对我又意味着什么呢?我认为，我们需要使用 CSS 的理由以及它带来的优势可以分为以下三个主要方面：灵活性、呈现性和可访问性

　　灵活性

　　我确定几乎每个 Web 设计者和开发者都经历过这样的痛苦时刻：当您小心地布置好页面，完成所有嵌套的表格后，客户要求进行一点“小小的”更改。这小小的更改可能只是“能不能把那个图形稍稍往左移动一点?”，也可能非常富有戏剧性：“我不喜欢这些标题，能把它们的字体弄大一点吗?改字体的时候，顺便把颜色也改了，怎么样?”如果只需要处理有限的几个页面，您可以深吸一口气，花上大半个小时做那些让人恼火的改动。但如果涉及到较大的站点(而这已经很常见)，一个简单的更改无论如何也简单不了。

　　这样的情形为什么会如此痛苦呢?因为定义页面外观的标记本身就是页面的一部分。要看到实例，您只需到任何站点的任何页面上去数一下 font 和 table 标签的数量。只要您能够从实际页面的流程(或代码)中删除这些标记，或者采用更好的办法，即将其外置，您就可以进行集中更改。而这就是 CSS 所能做的。

　　如果使用一个或多个外部样式表，通过修改样式表然后将修改后的版本上载，您就可以将更改应用到站点。

　　想象一下，在传统的基于表格的布局中，将站点浏览从页面左侧移到页面右侧将有多么困难。这需要几个小时重复而乏味的工作。但是，如果您选择使用 CSS 的定位属性(通常称作 CSS-P)来设计页面，只需更改外部样式表中的“浮动”或“位置”属性，即可更新页面。而且还有以下附加优势：您更新了站点中使用该样式的所有页面。

　　呈现性

　　由于宽带的广泛使用，很多开发者已经不再考虑在浏览器中呈现页面所花费的时间。但是，你们应该记住，很多目标用户仍然在使用拨号连接。传统的基于表格的布局是页面下载速度慢的主要原因。因为浏览器从服务器接收页面时，必须首先检查并“理解”一系列复杂的镶嵌式表格。它必须先找到镶嵌在最里面的内容，然后小心地逐步处理代码，直至到达最外层的容器，即 body 标签。完成以上所有过程后，浏览器才能开始在屏幕上呈现内容。

　　如果使用 CSS，浏览器从服务器接收内容后，立刻就可以开始呈现过程，因为页面中没有或只有很少的显示标记。

　　使用外部样式表还有一个潜在的呈现方面的好处。在传统的基于表格的方法中，浏览器必须检索、分析并单独呈现每个页面。也就是说，浏览器在您的站点上显示第 30 页时耗费的工作和显示第 1 页时一样多。

　　但是，如果使用外部样式表进行显示，站点的第一页将提示浏览器将页面使用的已链接样式表文件缓存起来。这意味着站点中所有使用上述样式表的后继页面下载速度会更快，因为浏览器已经缓存了样式表。

　　最后一个与呈现有关的优点让我想起电影《莫扎特》。电影中，莫扎特问国王对自己的歌剧有什么看法。国王说很好，但是很沉闷。莫扎特一再追问，国王解释说，问题就在于“音符太多”。Web 设计也可能有同样的问题，当然这里的音符指的是实际 HTML 代码。代码越多，浏览器理解页面所花的时间就越长。

　　大家也许都听说过有关官方应用程序的传言，它们编写了非常糟糕的代码，满是复杂的信息，然而文档页面却无法呈现。作为 Dreamweaver 的用户，你们不会遇到这样的问题，但是如果编写了太多代码，你们也会感到内疚。典型的基于表格的设计就是一个很好的例子。

　　在设计中使用 CSS 后，您将减少客户需要下载的代码的数量。仅仅减少某些页面中的字体标签就可以大大减少代码的数量。在很多情况下，如果完全使用 CSS-P 进行设计，代码的数量最多可以减少 50% 甚至更多。代码减少就意味着页面下载的速度加快。

　　可访问性

　　如今我经常听到人们谈论可访问性。大多数开发者知道自己必须考虑建立更多可访问站点的问题，但在更大的程度上，只有为政府或教育机构建立站点的开发人员才被迫真正做到了这一点。考虑到可访问性的问题时，大多数开发人员认为这仅仅意味着需要将 alt 属性添加到图形中。但实际上，提高可访问性有很多工作可做，CSS 使您可以轻松建立可访问站点。

　　可访问性的主要问题(也是使用 CSS 能够解决的问题)在于辅助技术(例如屏幕阅读器)怎样“阅读”页面。传统的基于表格的环境下，屏幕阅读器面临一个巨大的挑战，那就是决定怎样阅读页面。想想吧，当屏幕阅读器遇到镶嵌很深的表格时该有多么困惑，它应该阅读内容，还是跳过内容?跳过内容后，以后怎样返回内容?

　　当您点击页面时，您会很快看到页面中自己感兴趣的内容，而忽略页面顶部的导航和其他内容。视力不太好的人却做不到这一点。他必须等待屏幕阅读器分析完页面顶部和他感兴趣的内容之间所有复杂的信息。

　　当然，有的技术能够使屏幕阅读器跳过导航，但这需要在导航条或其他内容的图像中添加链接。这些技术的运行可能会造成混乱，而且访问站点的其他人也能够看到它们。使用 CSS，您能够在页面中完整定义不可视元素(对于其他站点访问人员和您的鼠标不可视)。屏幕阅读器可以使用这些元素快速导航，有效处理文档。

　　由于 CSS 没有显示标记，屏幕阅读器所遇到的唯一问题就是实际内容。另外，当您使用 CSS-P 进行设计时，您将专注于内容的实际“流”。您开始考虑它在页面上的逻辑顺序。

　　当您阅读本文档时，您理解了信息“流”。但在镶嵌型表格的示例中，如果您使用多栏布局，本段落将很可能位于页面的右上角。那样，屏幕阅读器无法知道它应该在文章末尾阅读本段落。

　　使用 CSS-P 后，浏览器可能仍将本段落显示在浏览器窗口的右上角，但当您查看文档的源代码时，段落在文档的 html 中仍然是您现在所看到的位置。这使页面更容易访问。

　　总结和计划

　　以上就是我的答案。我希望我解释了使用 CSS 进行 Web 设计的独特优势。显然，要学习的内容很多。因此，我鼓励您阅读 Macromedia 开发者中心关于 CSS 的其他文章*，它们将帮助您更好地了解 CSS 的优点，并教会您在设计中使用 CSS 的整个过程。以后的几个星期以及几个月当中，我将带回来更多的 CSS 教程。就写到这里，希望您愉快使用我们的样式。

　　关于作者

　　Greg Rewis 是 Macromedia Web 技术最主要的宣传者。 Greg 是 Macromedia 的公众代言人，代言 Web 上发行的 Macromedia 软件套件和 Web 应用程序开发服务器，同时他又代表公司成千上万顾客的利益，与产品开发部门进行沟通。Greg 十分了解 Macromedia 客户的想法，　因为每年他有 200 天都“在路上”，他与客户交谈，在商品展览会、研讨会和各种会议中进行产品展示，组织高级培训会议专门介绍 Macromedia 生产线。Greg 总是在世界各地飞来飞去，但工作之余他在 Arizona 沙漠中享受生活，打高尔夫球，教他的两个儿子“在游泳池中放松身心”的艺术。

　　原文：mezzoblue CSS Crib Sheet

　　CSS 锦囊

　　在使用CSS建站时，您肯定遇到过形形色色的布局问题，最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易，当您遇到困难时为您提供快速参考。

　　有疑问，先验证

　　在调试时，先对您的代码进行验证往往能省去不少麻烦事。格式不正确的XHTML/CSS 会导致许多布局上的错误。

　　在其他浏览器中进行测试之前，请先在最先进的浏览器中撰写和测试CSS代码，而不是相反。

　　如果您在破旧的浏览器中编写和测试，你的代码就不得不依赖那个破旧浏览器的糟糕的显示，然后在符合标准的浏览器中进行测试，看到显示结果“不正常”时，你会很沮丧的。相反，您应该先将您的代码完善，然后再设法为较低级的浏览器打算。这样从一开始您的代码就是符合标准的，你不必再为支持其他浏览器而劳心费神。当然了，目前遵从标准的浏览器无疑就是 Mozilla, Safari 或 Opera。

　　确保您想要的效果真的存在

　　许多特定的浏览器专有的CSS扩展在正式标准中并不存在。 如果您对 filter(滤镜) 或滚动条指定样式，您用的就是私有代码，除了IE之外，在别的浏览器中毫无作用。如果验证器告诉您代码没有定义，极有可能您用了私有样式，别指望在不同的浏览器中得到一致的效果。

　　如果布局中一定要用浮动对象，别忘了适时使用清除(clear)属性。

　　浮动元素似易实难，而且难以驾驭。如果您发现浮动对象伸出了容器的边界，或者不像您所期望的那样显示，请检查您的期望是否正确。关于这个问题请看Eric Meyer 的教程

　　边距的合并：可用padding 或 border 来避免。

　　您可能被多余的(或者想要却不出现的)空白搞得焦头烂额。如果您用了 margins，边距的合并可能就是问题的根源。 Andy Budd 对此的解释也许能为你解惑。

　　避免将 padding/border 和固定宽度同时应用到同一元素。

　　IE5 错误的区块模型是罪魁祸首，是它把事情弄得乱七八糟。虽然有补救方案，不过最好是绕过这个问题，当子元素的宽度固定时，为其父元素指定padding。

　　避免IE下未指定样式内容的闪烁。

　　如果您用 import 来输入外部样式表，早晚会发现IE有“闪烁”的毛病。在应用CSS样式之前，未格式化的HTML文本会短暂地出现。这是可以避免的.

　　别指望 min-width 在IE中有用。

　　IE不支持它，但是它将 width 当作 min-width，所以通过一些 IE 的过滤技巧(filtering)，可以实现同样的最终效果。

　　走投无路时，试一试减少宽度

　　由于舍入误差，有时 50% 加上 50% 等于 100.1%，破坏某些浏览器中的布局。不妨试试将 50% 减到 49%，甚至 49.9%。

　　IE 中显示不正常?

　　可能是 Peekaboo 臭虫在作怪，尤其是当鼠标经过超链接时能显示正常。修补方法见Position is Everything。

　　如果使用了锚点，在应用超链接样式时要特别小心。

　　如果您在代码中使用了传统的锚点(