amazon的參考
CSS實戰手冊(第2版)
作者：(美)麥克法蘭|譯者:俞黎敏
出版社：電子工業
ISBN：9787121109850
出版日期：2010/06/01
頁數：355
人民幣：RMB 69.8 元
※雖然是2009年寫的，且不是專為CSS3所寫的，但仍是目前Bear看過的CSS專書中寫的最詳細的一本，也是amazon中公認最佳的CSS書。這本是目前Bear看過的CSS專書中寫的最詳細的一本，也是amazon中公認最佳的CSS書。內容非常的廣且深入淺出，穿插著作者細心提醒新手常犯錯的地方，幾乎整本書都是重點，建議要學CSS一定要把整本書讀完且每章的範例一定要跟著實做。
P.43
#banner *
1. 和#banner在子代上基於繼承的表現上有何差異？
2. 是否能把原來不能繼承的東西(像是邊框等)變為可以繼承？
P.17(原文.P.22)
不要用 <font> 來控制文本的顯示。CSS在文本處理方面做得更好。
Ditch <font> for controlling the display of text. CSS does a much better job with text. (See Chapter 6 for text-formatting techniques.)
不要用<b> 和 <i> 來使文字變成粗體和斜體。CSS可以使任何標籤變成粗體或斜體，因此你不需要這些專門用於格式化的標籤。然而，如果你一定要強調某一個字或短語，可以用<strong>標籤(瀏覽器會將<strong>文本顯示為粗體)。對於較次要的文字，則使用<em>標籤進行強調(瀏覽器會將該標籤的內容顯示為斜體)。
Stop using <b> and <i> to make text bold and italic. CSS can make any tag bold or italic, so you don’t need these formatting-specific tags. However, if you want to really emphasize a word or phrase, then use the <strong> tag (browsers display <strong> text as bold anyway). For slightly less emphasis, use the <em> tag (browsers italicize content inside this tag).
P.17(原文.P.23)
為了將標題顯示為斜體，<cite>標籤可以起到一箭雙雕的作用。它不僅把標題變成斜體，還給標題做上標記，使它便於被搜尋引擎搜索到。這個標籤絕對值得收藏。
To italicize a publication’s title, the <cite> tag kills two birds with one stone. It puts the title in italics and tags it as a cited work for search engines’ benefit. This one’s a keeper.
P.17(原文.P.23)
不要用<table>標籤進行網頁布局。
Skip the <table> tag for page layout. Use it only to display tabular information like
spreadsheets, schedules, and charts. As you’ll see in Part 3 of this book, you can do
all your layout with CSS for much less time and code than the table-tag tango.
不要使用僅能裝飾內容外觀的笨拙的<body>標籤屬性，例如 background(背景)、bgcolor(背景顏色), text(文本), link(鍵接), alink(點擊鍵接時) 和 vlink(點擊鍵接後) 只能為網頁和文本及鍵接設置顏色和圖片。
Eliminate the awkward <body> tag attributes that enhance only the presentation
of the content: background, bgcolor, text, link, alink, and vlink set colors
and images for the page, text, and links. CSS gets the job done better (see
Chapter 7 and Chapter 8 for CSS equivalents of these attributes). Also trash the
browser-specific attributes used to set margins for a page: leftmargin, topmargin,
marginwidth, marginheight. CSS handles page margins easily (see
Chapter 7).
不要濫用<br/>。
Don’t abuse the <br> tag. If you grew up using the <br> tag (<br /> in
XHTML) to insert a line break without creating a new paragraph, then you’re in
for a treat. (Browsers automatically—and sometimes infuriatingly—insert a bit
of space between paragraphs, including between headers and <p> tags. In the
past, designers used elaborate workarounds to avoid paragraph spacing they
didn’t want, like replacing a single <p> tag with a bunch of line breaks and
using a <font> tag to make the first line of the paragraph look like a headline.)
Using CSS’s margin controls you can easily set the amount of space you want to
see between paragraphs, headers, and other block-level elements.
P.25(原文.P.34)
大多數情況下，採用外部樣式表會比較好。
Most of the time, external style sheets are the way to go, since they make building web pages easier and updating websites faster. An external style sheet collects all your style information in a single file that you then link to a web page with just a single line of code. You can attach the same external style sheet to every page in your website, providing a unified design. It also makes a complete site makeover as easy as editing a single text file.
P.28(原文.P.37)
將外部樣式附到網頁的最常用方法是利用HTML的<link>標籤。
The most common method of adding an external style sheet to a web page is to use the HTML <link> tag. You write the tag slightly differently depending on whether you’re using HTML or XHTML.
P.28(原文.P.38)
CSS本身有一種添□外部樣式表的方法：@import 指令。
CSS includes a built-in way to add external style sheets—the @import directive. You add the directive inside of an HTML <style> tag, like so:
<style type="text/css">
@import url(css/global.css);
</style>
與HTML <link>標籤不同的是，@import 是CSS語言的一部份。
Unlike HTML’s <link> tag, @import is part of the CSS language and has some definite un-HTML-like qualities:
要與外部的CSS文件關聯起來，得使用 url 而不是 herf ，並且要把路徑放在一對圓括號裡面。因此，在這個例子中，css/global.css就是指向外部CSS文件的路徑。URL前後的引號可要可不要，如url(css/global.css) 和 url("css/global.css") 都可以。
To make the connection to the external CSS file, you use url instead of href and enclose the path in parentheses. So in this example, css/global.css is the path to the external CSS file. Quotes around the URL are optional, so url(css/global.css) and url("css/global.css") both work.
像使用<link>標籤一樣，可以用多個 @import 包含多個外部樣式表。
As with the <link> tag, you can include multiple external style sheets using more than one @import:
<style type="text/css">
@import url(css/global.css);
@import url(css/forms.css);
</style>
P.(原文.P.)
從技術上來說，應該將所有的 @import 行放在所有CSS規則之前。
Technically, you should place all the @import lines before any CSS rules, as shown here, but it’s okay if you forget. Web browsers are supposed to ignore any style sheets you import after a CSS rule, but all current web browsers ignore that restriction.
究竟該使用那一種方法呢？雖然這兩種方法都可行，但是<link>標籤更為常用。在有些清況下，使用 @import 方法會減緩樣式表的下載速度。因此，如果你並沒有特別偏愛那一種的話，最好還是使用原書第44頁中介紹的<link>方法。
Which to use? Although both methods work, the <link> tag is more common. In a few cases, using the @import technique can slow your style sheets’ download speed (visit www.stevesouders.com/blog/2009/04/09/dont-use-import/ to find out when this can happen and why). So, if you don’t have a strong preference for either, just use the <link> method described on page 44.
P.34(原文.P.44)
但無論屬於那一種情況，最好都要用文檔相對路徑或根目錄相對路徑來表示文件所在的位置。
In this example, the style sheet file is in the same folder as the web page, so using the file’s name for the href value provides a simple “document-relative” path. If it were in a different folder from the page, then the path would be a bit more complicated. In either case, you’d use a document- or root-relative path to indicate where the file is. The routine is the same as when you create a link to a web page or set a path to an image file when using the HTML <img> tag. (For a brief primer on document- and root-relative links visit: www.communitymx.com/content/article.cfm?cid=230AD.)
P.35(原文.P.46)
有些(如 background 屬性)則提供了一種合併了多個不同屬性的快捷方法，如在這個例子中，
將background-image 、 backgroundrepeat 合併成了 background 這一個屬性。
Some of these CSS properties you’ve encountered already. Some are new—like the border-bottom property for adding a line underneath the headline. And some—like the background property—provide a shortcut for combining several different properties—in this case, the background-image, and backgroundrepeat—into a single property. Don’t worry about the specifics of these properties, you’ll learn them all in great detail in upcoming chapters (Chapter 6 covers font properties; Chapter 8 covers backgrounds; Chapter 7 covers padding and margins).
P.40(原文.P.53)
When deciding whether to use a class or an ID, follow these rules of thumb:
要在一張網頁上多次使用某一個樣式時，必須使用類選擇器。
To use a style several times on a page, you must use classes. For example, when you have more than one photo on your page, use a class selector to apply styling—like a border—to each <img> tag you wish to style.
用ID選擇器來識別每張網頁上只出現一次的部份。
Use IDs to identify sections that occur only once per page. CSS-based layouts often use ID selectors to identify the unique parts of a web page, like a sidebar or footer. Part 3 shows you how to use this technique.
考慮用ID選擇器來避免樣式沖突，因為Web瀏覽器給了ID選擇器高於類選擇器的優先權。
Consider using an ID selector to sidestep style conflicts, since web browsers give ID selectors priority over class selectors. For example, when a browser encounters two styles that apply to the same tag but specify different background colors, the ID’s background color wins. (See page 92 for more on this topic.)
P.42~43(原文.P.56)
為了使多個選擇器成為一個群，只須要創建一個用逗號分隔的選擇器列表即可。
To work with selectors as a group, simply create a list of selectors separated by commas. So to style all of the heading tags with the same color, you can create the following rule:
h1, h2, h3, h4, h5, h6 { color: #F1CD33; }
這個例子中只包含標籤選擇器，其實群選擇器中可以使用任何一種有效的選擇器(或者不同類型選擇器的組合)。例如，以下選擇器對<h1>標籤<p>標籤、任何用.copyright類設置樣式的標籤，以及ID為 #banner 的標籤，都應用了相同的字體顏色。
This example consists of only tag selectors, but you can use any valid selector (or combination of selector types) in a group selector. For example, here’s a selector that applies the same font color to the <h1> tag, the <p> tag, any tag styled with the .copyright class, and the tag with the #banner ID.
h1, p, .copyright, #banner { color: #F1CD33; }
P.(原文.P.)
換句話說，兩種(或者多種)不同的樣式可以格式化同一個標籤。
If you want a bunch of page elements to share some but not all of the same formatting properties, then you can create a group selector with the shared formatting options and also create individual rules with unique formatting for each individual element. In other words, two (or more) different styles can format the same tag. The ability to use multiple styles to format a single element is a powerful CSS feature. See Chapter 5 for details.
P.45(原文.P.59)
派生選擇器則夠實現你的心願，即只有當 <strong> 標籤出現在 <h1> 標籤裡面時，才會改變它的顏色。解決 <h1> 和 <strong> 難題的方法如下：
A descendent selector lets you do what you really want—change the color of the <strong> tag only when it appears inside of an <h1> tag.
The solution to the <h1> and <strong> dilemma looks like this:
h1 strong { color: red; }
此時，處在h1內部的所有 <strong> 標籤都是紅色的，但處在網頁其他位置上的 <strong> 標籤則不受影響。
Here any <strong> tag inside an h1 is red, but other instances of the <strong> tag on the page aren’t affected. You could achieve the same result by creating a class style—.strongHeader, for example—but you’d then have to edit the HTML by adding class="strongHeader" to the <strong> tag inside the header. The descendent selector approach adds no HTML and no more work beyond creating the style!
P.46(原文.P.60)
一般來說，編寫派生選擇器時最好盡可能簡短些。
另外，冗長的派生選擇器中的格式化指令會使簡單的類樣式或標籤樣式失效。
While, in general, it’s best to write as short a descendent selector as possible, one reason you would tack on additional descendent selectors is if you’ve written several different rules that simultaneously format a tag. Formatting instructions from a long-winded descendent selector can override simple class or tag styles. More on that in the next chapter.
P.52(原文.P.67)
鄰近同胞選擇器用加號(+)把一個元素和下一個元素連接起來。因此為了選擇每個<h2>標籤後面的每一個段落，就要用這個選擇器：h2 + p(其中的空格是可選的，因此h2+p也可以)。該選擇器中的最後一個元素(在這個例子中是指p)就是獲得樣式的元素，但是只有當它與其兄第<h2>相鄰時才行。
The adjacent sibling selector uses a plus sign (+) to join one element to the next. So to select every paragraph following each <h2> tag, use this selector: h2 + p (spaces are optional, so h2+p works as well). The last element in the selector (p, in this case) is what gets the formatting, but only when it’s directly after its brother <h2>.
P.54(原文.P.70)
許多熟練的網頁設計師都喜歡從內部樣式表開始設計，因為它更快，還可以避免高速緩存所牽扯到的所有問題。這就是他們的秘密：一旦完善了設計，就只須從內部樣式表中切下代碼，黏貼到外部樣式表中，然後將這個樣式表鍵接到網站的網頁上去即可。
Many hotshot web designers like to begin their designs with an internal style sheet, since it’s faster and avoids any problems with all that cache nonsense. Here’s their secret: Once they’ve perfected their design, they simply cut the code from the internal style sheet, paste it into an external style sheet, and then link the style sheet to their site’s pages as described on page 34.
P.65(原文.P.)
在附錄A中有一個完整的CSS屬性列表，詳細描述了那些屬產可以被繼承。
There’s a complete list of CSS properties in Appendix A, CSS Property Reference, including details on which ones get inherited.
P.65-66(原文.P.83-85)
Here are examples of times when inheritance doesn’t strictly apply:
一般來說，影響網頁元素位置的屬性，或者頁邊距、背景顏色和元素的邊框線等，都不會被繼承。
As a general rule, properties that affect the placement of elements on the page or the margins, background colors, and borders of elements aren’t inherited.
Web瀏覽器用它們自已固有有樣式為各種標籤設置樣式。
Web browsers use their own inherent styles to format various tags: Headings are big and bold, links are blue, and so on. When you define a font-size for the text on a page and apply it to the <body> tag, headings still appear larger than paragraphs, and <h1> tags are still larger than <h2> tags. It’s the same when you apply a font color to the <body>; the links on the page still appear in good old-fashioned, web-browser blue.
一般來說，最好取消這些內建的瀏覽器樣式，這樣比較容易使設計出來的網站在不同的瀏覽器上顯示時都能一致。
It’s usually a good idea to eliminate these built-in browser styles—it’ll make designing sites that work consistently among different browsers easier. In the next chapter, on page 102, you’ll learn how to do that.
當有樣式發生沖突時，更具體的樣式會勝出。
When styles conflict, the more specific style wins out. In other words, when you’ve specifically applied CSS properties to an element—like specifying the font size for an unordered list—and those properties conflict with any inherited properties—like a font-size set for the <body> tag—the browser uses the font size applied to the <ul> tag.
瀏覽器如何處理這些沖突的布則被稱作層疊(cascade)。
These types of conflicts between styles are very common, and the rules for how a browser deals with them are called the cascade. You’ll learn about that in the next chapter.
P.94(原文.P.120)
在數字和度量單位之間不要有空格，例如36px是正確的，但36 px就是錯誤的。
Don’t include a space between the number and the unit type. For example, 36px is correct, but 36 px isn’t.
P.101(原文.P.129)
一般來說，用percentage 或者 em 比用 pixel 要更好一些，因為它們會根據(且隨著)文本的font-size屬性而改變。
In general, percentages or ems are better than pixels, because they change according to, and along with, the text’s font-size property. If you set the line height to 10 pixels and then later adjust the font size to something much larger (like 36 pixels), because the line height remains at 10 pixels, your lines then overlap. However, using a percentage (150 percent, say) means the line-height spacing adjusts proportionally
瀏覽器預設的 line-height 是120%。
whenever you change the font-size value. The normal line-height setting for a browser is 120 percent. So, when you want to tighten up the line spacing, use a value less than 120 percent. To spread lines apart, use a value greater than 120 percent.
P.121(原文.P.155)
如果CSS屬性值為零，就不必再添加度量單位。例如，只要輸入 margin: 0;即可，而不是 margin: 0px;。
If the value used in a CSS property is 0, then you don’t need to add a unit of measurement. For example, just type margin: 0; instead of margin: 0px;.
P.121(原文.P.155)
這4個值的設置順序很重要，它必須按照 top, right, bottom, and left 的順序。
(譯注：TRouBLe中的4個大寫字母分別是這4個值的首字母，記住這個單詞便記住了這個順序)
margin: 0 10px 10px 20px;
padding: 10px 5px 5px 10px;
The order in which you specify the four values is important. It must be top, right, bottom, and left. If you get it wrong, you’ll be in trouble. In fact, the easiest way to keep the order straight is to remember to stay out of TRouBLe—top, right, bottom, and left.
P.121(原文.P.155)
在CSS中，二加二並不一定等於四。當元素的 bottom margin 碰到另一個元素的top margin 時，就可能出現一些怪異的算術。此時瀏覽器不是把這兩個邊距相加，而是應用它們中較大的那一個。
如果你不希望發生這種問題，就要用top padding 或 bottom padding來代替它們。
When it comes to CSS, two plus two doesn’t always equal four. You could run into
some bizarre math when the bottom margin of one element touches the top
margin of another. Instead of adding the two margins together, a web browser
applies the larger of the two margins (Figure 7-3, top). Say the bottom margin of
an unordered list is set to 30 pixels, and the top margin of a paragraph following
the list is 20 pixels. Instead of adding the two values to create 50 pixels of space
between the list and the paragraph, a web browser uses the largest margin—in this
case 30 pixels. If you don’t want this to happen, then use top or bottom padding
instead (Figure 7-3, bottom).
P.126(原文.P.161)
這些屬性的編寫順序並不重要，如border: 4px solid #F00; 和 border: #F00 solid 4px;的效果是一樣的。
The order in which you write the properties doesn’t matter. border: 4px solid #F00; works as well as border: #F00 solid 4px;.
