CSS基礎_02

　　先來講一下什麼是css吧，cascading style sheets中文翻譯爲層疊樣式表，就是用來控制頁面佈局樣式的技術，在你熟悉了web編寫以後會發現，其實css是一件很繁瑣且沒有邏輯的工做，甚是枯燥乏味，入門較易，精通極難。

　　鑑於css的都是比較星散的知識點，因此大概梳理一下本文將要介紹的幾個點：css簡介，css樣式表的創建，css樣式表的優先級，css語法，css選擇器。

　　1、CSS簡介

　　老樣子，我的推薦學習任何知識都要先適當瞭解一下有關知識的歷史，演變，發展前景。CSS是什麼？WEB標準中的表現標準語言,表現標準語言在網頁中主要對網頁信息的顯示進行控制，簡單說就是如何修飾網頁信息的顯示樣式。 用來表現XHTML或者XML等樣式文件的計算機語言。 1998年5月21日由w3C正式推出的css2.0，目前推薦遵循的是W3C發佈的CSS3.0.。

　　div+css的優勢：

　　　　縮減頁面代碼，提升訪問速度;

　　　　代碼減小，頁面文件就會小，佔用網絡帶寬就少，客戶端打開速度就快，用戶體驗會更好；

　　　　結構清晰，有利於seo - 有利於搜索引擎優化 - 縮短改版時間 - 對網站的重構有很好的支持 - 彌補html語言的不足。

　　其次，樣式表能實現內容與樣式的分離，方便團隊開發，提升團隊配合的效率，css一樣也能夠實現樣式的複用，方便建站後期的維護和迭代工做等等。

　　

　　2、CSS樣式表的創建

　　

　　一、內部樣式表（嵌套到頁面中）

　　

 

　　二、內聯樣式（行間樣式，行內樣式，嵌入式樣式）

　　

 

　　三、引用外部樣式表文件　

　　外部樣式表的使用涉及兩個步驟，一是創建，二是調用。創建的話即爲建立一個.CSS的文件，調用則有兩種方法。（工做中作項目，在排除特殊狀況的前提下，是不容許使用內聯樣式的書寫方式，由於這樣會消耗很大的性能不利於用戶體驗，其次不符合編碼的行爲習慣。）　

　　

　　

　　link和import導入外部樣式的區別：

　　差異1：老祖宗的差異：link屬於XHTML標籤，而@import徹底是CSS提供的一種方式。 link標籤除了能夠加載CSS外，還能夠作不少其它的事情，好比定義RSS，定義rel鏈接屬性等，@import就只能加載CSS。

　　差異2：加載順序的差異：當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS 會等到頁面所有被下載完再被加載。因此有時候瀏覽@import加載CSS的頁面時開始會沒有樣式。　

　　差異3：兼容性的差異。：@import是CSS2.1提出的，因此老的瀏覽器不支持，@import只在IE5以上的才能識別，而link標籤無此問題。

　　差異4：使用dom控制樣式時的差異：當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的。（基本上如今都會用link，import在工做中運用較少。）

　　3、CSS樣式表的優先級

　　1.內聯樣式表的優先級別最高

　　2.內部樣式表與外部樣式表的優先級和書寫的順序有關，後書寫的優先級別高。

　　優先級其實仍是一個比較經常使用的知識點，因爲工做中會存在大量的迭代，更新，和需求的變更，因此有時咱們須要在別人的樣式基礎上去修改和覆蓋一些樣式，當項目比較龐大時，重構他人的css代碼最好的辦法就是新建一個表而後去覆蓋相關項的樣式，這個時候就要搞清楚優先級的順序了，固然，若是改動部分比較小，在考慮不浪費開發時間的前提下，也能夠直接找到對應Dom去修改內聯樣式，某種意義上講這也是最直接粗暴簡單的辦法。

　　4、CSS語法

　　css語法，由兩部分組成：選擇符+聲明。     =》選擇符{屬性：屬性值；屬性：屬性值；}

　　

　　

　　說明：

　　　　1）每一個CSS樣式由兩部分組成，即選擇符和聲明，聲明又分爲屬性和屬性值；

　　　　2）屬性必須放在花括號中，屬性與屬性值用冒號鏈接。

　　　　3）每條聲明用分號結束。

　　　　4）當一個屬性有多個屬性值的時候，屬性值與屬性值不分前後順序。

　　　　5）在書寫樣式過程當中，空格、換行等操做不影響屬性顯示。

　　　　舒適提示：Hbuilder編輯器中 Ctrl+Shift+F能夠將選中代碼格式化，HTML和CSS均可以格式化，若是對格式問題不清楚，可按照IDE上的縮進對齊方式去培養本身的編碼格式習慣。

　　5、CSS選擇器（CSS選擇符）

　　選擇符表示要定義樣式的對象，能夠是元素自己，也能夠是一類元素或者制定名稱的元素。 CSS選擇符包括4大類：類型選擇符、id選擇符、class選擇符、和特殊選擇符。

　　經常使用的選擇符有十種左右：類型選擇符（標記選擇器）/ 類選擇符 （class選擇符）/ ID選擇符 （id選擇器）/ 僞類選擇器 / 羣組選擇符（集合選擇器）/ 通配符（*）/ 僞對象選擇符 / 包含選擇符（後代選擇器）

　　1） 元素選擇符/類型選擇符（element選擇器 ) 語法：元素名稱{屬性：屬性值；}  

　　說明： a)元素選擇符就是以文檔語言對象類型做爲選擇符，即便用結構中元素名稱做爲選擇符。例如body、div、p、img、em、strong、span......等。 b)全部的頁面元素均可以做爲選擇符; 用法： 1)若是想改變某個元素得默認樣式時，可使用類型選擇符；2)當統一文檔某個元素的顯示效果時，可使用類型選擇符；

　　2) id選擇器 語法：#id名{屬性：屬性值;}

　　說明： 1）當咱們使用id選擇符時，應該爲每一個元素定義一個id屬性， 如：<div id="top"></div> 2）id選擇符的語法格式是「#」加上自定義的id名 如：#box{width:300px; height:300px;} 3)  起名時要取英文名，不能用關鍵字：(全部的標記和屬性都是關鍵字) 如：head標記 4）一個id名稱只能對應文檔中一個具體的元素對象，由於id只能定義頁面中某一個惟一的元素對象。 5)   最大的用處：建立網頁的外圍結構。

　　3）class選擇器 語法：.class名{屬性：屬性值;}

　　說明： 1）當咱們使用類選擇符時，應先爲每一個元素定義一個類名稱， 2）類選擇符的語法格式是："如：<div class="top"></div>" 用法：class選擇符更適合定義一類樣式；

　　4) * 通配符 語法：*{屬性：屬性值；}

　　說明：通配選擇符的寫法是「*」，其含義就是全部元素。用法：經常使用來重置樣式。

　　5）羣組選擇器 語法：選擇符1,選擇符2,選擇符3{屬性：屬性值;}

　　說明：當有多個選擇符應用相同的樣式時，能夠將選擇符用「，」分隔的方式，合併爲一組。 作頁面居中設置 ：選擇符{margin:0 auto;}

　　6） 包含選擇器 語法：選擇符1    選擇符2{屬性：屬性值;} 選擇符父級 選擇符子級{屬性：屬性值;}

　　說明：選擇符1和選擇符2用空格隔開，含義就是選擇符1中包含的全部選擇符2;

　　7） 僞類選擇器(僞類選擇符) 語法 ：

　　　　a:link{屬性：屬性值;}超連接的初始狀態;

　　　　a:visited{屬性：屬性值;}超連接被訪問後的狀態;

　　　　a:hover{屬性：屬性值;}鼠標懸停，即鼠標劃過超連接時的狀態;

　　　　a:active{屬性：屬性值;}超連接被激活時的狀態，即鼠標按下時超連接的狀態;

 

　　　涉及到不一樣的選擇器，就會引入一個比較重要的概念，就是權重。（權重其實能夠理解爲每一個選擇器的價格，越高的就越貴，類比理解。至於每一個選擇器的權重是多少就只能去機械記憶了。）

　　　權重的相關規則：

　　　　1.當不一樣選擇符的樣式設置有衝突的時候，高權重選擇符的樣式會覆蓋低權重選擇符的樣式。

　　　　2.相同權重的選擇符，樣式遵循就近原則：哪一個選擇符最後定義，就採用哪一個選擇符樣式。（注意：是樣式中定義該選擇符的前後，而不是html中使用前後）

　　　　選擇符的權重：

　　　　 css中用四位數字表示權重，權重的表達方式如：0，0，0，0

　　　　 類型選擇符的權重爲0001 /class選擇符的權重爲0010 /id選擇符的權重爲0100 /子選擇符的權重爲0000 /屬性選擇符的權重爲0010 /僞類選擇符的權重爲0010 /僞元素選擇符的權重爲0010 /包含選擇符的權重：包含的選擇符權重值之和  /內聯樣式的權重爲1000 /繼承樣式的權重爲0000

　　　　(工做中書寫CSS，遵循一個原則即爲低權重原則。由於權重越高，代碼改寫起來就會越困難，越不利於項目的迭代和跟進修改，故而咱們要養成良好的習慣，完成需求的同時儘可能下降css的權重。)

　　　　

　　　　

 

　　　　路漫漫其修遠兮，css中的學問也是十分深入奧妙的，和HTML同樣，也是須要通過大量的練習，在實戰中成長，切莫急於求成，填坑的道路上多看多學多總結方爲正解，CSS學習之路，與君共勉。