[翻譯]《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快捷解決的技巧。最後結尾是討論如何使在各種瀏覽器樣式元素的方法標準化――你可以不顧那些預設樣式的感受。