[翻译]《CSS与HTML设计模式》第一章 设计模式：使CSS 更便易(1)

第1章 设计模式：使CSS 更便易

On the surface, CSS seems easy. It has 45
commonly used properties you can employ to style a document. Below the surface,
different combinations of properties and property values trigger completely
different results. I call this CSS polymorphism because the same property has many
meanings. The result of CSS polymorphism is a combinatorial explosion of
possibilities.

CSS表面上貌似不难。靠它45个较为常用的属性就足以样式化文档。其实不然，属性和属性值不同的组合就会产生截然不同的结果。我称之为CSS的多态性――因为同样的属性却有不同的含义。CSS多态性的结果是各种可能的组合猛增。

Learning CSS is more than learning about individual properties. It is about learning the

contexts in which properties can be used and how different types of property values work differently

in each context. As an example, take the width property, which has many different

meanings depending on how it is combined with other rules and what values are assigned to

it. For instance, width has absolutely no effect on inlines. width:auto shrinkwraps floats to

the width of their content. width:auto shrinkwraps absolutes when left and right are set to

auto. width:auto stretches blocks to the width of their parent element. width:auto stretches

absolutes to the width of their containing block when left and right are set to 0. width:100%

stretches blocks and floats to the width of their parent element as long as they do not have

borders, padding, and margins. width:100% stretches tables to the width of their parent even if

they do have borders and padding. width:100% stretches absolutes to the width of their closest

positioned ancestor instead of their parent. width:100em sizes an element in relation to the

height of its font-size, which allows the element to be sized wide enough to contain a certain

number of characters. width:100px sizes an element to a fixed number of pixels regardless of

the font-size of its text.

学习CSS不光只学习其单个的属性。还要学习使用的那个属性的环境，属性值的不同类型如何在各种环境中不同的工作。各种不同的含义是靠它与其他规则如何组合和赋的是什么值，就以width 属性为例吧。width 在行内是绝对无效的。 width:auto会把浮动缩行到其内容的宽度。 width:auto 会把绝对定位缩行 left 和 right 的值设为 Auto。width:auto 会把块撑开到其父元素的宽度。 width:auto 会把绝对定位撑开到其包含块的宽度 left 和 right 设为 0。width:100% 会把块和浮动撑开到其父元素的宽度而不再具有边框、填充和外边距。 width:100% 把表格撑开到其父元素的宽度甚至它们具有边框和填充也是。 width:100% 会把绝对定位撑开到其就近位置的祖先元素的宽度而非其父元素的宽度。width:100em 会使元素的大小为相对其 font-size 的高度, 可使其元素的大小范围足以含一定的字数在内。 width:100px 会使元素的大小为一个固定的像数值而不管其文本的 font-size 。

To complicate matters further, not all of the rules are implemented by browsers. For

example, over 40 out of 122 properties and over 250 out of 600 CSS rules are not implemented by one or more of the major browsers.

事物往后发展就愈加复杂，而在浏览器上规则并非都可实现。例如，有 40 至 122 个属性和有 250 至 600 个CSS 规则还未能在不止一个的主流浏览器上实现。

Trying to learn
CSS by memorizing the extraordinary number of exceptions to each rule is extremely
frustrating.

想要学着把CSS较偏的那些规则每一条都记住会使你败掉。

To make learning
CSS easy, this book documents all usable combinations of properties and
property values. It puts properties in context and paints a complete picture of
how CSS works.

CSS想要学得更容易，本书将所有可用的属性及其值结合了起来。它把属性放在上下文中，并像绘完整的画那样告诉你CSS如何运作。

Imagine the
time you will save by not having to read about rules that do not work and by not
having to test every rule to see whether it works in every browser and in
combination with other rules. I have already done this for you. I have run many
thousands of tests. I have tested every CSS property and every combination of
properties in every major browser including Internet Explorer 7, Internet
Explorer 6, Firefox 2, Opera 9, and Safari 2.

设想一下你没有阅读相关规则而无法工作无法测试每条规则运作于每个浏览器并与其他规则结合。本人已经为你准备好了一切。已进行了数以千计的测试。已将每条CSS属性及其每条相结合的属性在各个主流浏览器中测试，包括了 Internet Explorer 7,
Internet Explorer 6, Firefox 2, Opera 9,和 Safari 2。

I have boiled down these results into 350+ simple design patterns—all the CSS and HTML design patterns you need to create stunning, high-performance, and accessible web sites.

本书有超过350个CSS和HTML设计模式，可创建出极有魅力、高性能、可用性的网站。

After you learn these design patterns, you’ll wonder how you ever developed web sites without them!

稍后你会学到这些设计模式，并将会为你曾经开发网站没有使用而感到不可思议。

In this chapter, I discuss the purpose of design patterns and how they work. I give some examples of how to combine design patterns to create new patterns. I also discuss how to use stylesheets, CSS syntax, and the cascading order to your advantage.

在本章节中，我们将讨论设计模式的用途及如何运作。有些示例是告诉你如何结合设计模式来创建新的模式。也会讨论如何使用样式表、CSS语法、层叠顺序的优势。

Next, I present a series of charts that list all the usable CSS properties and units of measure. I then present 12 techniques for troubleshooting CSS quickly. Lastly, I discuss how to standardize the way various browsers style elements—so you can override these default styles with confidence.

接下来，是所有可用的CSS属性、量度单位的列表。然后是12种CSS快捷解决的技巧。最后结尾是讨论如何使在各种浏览器样式元素的方法标准化――你可以不顾那些默认样式的感受。