《CSS那些事兒》讀書筆記

注：

• 此書出版於2009年，所以有些知識...你懂得。
• 有些我熟悉的知識點，就沒有記錄下來了，所以想了解更多的細節，還是去看下此書吧。
• 暗灰色標記部分，是我自己的理解，有不對或要補充的地方，還請大家多多指教。
• 代碼演示我統一放到了jsfiddle上，國內訪問速度稍慢些，大家耐心點。或是大家知道國內有類似的在線調試網站，麻煩和我分享下，在此先謝了。
• 該筆記中只給出了部分代碼演示鏈接，如果想看該書的完整示例代碼，可到百度雲：http://pan.baidu.com/s/1o64sPR0 下載，我已經共享好了。
• 該筆記較長，大家耐心點哦。

 

耐心地學習CSS，掌握好CSS的本質原理后，你將會發現原來CSS真的很好玩。

 

學習CSS最好的方法就是 不斷地做，不斷地想，不斷地實踐。

 

CSS特點：

• 修飾頁面文本、圖片等頁面元素，避免使用不必要的HTML元素。
• 更有效地控制頁面結構、頁面布局。
• 提高開發和維護效率。

 

CSS的簡寫：

• 顏色的縮寫：#RRGGBB –– 縮寫成 #RGB。
• 單位值的省略：當數值為0時，可省略單位。
• 內外邊距的簡寫：根據上右下左的順時針方向，有4種簡寫方式。
• 邊框的簡寫：border: -width || -style || -color。
• 背景的簡寫：background: -color || -image || -repeat || -attachment || -position
• 字體的簡寫：font: -style || -variant || -weight || -size || /line-height || -family
• 列表的簡寫：list-style: -image || -position || -type

 

CSS選擇符：

• 標簽選擇符：E(html標簽)
• ID選擇符：#className
• 類選擇符：.className
• 通配符選擇符：*
• 包含選擇符：又稱派生或后代選擇符，作用於元素的后代元素。
• 子選擇符：又稱子對象選擇符，作用於元素的子元素，用“>”連接選擇符(IE7+)。
• 相鄰選擇符：作用於元素的相鄰的下一個元素(線性結構中的直接后驅)，用”+“連接選擇符(IE7+)。
• 屬性選擇符：E[attr]、E[attr=“value”]、E[attr~=“value”]、E[attr|=“value”]、E[attr^=“value”]
• 選擇符的組合關系：針對性使用類選擇符或ID選擇符、選擇符群組、選擇符組合。

 

偽類：

用來指定一個或者多個與其相關的選擇符的狀態( IE6/7支持部分)。其形式為：選擇符:偽類 {屬性:屬性值;}。

如：a:link{}、a:visited{}、a:hover{}、a:active{}。

偽類可使頁面增加更多交互效果，而不必去使用過多的javascript來輔助實現。

 

偽對象：

指在html的文檔指定的信息之外，創建文檔的額外信息( IE6/7支持部分)。其形式：選擇符:偽對象 {屬性:屬性值;}。

如：p:before {content: “4月1日”}。

 

CSS層疊樣式表的特色在於“層疊”，所謂 層疊即表示CSS樣式表會根據選擇符的使用而將樣式相互疊加或者覆蓋。

 

網頁定義的4種樣式：

• html：表示在html中是使用的樣式。
• 作者：表示CSS文件的編寫者。
• 用戶：指瀏覽器網頁的用戶所設置的樣式。
• 瀏覽器：指瀏覽器默認樣式。

 

CSS樣式采用的優先順序：

• 標有!important關鍵字聲明的屬性。
• html中的CSS樣式屬性。
• 作者編輯的CSS文件樣式屬性。
• 用戶設置的樣式。
• 瀏覽器默認的樣式。

 

選擇符優先級積分：

• 標簽選擇符、偽類及偽對象：優先級積分為1。
• 類選擇符、屬性選擇符：優先級積分為10。
• ID選擇符：優先級積分為100。
• style屬性：優先級積分為1000。
• 其他選擇符，如通配符選擇符等：優先級積分為0。

 

對於 !important關鍵字的使用一定要謹慎，切勿隨便使用，避免產生不必要的問題。

 

內嵌樣式表，一般應用在訪問量比較大的頁面 減少對服務器的http請求數而減少對服務器的負擔。

缺點是如果需要修改，那就只能對頁面進行修改， 且無法利用瀏覽器緩存特性。

 

由於瀏覽器最后解析@import，這樣很容易導致IE6的閃屏或者在打開頁面的過程中無樣式，直到頁面加載完畢后才會加載樣式的現象出現，因此 不建議使用@import。

 

<div id=“container”>

    <div class=“mainBox”>主要內容區域</div>

    <div class=“sideBox”>側邊欄</div>

</div>

因為瀏覽器在解析html代碼時是由上而下的方式逐句分析的，因此 將mainBox放在sideBox之前的主要作用是將內容區域提前展現在瀏覽器中。

 

在使用CSS樣式布局頁面結構時，不使用浮動那么就只能采用定位的方式進行頁面布局。

 

兩列頁面布局：

• 兩列定寬結構：
  要點：float、width指定、 :after清除浮動。
  效果：http://jsfiddle.net/XianfaLang/tWvph/
  前提：兩列的盒模型寬度相加不能大於父元素的寬度，否則會出現錯位現象。
• 兩列自適應結構：
  要點：float、width百分比、 :after清除浮動。
  效果：http://jsfiddle.net/XianfaLang/MyfXs/
• 單列定寬-單列自適應結構：
  要點：相對定位、負邊距效果：http://jsfiddle.net/XianfaLang/U3J3X/
  問題：當sideBox的內容很多時，使用絕對定位導致無法撐開父元素的高度，而且會覆蓋其他元素的內容。解決方案是使用javascript重新判斷父元素的高度來解決，個人覺得應該有CSS方案來解決這個問題，而不是用javascript來解決。這不，第5章就給出了一種解決方案：http://jsfiddle.net/XianfaLang/5w8MD/
• 兩列等高：
  4.1. 背景模擬：利用背景圖片的平鋪，在視覺效果上產生等高的感覺。
  4.2. 負邊距實現(推薦)：   
       原理：利用左右兩個方向的外邊距彌補在頁面中布局出現錯位的現象。    
       要點：兩容器設置margin-bottom:-9999px; padding-bottom:9999px，父元素設置overflow:hidden;   
       效果：http://jsfiddle.net/XianfaLang/Q5nph/    
       問題：如果頁面使用<a>做頁面跳轉，將會隱藏部分文字信息。如果將背景圖片放到mainBox或者sideBox底部，將看不到背景圖片。
  4.3. 邊框模擬：    
      要點：border-right:280px solid #AAAAAA; 絕對定位    
      效果：http://jsfiddle.net/XianfaLang/tLmTc/
  4.4. JS方式：    
      要點：使用javascript設置兩列高度相同。
      效果：http://jsfiddle.net/XianfaLang/C9XcZ/

 

三列或多列布局：

• 了解width:auto與float的關系：http://jsfiddle.net/XianfaLang/nMyh4/
• 兩列定寬中間自適應結構：
  要點：浮動、負邊距、mainBox的width為100%。
  效果：http://jsfiddle.net/XianfaLang/dsfKU/
• 左側定寬-右側和中間自適應結構：
  要點：浮動、margin百分比、負邊距。
  效果：http://jsfiddle.net/XianfaLang/nB57t/
• 三列寬度自適應結構：同左側定寬-右側和中間自適應結構類似，把寬度改為百分比即可。
• 三列等高：
  原理同兩列等高類似，也有4種實現方式。這里只列舉兩種：
  負邊距實現：http://jsfiddle.net/XianfaLang/hRq2q/
  邊框模擬：http://jsfiddle.net/XianfaLang/EBww5/

文本相關

• text-indent屬性可將文字往旁邊“推”，如：p { text-indent: 2em; } /* 設置段落縮進2em */ 聯想到負邊距有“吸”功效。
• 隱藏文字方法：
  a. 使用text-indent／line-height 將文字“推”到容器之外。
  b. visibility: hidden; 設置元素不可見，但占空間位置。
  c. display: none; 設置元素不可見，不占空間位置。

 

圖片相關

PNG優點：

• 是目前保證最不失真的格式，它汲取了GIF和JPG二者的優點，存儲形式豐富。
• 即能把圖像文件壓縮到極限以利於網絡傳輸，又能保留所有與圖像品質有關的信息。
• 顯示速度快。
• 支持透明圖像的制作。

PNG缺點：不支持動畫效果。

 

PNG-8比GIF要小一點，GIF可制作動畫而PNG-8無法實現動畫效果。

PNG-24是色彩最豐富的圖片，且支持alpha通道的透明，不像PNG-8和GIF只能支持全透明的圖片。

支持alpha通道的透明，可以讓圖片產生半透明的效果，使頁面更漂亮。

 

采用哪種格式的圖片作為背景圖的參考點：

• 圖片是否嚴重失真。
• 哪種格式的圖片是最小的。
• 圖片是否有透明效果，如果有，那是否有alpha透明效果。

 

background-position注意點：

• 任何背景圖片都是先設置水平方向的定位，再設置垂直方向的定位。
• 只有一個數值時，該數值將作用於水平方向的定位，而垂直方向的定位將以默認的50%為基准。
• 屬性值為百分比時，將以圖片的中心點為基准計算其相對位置，而使用px像素值時將以圖片的左上角為基准。
• 可以使用負值。

 

CSS Sprite常用來合並頻繁使用的圖形元素。

CSS Sprite注意點：

• 固定容器的寬度和高度。
• 超出容器的寬度和高度部分的背景圖片需要隱藏。
• 背景圖片在合並時，需要考慮每張圖片的用途。

 

圖文混排：給<img>設置float: left;

 

三種列表：

• 無序列表：<ul><li>...</li></ul>
• 有序列表：<ol><li>...</li><ol>
• 自定義列表：<dl> <dt>標題</dt> <dd>內容</dd> </dl>

 

行內元素不具備寬高屬性，只有將其轉化為塊級元素后才具備寬高屬性。

CSS樣式中能將塊元素以橫向排列方式排列的只有定位( position)和浮動( float)兩種方式。

 

CSS實現表現效果，javascript實現行為效果。

 

CSS樣式需要大家 不斷去摸索，不斷嘗試新的內容才會使每個人自身對CSS樣式的理解及處理問題的能力得到提升。

 

列表示例：

• 二級菜單導航(橫排)：
  要點：整體寬度、一級列表寬高和浮動、二級列表絕對定位。
  效果：http://jsfiddle.net/XianfaLang/4CPdG/
• 圖文列表信息：
  要點：整體寬度、浮動。
  效果：http://jsfiddle.net/XianfaLang/KM7Ua/

 

理解、分析、總結是必須要進行的幾個步驟：

• 理解每個例子中所講解的步驟及實現的方法。
• 分析每個方法的可用性及是否有其他更好的實現方法。
• 總結在每次實踐中所得到的經驗。

 

在IE瀏覽器中，按鈕與文字之間的垂直對齊關系 如同 復選框與文字之間的對齊關系，需要利用 vertical-align對其進行調整。

 

表格相關

border-collapse：檢索或設置表格的行和單元格的邊是否合並到一起。默認值：separate。合並：collapse。

可使用相鄰選擇符實現隔行換色。個人覺得此知識點，主要是了解相鄰選擇符的應用，實際應用性不大。

日歷表的制作： http://jsfiddle.net/XianfaLang/Z4wVQ/2/

 

將table標簽用於顯示數據結構，而不是用於頁面布局。

 

float是將頁面中的元素在水平方向上 並排顯示的，而 position卻是將頁面的元素以 疊加的方式顯示的。

 

使用CSS濾鏡之前，需要思考的幾個問題：

• 頁面中使用CSS濾鏡的次數會不會過多。
• 使用CSS濾鏡是不是會占用較多的CPU。
• 能否使用圖片直接代替由CSS濾鏡產生的效果。
• 使用CSS濾鏡后，會不會影響到頁面中的內容操作。

 

使用iframe實現的“選項卡”逐漸演變為將頁面內容集於一體，通過JS切換顯示內容。

實現tab選項卡要把握html結構與css樣式之間的微妙關系。

 

負邊距與層疊效果的應用：怪異的導航菜單。

 

IE瀏覽器會在每個列表li之間產生幾個像素的空間，可用float:left;使多余的幾個像素“消失”。

 

分析實例最好的方法就是 將其簡單化，從根本上去了解問題、分析問題。

 

清除浮動作用：

• 解決頁面錯位現象。
• 解決子元素浮動導致父元素無法自適應子元素高度的問題。

 

清除浮動的常用方法：

    1. clear屬性--常用clear: both;

    2. 添加額外標簽: <div style="clear:both;"></div>

    3. 使用 br標簽和其自身的 html屬性: <br clear="all">

    4. 父元素設置: overflow: hidden; *zoom:1; (在IE6中還需要觸發 hasLayout ，例如 zoom：1)

    5. 父元素設置: display: table;

    6. 父元素設置  :after 偽類 (推薦)：

.clearFix:after {
    clear: both; /* 清除偽類層以上的浮動 */
    display: block;   /* 使生成的元素以塊級元素顯示,占滿剩余空間; */
    visibility: hidden; /* 設置偽類層內容為塊級元素且不可見 */   
    height: 0;
    line-height: 0; /* 設置偽類層中的高度和行高為0 */
    content: " "; /* 將偽類層中的內容清空 */
}
.clearFix {
    zoom: 1; /* 針對IE瀏覽器產生hasLayout效果清除浮動 */
}

/* 更簡潔的寫法 */
.clearFix:before,
.clearFix:after {
    content: "";
    display: table;
}

.clearFix:after {
    clear: both;
}
.clearFix{
    zoom:1;
}

 

 

結構分析是頁面制作的第一步。

 

用戶習慣於滾動條上下移動，而不是左右移動。

 

如果圖片很大，可將其切成兩張圖片。

 

使用語義的XHTML標簽優點：

• 當樣式無法正常加載時，依然會顯示條理清晰的文檔結構。
• 增加SEO(搜索引擎優化)性能。
• 加強與程序開發之間的配合。
• 提高頁面后期維護的工作效率。

 

分享自己的作品，對批評你作品的人表示感謝，因為他在告訴你如何才能做的更好。

 

怎么提高自身編寫代碼的能力：

• 多看CSS手冊。
• XHTML代碼中每個標簽的含義。
• 善於分析CSS布局網站的處理方式。
• 多做CSS布局網站的練寫。
• 學會使用網絡搜索引擎。
• 善於利用輔助工具解決布局問題(Firebug, Chrome devtool)。
• 善於總結經驗、整理筆記(這里推薦大家使用有道雲筆記，PC/Mobile/Web都有，而且在微信中復制鏈接可直接同步雲筆記，這樣便於大家利用碎片時間閱讀筆記)。
• 收藏和使用代碼片段。