CSS樣式表也要玩結(jié)構(gòu)化

時(shí)間：2023-03-01 16:18:01 | 來(lái)源：建站知識(shí)

時(shí)間：2023-03-01 16:18:01 來(lái)源：建站知識(shí)

很多人可能會(huì)覺(jué)得奇怪，這標(biāo)題是什么意思，不過(guò)就一個(gè)樣式表而已，還談什么結(jié)構(gòu)化？且聽(tīng)如下理由：

玩Web重構(gòu)的朋友對(duì)CSS應(yīng)該都不會(huì)陌生了，都知道CSS里面有幾種常用的選擇符的樣式定義方法，才子將常用的幾種大致講解一下：
第一種是通配選擇符，就是將所有的元素先預(yù)定義一個(gè)樣式，如：

* { margin:0px; padding:0px; }

這樣設(shè)置之后，所有的元素都已經(jīng)將內(nèi)邊距和外邊距都設(shè)置成0px了。
PS：才子從來(lái)不這樣設(shè)置，因?yàn)樗鼤?huì)直接影響ul和ol之類的列表元素的樣式。

第二種是類型選擇符，才子喜歡稱它為標(biāo)簽選擇符，就是通過(guò)標(biāo)簽元素的名稱直接定義其樣式，如：

body { font-size:14px; }

這樣設(shè)置之后，所有body元素里的字體大小都是14px，但表格元素是個(gè)例外，要令表格元素字體大小也一樣，要這樣：

body,td { font-size:14px; }

第三種是ID選擇符，通過(guò)一個(gè)唯一的ID標(biāo)識(shí)符來(lái)定義某個(gè)元素的樣式，如：

#nav { color:red; }

這樣設(shè)置之后，nav元素下的字體都應(yīng)該是紅色的了。
應(yīng)用如：<div id="nav">這里是內(nèi)容</div>

第四種是類選擇符，才子一般叫它c(diǎn)lass選擇符，通過(guò)一個(gè)類來(lái)定義一種樣式，讓所有指定這個(gè)類的元素都生效，如：

.left { text-align:left; }
.right { text-align:right; }

上面定義了兩個(gè)類，這樣設(shè)置之后，指定哪個(gè)類的元素下的內(nèi)容就將依據(jù)類里的樣式定義來(lái)居左或居右排列了。
應(yīng)用如：
<div class="left">這里是left內(nèi)容</div>
<div class="right">這里是right內(nèi)容</div>

常用的大概就這四種，還有一些什么屬性選擇符，包含選擇符，我們平時(shí)應(yīng)用得相對(duì)比較少，在此不多說(shuō)了，有興趣的朋友請(qǐng)?jiān)诒菊鞠螺d蘇小雨的CSS 2.0中文手冊(cè)()。

下面來(lái)講主題了，怎么樣來(lái)結(jié)構(gòu)化呢？
做一個(gè)網(wǎng)站首先要有一個(gè)構(gòu)思，整站采用什么樣的色系，什么字體，字體大小如何等等，那么我們就可以把這些最基本的標(biāo)簽選擇符的樣式先寫(xiě)入一個(gè)CSS文件，如base.css，這個(gè)CSS里把這個(gè)站需要用到的一些標(biāo)簽元素都做一個(gè)基本的樣式設(shè)定，如body下的字體顏色和大小，超鏈接的樣式等等，甚至是用不到的標(biāo)簽也設(shè)置一下都無(wú)妨，為什么呢？哈哈，因?yàn)榭梢灾赜寐?。下次再做其它的站的時(shí)候，base.css基本不需要寫(xiě)了，直接拿來(lái)用，最多也只是稍微改動(dòng)一下下就行了，省不少事。

OK，再來(lái)看網(wǎng)站結(jié)構(gòu)了。玩Web重構(gòu)的朋友都知道，現(xiàn)在都用div+css來(lái)布局了，那么我們也將整個(gè)布局做一個(gè)單獨(dú)的CSS文件，如layout.css，把布局全部定義好。大多數(shù)網(wǎng)站布局也都差不太多，都大致有以下幾個(gè)模塊吧，如header,nav,content,sidebar,footer等等，那就都定義一下樣式吧，考慮到元素都有樣式的繼承性，其實(shí)有一些具體的屬性我們已經(jīng)不需要再次定義在ID選擇符里了。因?yàn)樗鼈兛梢岳^承base.css里的一些樣式了。

這個(gè)是重點(diǎn)了，我們?cè)賮?lái)做一個(gè)類選擇符的輔助CSS文件，如common.css，里面是些什么內(nèi)容呢？才子把自己用的文件copy一段共享一下。^0^

.clear { clear: both; } /*閉合浮動(dòng)元素*/
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }

.red { color: #F00; }
.green { color: #0F0; }
.blue { color: #00F; }
.yellow { color: #FF0; }
.orange { color: #F90; }
.gray { color: #696969; }

.bold { font-weight: bold; }
.hide { overflow: hidden; }
.none { display: none; }
.block { display: block; }
.inline { display: inline; }

.f11 { font-size: 11pt; }
.m5 { margin: 5px; }
.p8 { padding: 8px; }

哈哈，將一些我們比較常用的附加屬性都定義了一下，方便我們隨時(shí)調(diào)用，因?yàn)轭愡x擇符可以同時(shí)選用好幾個(gè)，而且優(yōu)先級(jí)比較高，比類型選擇符和ID選擇符都要優(yōu)先，那么我們就可以不管類型選擇符和ID選擇符定義過(guò)什么，我們都可以用class選擇符來(lái)重定義該元素的樣式，如
<div id="nav" class="bold red p8">內(nèi)容</div>
這樣，不管nav的ID選擇符里定義了什么內(nèi)容，那么這個(gè)元素里的字體肯定是加粗的紅色字體，內(nèi)邊距為8px。

講到這里，相信大家也看到了才子說(shuō)的所謂的結(jié)構(gòu)化了，如同我們寫(xiě)程序時(shí)將表現(xiàn)層與數(shù)據(jù)層分開(kāi)一樣，三個(gè)CSS文件都非常重要，緊密關(guān)聯(lián)，但似乎又很獨(dú)立，只要layout.css文件加載成功，那么網(wǎng)站就應(yīng)該已經(jīng)不會(huì)很明顯的變形了，而且這三個(gè)文件我們以后都可以很輕松的拿來(lái)重用，需要修改的地方不會(huì)太多，遠(yuǎn)比你重新為一個(gè)網(wǎng)站寫(xiě)一個(gè)完整的CSS文件要快得多。

以上是才子對(duì)CSS樣式表的結(jié)構(gòu)化的經(jīng)驗(yàn)，歡迎各位討論及拍磚！

風(fēng)流才子 作品，轉(zhuǎn)帖請(qǐng)保留原文地址鏈接，謝謝合作！
才子小窩：