B S開發之路，如何學習Css

學習css我就不畫結構圖了，因為它比較簡單，不是很複雜的知識結構。

之前的文章解釋過，css即層疊樣式表。

css是用來給html「搞裝修」的，前面文章說過css的作用。

那麼css是怎麼裝修html的呢？

css「裝修」html方式一

style="background-color:yellow;">
style="font-size:14px;color:blue;">我的第乙個段落。

上方**框中的藍色字型就是標籤的style屬性了，style英文翻譯就是樣式、風格的意思。所以style的屬性值就是用來設定樣式的

比如第2行**中，我給body標籤的style屬性的屬性值是background-color（背景顏色），背景色為 yellow，那麼這個網頁的背景顏色就會變成黃色（預設白色）。

再比如第3行**中，我給h1標籤的style屬性的屬性值是color（字型顏色），字型顏色為 red ，那麼「我的第乙個標題」這幾個字將變為紅色。

還有第4行**，我給p標籤的style屬性的屬性值有兩個，乙個font-size，乙個color ，style有多個屬性值的時候我們把每個屬性值用英文分號隔開，那麼「我的第乙個段落」這幾個字將變為blue（藍色）並且字型大小會變為14px （網頁中的單位）。

沒錯，相信你看出來了，css就是通過設定每個標籤的style屬性來「裝修」html的，那麼這麼寫好嗎？實際開發中不僅僅只有字型大小字型顏色等幾個樣式，而是可能有許許多多的樣式，那麼寫在style屬性中會有太多太多不方便閱讀**等缺點。

css「裝修」html方式二

每個html標籤都有style屬性，那麼它還有其他屬性沒呢？

肯定是有的，每個html標籤還有另外乙個叫class的屬性。class 類選擇器屬性，與class類似的還有乙個id屬性

而我們的方式二就是依靠class屬性和id屬性展開講解。

先觀察下方**框

這是乙個段落

我給h1標籤設定了class屬性，並且屬性值為 h1cls ，那麼這麼做有什麼用嗎？當然沒用，大家發現我的這個段**中多個style標籤了嗎？之前我們講過style屬性，而現在上面出現了style標籤，大家有沒有引發上面思考呢？

而且我的style標籤中統樣有 color:red;這樣的樣式

再看，我們h1標籤的class屬性的屬性值為 h1cls ，而style標籤中有乙個「.h1cls」，別忽略了前面那個點。對了，這樣的作用就是為了把h1標籤的class和上方style標籤的 .h1cls中的樣式關聯起來

直接點說就是：我的h1標籤使用的是 style標籤中的.h1cls花括號中的樣式

同理，我的p標籤的id屬性，就是為了讓這個p標籤使用style標籤中的 #pid花括號中的樣式

class和id屬性都是選擇器，前者叫「類選擇器」，在style標籤中使用「 . 」標記，後者叫「id選擇器」，在style標籤中使用「 # 」標記。

css「裝修」html方式三

按照分離原則，我們應該吧css**寫在另外乙個檔案中，而不是寫在html檔案中，寫法和在style標籤中一樣，而標籤上的選擇器也支援class和id選擇器，下面直接給示例吧

css檔案檔名 index.css

.h1cls

#pid

html檔案檔名 index.html

這是乙個段落

看著這段html**大家是不是有什麼問題呢？它怎麼知道我需要關聯的css檔案是哪個呢？所以這個**是達不到效果的，應該是下面這樣

這是乙個段落

藍色加粗部分就是引入css檔案的link標籤，href屬性值為index.css的檔案路徑

css也是有常用樣式的，常用樣式你可以參考 css常用樣式

好了，以上就是學習css的分享，希望能給初學者乙個方向——致曾經埋頭瞎j8折騰的我們！