本文關鍵詞：精通CSS：高級Web標準解決方案，由筆耕文化傳播整理發(fā)布。

《精通CSS：高級Web標準解決方案》讀書筆記

Author：chemandy

章二、為樣式找到應用目標

1. 子選擇器和相鄰通報選擇器，在IE7下，如果父元素與子元素間有注釋，會產(chǎn)生錯誤。
2. 層疊和特殊性，根據(jù)特殊性應用樣式。內(nèi)聯(lián)>id>class>普通元素選擇。
3. css中導入樣式@import url(路徑);速度比鏈接樣式慢。

---------------------------------------------------------------------------------------

1. 設計css代碼結構：
一般樣式
         主題樣式
         reset樣式
         鏈接
         標題
         其他元素
輔助樣式
         表單
         通知和錯誤
         一致的條目
頁面結構
         標題、頁腳和導航
         布局
         其他頁面結構元素
頁面組件
         各個頁面
覆蓋

/* @group general styles
----------------------------------------------------------------------*/

/* @group helper styles
----------------------------------------------------------------------*/

/* @group page structure
----------------------------------------------------------------------*/

/* @group page components
----------------------------------------------------------------------*/

/* @group overrides
----------------------------------------------------------------------*/
2. 添加css自我提示
3. 刪除多余的注釋，優(yōu)化樣式表。

---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------

章四、背景圖像效果

1. 元素背景圖像可以棲身于padding中。
2. 圖像百分比定位例：若指定垂直和水平位置都是20%，則子元素左上角20%的點定位于父元素左上20%的點。最好不要混合使用單位和關鍵字。
3. 簡單圓角處理：①固定寬度圓角框；②滑動門；③山頂角。
4. CSS 3 處理圓角：①同一元素下設置多個背景；②border-radius屬性；③border-image屬性。
5. 投影處理：①容器設置投影圖片，img設負邊距偏移；②Clagnut投影方法：img設置relative定位偏移。
6. CSS 3 處理投影：Box-shadow屬性，例：img { box-shadow:3px 3px 6px #666;}，部分瀏覽器可能需要擴展才可以使用，如Safari（-webkit-）,Firefox（-moz-）
7. 不透明度處理：①屬性opacity:0.8;針對IE使用filter:alpha(opacity=80);②使用RGBa方法：.alert { background-color: rgba(0,0,0,0.8); }，其最后一位為opacity值。③使用png圖片，IE6不支持，需使用條件注釋引用一下代碼：.Aimg { filter:progid:DXImageTransform.Microfoft.AlphaImageLoader(src='path',sizingMethod='crop'); }
8. CSS 視差效果，多層png圖像疊加情況下，設置水平偏移百分比可達效果。
9. 圖像替換：①FIR方法，將文字塊用display:none;或visibility:hidden;隱藏；②Phark方法：對文字使用text-indent:-5000px；設置css背景圖片；③sIFR（Flash方法，，忽略）

---------------------------------------------------------------------------------------

章五、對鏈接應用樣式

1. 設置鏈接樣式次序：a:link, a:visited, a:hover, a:focus, a:active;識記：Lord Vader Hates Furry Animals.
2.

  本文關鍵詞：精通CSS：高級Web標準解決方案，由筆耕文化傳播整理發(fā)布。