原標題：0031 如何使用css文件對網頁內容和樣式進行分離

上節課，學習了針對文字可以設置很多種樣式。

這節課，學習如何將內容和樣式進行分離。

上節課的課后練習

1.將斜體字體效果去除

2.將工作經歷和工作經驗(部分)這2行文字也做成簡介這行文字的效果

完成代碼如下：

頁面效果如下：

可以看到3個標題都是一樣的效果了。

但是，在編寫代碼的時候，發現一個問題，就是3個div的代碼是一模一樣的，復制起來很長，而且假如要將三個標題的字體全部都改小一點的話，要修改3處地方，有沒有一個簡便的方法，只改一次就好了呢？

新建css文件并使用

之前在div中利用屬性style來設置css屬性的方法是一種比較直接的方法，適合編寫某個特殊的樣式。

如果有大量相同的重復的style的時候，一般不采用style屬性，而是采用class屬性來實現。

也就是將相關的css屬性和值存放到一個單獨的以.css做為后綴名的文件中，然后html文件引用這個css文件，然后使用class屬性來使用。

首先，在代碼編輯器中新建一個文件，編寫代碼如下，就是將div里面style的值復制過來，并增加換行，保存為index.css，注意保存到目錄要和index.html位于同一個目錄下：

然后，在index.html當中在meta這一行下面新增一行，引入index.css

然后，將div里面的style="......"這一大段刪除，修改為class="bigtitle"：

刷新頁面，可以看到頁面效果是一樣的：

接下來，要將標題的文字從30px修改為20px，修改index.css文件中的font-size的值為20px，然后注意保存文件：

刷新頁面可以看到頁面的3個標題的字體同時變小了，只修改了一處地方就實現了目的：

這里要注意一點，在css文件中，設置一個樣式，需要樣式起一個名字，例如這里的bigtitle，然后名稱前面有一個點。

點的意思表示這個樣式需要用css="樣式名"來使用。

對特定標簽使用css文件定義

現在index.html里面還有一個地方使用了style，把它也挪到index.css文件中，插入如下代碼：

index.html刪除掉body開始標簽的后面的style的部分：

刷新頁面發現沒有變化：

修改index.css文件中body里面的background-color的值如下：

刷新頁面發現背景顏色變得更淡了：

這里，發現對css文件中樣式的定義有一點不一樣，而且html文件中沒有使用class="樣式名"，為何樣式仍然起作用了呢？

關鍵點在于css文件中樣式的名字為body，并且前面沒有點。

這樣的設置方式就是告訴瀏覽器，這個樣式只對body標簽起作用，對其他標簽不起作用，因此也不需要在body標簽里面使用class了。

關鍵點在于css里面樣式名和html元素標簽名一致來完成。

假如把css文件里面的第一行的body修改為div，那么里面的背景顏色值就對所有的div起作用了。

假如把css文件里面的第一行的body修改為dddd一個無效的名字，那么里面的背景顏色值就找不到對應的標簽從而沒有作用，這樣的話body標簽也就沒有設置背景色了。

這種設置方式在某些情況下是有好處的，可以靈活設置大量相同設置而無需設置class屬性，特別是在不同的html頁面都需要一樣的設置的時候，只要html都是引用同樣一個css文件，那么不同的html同樣的標簽都會自動匹配一樣的樣式了。

設置通用樣式和特殊樣式

如果要求所有頁面中所有的文字都是12px，但是標題內容行都是20px，該如何做呢？

先在css文件中的body里面增加文字大小的定義：

index.html不做修改，刷新頁面后可以看到，3段內容沒有任何樣式定義，但是所有的字體都變小了，同時標題內容行的字體大小仍然是20px，這是因為修改了body標簽的樣式，那么對于body里面包含的子元素標簽，該樣式都會起作用，除非子元素自己重新定義了這個樣式：

然后，需要將簡介的具體內容部分的字體大小調整為16px，而工作經歷和工作經驗的字體仍然保持12px不變，應該這樣修改：

在index.css 里面增加一個樣式，名字為smallcontent，里面只有font-size，如下：

然后修改index.html里面在簡介的具體內容前面加上

，最后一行刪掉

，然后加上

，如下：

刷新頁面可以看到因為簡介這塊做了特殊樣式定義，因此字體大小就變大了，其他2部分沒有設置，則字體不變：

內容和樣式分離的好處

通過上面將樣式都放在css文件的方法，可以將頁面內容和顯示效果進行分離。

分離的好處有很多：

1.修改一處地方，同時可以影響多個地方，修改更方便。

2.css文件中可以針對標簽設置，也可以特殊定義樣式名然后引用，可以更靈活，也可以減少樣式重復定義。

3.可以將內容的編寫任務交給程序員，將樣式的編寫交給設計人員或者美工，從而互不干擾，提高開發效率。

課后練習

使用css樣式將工作經歷和工作經驗部分的文字大小修改為14px，文字顏色修改為#222222。

往期教程

因為教程是系列教程，前后關聯性非常強，請大家按照歷史消息發布時間先后次序進行閱讀。返回搜狐，查看更多

責任編輯：