精通CSS-筆記1基礎

第一部分.基礎知識

Chapter1

本書中的全部示例代碼均可以經過如下網址來訪問：www .cssmastery .com / www .friendsofed .com。

命名類與Id：徹底使用小寫，使用-連字符。

微格式：是一組開發人員開發的一套關於命名約定和標記模式，它能夠用於標記人物、地點或日期等。簡而言之是一套命名規則。

DOCTYPE當前有兩種風格：嚴格(strict)和過渡(transitional)。過渡容許使用已經廢棄的元素，而嚴格不容許。

瀏覽器模式：標準模式和混雜模式(quirks mode)。在標準模式中，瀏覽器根據規範呈現頁面；在混雜模式中，頁面以一種比較寬鬆的向後兼容的方式顯示。Mozzilla與Safari還有第三種模式：「幾乎標準的模式」，只在處理表格的方式上有一些細微的差別之處。

DOCTYPE不存在或形式不正確都會致使HTML和XHTML文檔以混雜模式呈現。

Chapter2．Css選擇器

2.1經常使用選擇器：

類型選擇器(如p、h1)、後代選擇器(如blockquote p)、ID選擇器(#id)、類選擇器(.class)。

將一個類或ID用於它們的祖先，而後使用後代選擇器定位它們。

僞類：:link和:visited稱爲連接僞類，只能應用於錨元素。:hover、:active和:focus稱爲動態僞類，理論上能夠應用於任何元素。IE7忽略:active和:focus。

       經過把僞類鏈接在一塊兒，能夠建立更復雜的行爲，如在已經訪問連接和未訪問連接上實現不一樣的鼠標懸停效果，a:visited:hover、a:link:hover。

2.2通用選擇器：*

2.3高級選擇器//IE6-不支持

若是瀏覽器不理解某個選擇器，就會忽略整條style。但在對於站點功能或佈局很重要的元素上，都應該避免使用這些高級選擇器。

子選擇器和相鄰同胞選擇器：

       子選擇器只選擇元素的直接後代，如#nav>li。IE7+支持，但IE7中有一bug，若是在父元素和子元素之間有HTML註釋，就會出問題。在IE6-中，能夠經過#nav li{}去設置全部li的樣式，再經過#nav li *{}去覆蓋這種樣式。

       相鄰同胞選擇器：用於定位同一父元素下某個元素以後的元素，如h2+p。若是在目標元素之間有註釋，IE7也會有bug。

屬性選擇器：

       能夠根據某個屬性是否存在或屬性的值來尋找元素。

根據某個元素是否具備某個屬性來選擇，如：選擇acronym具備title屬性的元素能夠寫成acronym[title]{}，acronym[title]:hover, acronym[title]:focus{}。

根據該元素的某個屬性值來肯定：a [ rel =「nofollow」]。IE7+支持。也能夠這樣使用[ rel = 」nofollow」 ]和這樣使用[title]。

假如屬性有多個值，屬性選擇器容許根據屬性值之一尋找元素：a[rel~=」co–worker」]。

僞元素選擇器：

       如p:first-letter{}，向p元素的第一個字母添加特殊樣式；

       如p:first-line{}，向p元素的首行添加特殊樣式；

       如p:before{content:url(logo.gif);}，在p元素以前添加內容；

       如p:after{content:url(logo.gif);}，在p元素以後添加內容；

層疊和特殊性：

       層疊：尋找到同一元素的方法能夠有多種，CSS經過一個稱爲層疊的過程處理這種衝突。層疊給每一個規則分配一個重要度。大維度上的重要度：標有!important的用戶樣式>標有!important的做者樣式>站點開發者編寫的樣式（做者樣式）>瀏覽器用戶自定義（用戶樣式）>瀏覽器樣式表。

小維度上的重要度：根據選擇器的特殊性決定規則的次序。特殊性：特殊選擇器>通常選擇器。若兩個規則的特殊性相同，那麼後定義的規則優先。

站點開發者編寫的樣式（做者樣式）中，行內樣式優先級>其餘。ID選擇器>類、僞類和屬性選擇器>類型選擇器和僞元素選擇器（相鄰同胞選擇器、子選擇器不做爲優先級考慮對象）。

繼承：

       應用樣式的元素的後代會繼承樣式的某些屬性，好比顏色和字號。IE和Netscapes在繼承表格字號存在bug。

       直接應用於元素的任何樣式（包括瀏覽器默認樣式）總會覆蓋繼承而來的樣式（由於繼承而來的樣式的特殊性爲空）。

 

2.4規劃、組織和維護樣式表（管理代碼的方法）

推薦使用單一CSS外聯樣式表。但建議在這同樣式表內進行分割代碼。以/*開頭，以*/結果，進行註釋。

設計代碼的結構：

       最前面通常的規則/*group general styles-----*/：主體樣式、全局reset、連接、標題、其餘元素等。

       輔助樣式/*group helper styles-----*/：表單、通知和錯誤、一致的條目。

       頁面結構/*group page structure-----*/：標題、頁腳和導航；佈局；其餘頁面結構元素。

       頁面組件/*group page components-----*/：各個頁面。

       最後覆蓋/*group overrides -----*/：這裏使用一種風格統一的大註釋塊分隔每一個部分。

使用註釋的自我提醒：@colordef/@todo/@bugfix/@workaround，例：/* @todo: just write some words to remember something */。

 

Chapter3 浮動、定位和盒模型

3.1盒模型概述

*{margin:0;padding:0;}不要這樣設置。

IE6-的盒模型與W3C標準中的盒模型不一樣，迴避這個問題的方法：不要給元素添加具備指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素或子元素。

外邊距疊加（普通文檔流中塊框的垂直外邊距）：當兩個或更多垂直外邊距相遇時，它們將造成一個外邊距，且等於兩個發生疊加的外邊距的高度中的較大者。兩個元素位置能夠是上下排列，也能夠是一個元素包圍另一個元素。也但是同一個元素：空元素且有外邊距無邊框無內邊距，在這種狀況下，頂外邊距與底外邊距就碰到了一塊兒，發生疊加；即便發生這種狀況，在遇到另外一個元素時，還會疊加。

3.2定位概述(position)

Display:none不佔用文檔中的空間且不顯示。

CSS中的3種定位機制：普通流、浮動和絕對定位。

塊級框(display:block)：外邊距疊加，從上到下垂直排列。

行內元素（行內框display:inline）特色，能夠設置水平方向上的內外邊距、邊框，但不能設置寬度。垂直方向上的設置無任何顯示。由一行造成的水平框稱爲行框，行框的高度足以容納全部行內框，也能夠對行框設置行高。行內框可修改的尺寸：行高、水平邊框、水平內外邊距。

Display:inline-block元素：可以設置寬度、高度、垂直與水平外邊距和垂直與水平內邊距、且水平排列。IE8+支持。

匿名塊框：將一些文本添加到一個塊級元素的開關時，會被看成塊級元素對待。沒法直接對其進行應用樣式。但也可使用:first-line僞元素選擇器。

相對定位position:relative：相對自身位置變更，但原來空間仍然存在（而且仍然會外邊距疊加），會覆蓋其餘框，left/top/right/bottom，默認z-index爲0；

絕對定位position:absolute：脫離普通文檔流。位置設置相對於離它最近的已定位的祖先元素。如無，則相對畫布或HTML元素（初始包含塊）。IE6-存在一個bug。

固定定位position:fixed：絕對定位的一種，脫離普通文檔流，相對於視口(viewport)。IE6-不支持，IE7部分支持。

普通文檔流position:static。

浮動float:left/right：脫離普通文檔流，左右流動到外邊緣碰到包含框或另外一個浮動框的邊緣。浮動元素後面的框會表現得像浮動不存在，但框內容會受到浮動元素的影響，妤選框被縮短，給浮動元素留出空間。

清除浮動clear:left/right/both/none：在清理元素時，瀏覽器在元素頂上添加足夠的外邊距，直到降低到浮動框下面。

利用溢出overflow:hidden/auto/visible（默認）/scroll：hidden/auto屬性值有一個反作用，會自動清理包含的任何浮動元素。

利用僞類:after以及content」.」;height:0;visibility:hidden;display:block;clear:both;進行清理。IE6-不支持。

利用JS。