精品在线一区二区三区,亚洲国产日韩在线观看

主頁(yè) > 知識(shí)庫(kù) > CSS樣式表規(guī)劃與管理的經(jīng)驗(yàn)總結(jié)

CSS樣式表規(guī)劃與管理的經(jīng)驗(yàn)總結(jié)

徹底放棄表格布局，使用xhtml+CSS建站也已經(jīng)有一年多了。一年多的實(shí)踐也積累了一定的經(jīng)驗(yàn)，現(xiàn)在寫(xiě)這篇文章來(lái)總結(jié)一下。在使用xhtml+CSS建站的過(guò)程中有一個(gè)比較關(guān)鍵的問(wèn)題：網(wǎng)站的CSS樣式表規(guī)劃與管理。

我的CSS管理進(jìn)化史

　　在最初使用CSS來(lái)控制網(wǎng)站樣式的時(shí)候，并不清楚CSS管理規(guī)劃之類(lèi)的東西，所寫(xiě)的CSS基本上都是按照需要，隨時(shí)添加，剛開(kāi)始還不覺(jué)得有什么不好，但是后來(lái)越加越多，越改越亂，雖然有一些注釋?zhuān)阶詈筮€是變得讓我自己看著都頭疼。那個(gè)時(shí)候，一個(gè)網(wǎng)站所有的CSS都在一個(gè)文件中，沒(méi)有規(guī)劃，并且排序也沒(méi)多少規(guī)律，于是只能在html頁(yè)面中找到class的名稱(chēng)，然后在上千行的css代碼中搜索自己想要的那個(gè)。

　　過(guò)了一段時(shí)間，思考總結(jié)之后，我對(duì)站點(diǎn)的CSS樣式表進(jìn)行了初級(jí)的規(guī)劃。在樣式表中初步劃分了三個(gè)區(qū)域：

Example Source Code [www.52css.com]
base 樣式表
layout 樣式表
class 樣式表
　　其中“base 樣式表”用來(lái)描述一些公共性的東西，比如全局性的body、a樣式等；“l(fā)ayout 樣式表”用來(lái)描述具有唯一性的id布局，屬于整個(gè)頁(yè)面的框架式布局；“class 樣式表”用來(lái)描述剩下的class類(lèi)的樣式，這類(lèi)樣式分為可復(fù)用樣式和通常只在特殊頁(yè)面出現(xiàn)一次或幾次的樣式。

　　按照這種方法布局的確提高了不少的效率，但這種方式只適合中小型網(wǎng)站，在大型網(wǎng)站上應(yīng)用還是略顯單薄，至少在多人協(xié)作的時(shí)候并不能達(dá)到最佳效率。于是就有了下面總結(jié)的較完善的CSS管理規(guī)劃模式。

較完善的CSS樣式表管理模式

　　step1：個(gè)人或者團(tuán)隊(duì)需要將主要頁(yè)面的布局用DIV圖的模式按層次畫(huà)出來(lái)，這個(gè)DIV圖就是在設(shè)計(jì)原型的基礎(chǔ)上，將頁(yè)面中的主要模塊使用的ID名、class名標(biāo)注出來(lái)，方便建立維護(hù)文檔以便將來(lái)進(jìn)行修改與升級(jí)。

　　step2：劃分CSS結(jié)構(gòu)，建立全局css及各模塊css。在html頁(yè)面中引用全局css，在全局css中引用各模塊css。

Example Source Code [www.52css.com]
建立global.css為全局css，在全局css中定義“* { … } body { … }”之類(lèi)的全局樣式。
在全局樣式中通過(guò)“@import url(”xxx.css”);”引入模塊css。
　　關(guān)于模塊CSS的劃分，我比較喜歡類(lèi)似wordpress中的css劃分方式，一般情況下通過(guò)類(lèi)似下列結(jié)構(gòu)劃分：

Example Source Code [www.52css.com]
layout.css /* 整站布局 */
public.css /* 公用組合樣式 */
header.css /* 頁(yè)面頭部區(qū)域樣式 */
sidebar.css /* 側(cè)邊欄區(qū)域樣式 */
main.css /* 主體區(qū)域樣式 */
footer.css /* 底部區(qū)域樣式 */
index.css /* 首頁(yè)區(qū)域特有樣式 */
form.css /* 表單類(lèi)樣式 */
　　解釋一下，layout.css負(fù)責(zé)整個(gè)網(wǎng)站的布局，比如#header, #footer等布局的基本位置及樣式設(shè)計(jì)；public.css負(fù)責(zé)一些公用樣式定義，因?yàn)橐粋€(gè)class中可以使用class=”navbar font12px”這種利用中間空格分隔的方法來(lái)應(yīng)用多個(gè)class樣式，所以可以定義一些比較常用的或者在特殊情況下需要修改的公用class，方便局部微調(diào)；header.css、sidebar.css、footer.css等模塊是對(duì)應(yīng)頭部、側(cè)邊欄、底部模塊的css樣式表，可以根據(jù)網(wǎng)站的具體需求來(lái)增減模塊；index.css是一些首頁(yè)特有元素的css，因?yàn)槭醉?yè)的特殊性，我們?cè)谠O(shè)計(jì)css的時(shí)候通常對(duì)首頁(yè)進(jìn)行特殊處理，一般情況下，首頁(yè)是css最復(fù)雜的一個(gè)頁(yè)面，有必要對(duì)首頁(yè)的獨(dú)有css元素進(jìn)行歸類(lèi)放置，也可以不用@import引入index.css，而把它單獨(dú)放到首頁(yè)引用；form.css是表單元素的樣式表，表單雖然不難，但控制起來(lái)還是比較麻煩的，單獨(dú)放到一個(gè)css文件里方便控制，當(dāng)然，類(lèi)似的其他元素你也可以這么處理。

　　step3：在各個(gè)樣式表文件中寫(xiě)入樣式。

標(biāo)簽：陽(yáng)泉遼源海東邯鄲東莞喀什濱州南充

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《CSS樣式表規(guī)劃與管理的經(jīng)驗(yàn)總結(jié)》，本文關(guān)鍵詞 CSS,樣式,表,規(guī)劃,與,管理,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。