《眾妙之門——精通CSS3》一書知識點剖析 - vajoy－IT工程師數位筆記本

文章出處

不得不佩服京東的速度，昨天剛下單的兩本書今天上午就到了。其中一本是全彩頁的《眾妙之門 - 精通CSS3》，細看了前幾十頁，書上的敘述方式給我的印象其實不如“彩頁”來的討喜——接連說上幾個例子，扔個例子的鏈接（沒源碼下載，要自己手動輸入，而且近乎所有的例子頁面均已失效），未經細剖便草草了事，感覺倒是適合作為廁所讀物（汗）。。。。

雖然書中不細剖，卻也不能白花銀子，不妨自己實打實地查資料、記筆記，不辜負了早上送出的老毛。

如果你也買了這本書，那這篇文章會給你一定的輔助。

（本文依照我翻閱書籍的進度不斷更新中，故暫時置頂...）

P21

此處提到的例子動用了 -webkit-background-clip:text; 和 -webkit-text-fill-color:transparent; 兩個樣式屬性，制造了文本蒙版效果。

后面我查了 background-clip 發現它僅支持border-box、padding-box 和 content-box，也寫了一個 background-clip:text; 的小例子也沒發現有相關效果，之后才確定僅有帶webkit前綴的 -webkit-background-clip 才支持 text 的值，才能生成遮罩效果（IE、FF均沒有相關的樣式屬性，如-moz-background-clip:text 并不生效）：

<style>
div{background:url(http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
</style>
</head>
<body>
    <div>
    測試測試測試
    </div>
</body>

P49

提到了RGBa的替代方案——HSLa，但沒有詳細介紹。HSLa的四個值含義分別如下：

H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360

S：Saturation(飽和度)。取值為：0.0% - 100.0%

L：Lightness(亮度)。取值為：0.0% - 100.0%

A：Alpha（透明度）。取值0~1之間。

故我們可以這樣給顏色賦值：

div{background-color:hsla(360,50%,50%,0.5);}

P50

提到了 background-clip 和 background-origin ，卻沒有說明二者分別。

background-origin表示背景從何處開始顯示(邊框、補白或內容區域)，background-clip表示在原有顯示背景的情況下裁剪可視區域(邊框、補白或內容區域)。

具體區別可以參考此篇文章。

P54

介紹了muticol（查看用法），至于《CSS3 Multi-column layout considered harmful》的主要內容如下：

建議在如下情況下可以分欄來顯示文本：

■ 文本分欄后，從某一欄閱讀到下一欄，均無需任何滾動（scroll up and down）

■ 此處無需水平滾動條

■ 是單頁面的，沒有任何翻頁

■ 不會把每一行分的太短導致閱讀困難

■ 文本并非自適應的

其實這里都是從體驗的角度出發所提出的意見，另外作者在最后也表示網頁就是網頁，不應該當作印刷物來分欄顯示文章。

P55

word-wrap、word-break、white-space 的區別（參考資料）：

word-break：設置英文句子在換行時，是否可以拆開單詞換行，其值設為break-all表示允許在單詞內換行，設為keep-all表示只能在半角空格或連字符處換行。

因此如果是很長的中文句子，在IE7/8中設為keep-all的話會因為找不到半角空格無法斷行而導致文本探出容器外（IE6是直接把容器撐起來）。

word-wrap：解決上述問題，其值設為break-word之后中文也好英文句子也好或者字符串也罷，均能良好斷行。

white-space：這個是CSS2屬性，其值含義如下

注意我們在使用 text-overflow:ellipsis 的時候需要用到 white-space:nowrap 來配合。

P57

box-sizing （參考資料）可以設置瀏覽器以何種盒模式來顯示容器，它有兩個值——“content-box” 和 "border-box" ，其中 box-sizing:content-box 表示讓瀏覽器遵從常規的W3C盒模式，而 box-sizing:border-box 表示讓瀏覽器以Quirks CSS標準下的盒模式來顯示容器，即容器的寬度、高度把其border與padding的大小均涵蓋其中。

P62

這里提到的“日歷選擇器”（查看頁面）主要是通過 <input type="month" > 來實現的。該實例頁面還有其它如email之類的選擇器（點submit按鈕后會判斷），大家可以參考下。

P63

這里提到的Modernizr是個蠻有趣的工具，你可以來這里定制并下載其腳本，并將腳本引入你的頁面。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>測試</title>
<script src="modernizr.js"></script>
<style>
div{padding:30px;border:2px outset red;}
</style>
</head>
<body onload="sanitize()">
    <div>
    測試測試測試
    </div>
</body> 
</html>

在生成頁面之后，你會發現Modernizr會在<html>標簽自動添加一系列class名，這些類名均表示當前瀏覽器是否支持css3/html5等功能：

這樣做的好處是你可以對頁面樣式做“漸進增強”處理。比如我們上方這個頁面給div添加了 border:2px outset red; 樣式，我們希望這是它在不支持圓角的舊瀏覽器中顯示的樣式，如果是在支持圓角的主流瀏覽器中，我們希望它顯示的是

border:1px solid red; border-radius:5px;

也就是不要繼續顯示舊瀏覽器下的 border:2px outset red; 樣式，比較圓角再搭配outset邊框會很丑。那我們可以這樣寫樣式：

div{padding:30px;border:2px outset red;}
.borderradius div{border:1px solid red; border-radius:5px;}

效果如下：

但我個人并不提倡使用此工具，畢竟增加了代碼量，而且使用IEtester測試的時候出現腳本錯誤窗口提示。還是建議大家走“優雅降級”的方式即可。

P85

這幾頁雖然介紹了:nth-XXX偽類，也闡述了許多很棒的知識點，卻沒有說明 :nth-child() 和 :nth-of-type() 的區別。

elm:nth-of-type(n) 是指父元素下第n個ele元素；
而 elm:nth-child(n) 是指父元素下第n個元素且這個元素為ele，若不是，則選擇失敗。

如下代碼：

<div> 
<ul class="demo"> 
<p>zero</p> 
<li>one</li> 
<li>two</li> 
</ul> 
</div>

.demo li:nth-child(2) 選擇的是<li>one</li>節點，而 .demo li:nth-of-type(2) 則選擇的是<li>two</li>節點。

P89

關于 :only-child 和 :only-of-type 的加深理解：

:only-child 不考慮被選擇的元素的兄弟元素（如果有）的類型，但 :only-of-type 會區分，只有其兄弟元素沒有跟自己一樣的才生效。來個例子：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>test</title>
  <style type="text/css">
  p:only-child{color:red; font-weight:bold;}
  p:only-of-type{background:yellow;}
  </style>
</head>
<body>
  <div>
    <p>這是一個段落。</p>
    <p>這是一個段落。</p>
  </div>
  
  <div>
    <p>這是一個段落。</p>
  </div>
  
  <div>
    <span>這是一個 span。</span>
    <p>這是一個段落。</p>
  </div>
</body>

P102

這里關于屬性選擇器的介紹和例子不夠實用，我們自己來一個例子判斷下面三種屬性選擇器的區別：

<style>
p[title~=VJ]{color:red;}    /*匹配含有VJ單詞的（要跟其它單詞空開），比如“abc VJ aaa”，而“aaVJ abc”不會匹配*/
p[title*=VJ]{font-size:40px;}   /*匹配所有含有VJ的，包括“adsadVJdad”*/
p[title|=VJ]{font-weight:bold;}   /*匹配僅為“VJ”的或為“VJ-”開頭的（比如“VJ-XXX”）*/
</style>
</head>
<body>
  <div>
      <p>3242435</p>
    <p title="VJ_abc">3242435</p>
    <p title="VJ abc">3242435</p>
    <p title="VJ-abc">3242435</p>
    <p title="VJ">3242435</p>
  </div>
</body>