免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

CSS規(guī)范 - 分類方法

CSS文件的分類和引用順序

• 通常，一個(gè)項(xiàng)目我們只引用一個(gè)CSS，但是對(duì)于較大的項(xiàng)目，我們需要把CSS文件進(jìn)行分類。

  我們按照CSS的性質(zhì)和用途，將CSS文件分成“公共型樣式”、“特殊型樣式”、“皮膚型樣式”，并以此順序引用（按需求決定是否添加版本號(hào)）。

  1. 公共型樣式：包括了以下幾個(gè)部分：“標(biāo)簽的重置和設(shè)置默認(rèn)值”、“統(tǒng)一調(diào)用背景圖和清除浮動(dòng)或其他需統(tǒng)一處理的長(zhǎng)樣式”、“網(wǎng)站通用布局”、“通用模塊和其擴(kuò)展”、“元件和其擴(kuò)展”、“功能類樣式”、“皮膚類樣式”。

  2. 特殊型樣式：當(dāng)某個(gè)欄目或頁(yè)面的樣式與網(wǎng)站整體差異較大或者維護(hù)率較高時(shí)，可以獨(dú)立引用一個(gè)樣式：“特殊的布局、模塊和元件及擴(kuò)展”、“特殊的功能、顏色和背景”，也可以是某個(gè)大型控件或模塊的獨(dú)立樣式。

  3. 皮膚型樣式：如果產(chǎn)品需要換膚功能，那么我們需要將顏色、背景等抽離出來放在這里。

  ?

  1 2 3

  <link href="assets/css/global.css" rel="stylesheet" type="text/css"/> <link href="assets/css/index.css" rel="stylesheet" type="text/css"/> <link href="assets/css/skin.css" rel="stylesheet" type="text/css"/>

CSS內(nèi)部的分類及其順序

• 1. 重置（reset）和默認(rèn)（base）（tags）：消除默認(rèn)樣式和瀏覽器差異，并設(shè)置部分標(biāo)簽的初始樣式，以減少后面的重復(fù)勞動(dòng)！你可以根據(jù)你的網(wǎng)站需求設(shè)置！

  2. 統(tǒng)一處理：建議在這個(gè)位置統(tǒng)一調(diào)用背景圖（這里指多個(gè)布局或模塊或元件共用的圖）和清除浮動(dòng)（這里指通用性較高的布局、模塊、元件內(nèi)的清除）等統(tǒng)一設(shè)置處理的樣式！

  3. 布局（grid）（.g-）：將頁(yè)面分割為幾個(gè)大塊，通常有頭部、主體、主欄、側(cè)欄、尾部等！

  4. 模塊（module）（.m-）：通常是一個(gè)語(yǔ)義化的可以重復(fù)使用的較大的整體！比如導(dǎo)航、登錄、注冊(cè)、各種列表、評(píng)論、搜索等！

  5. 元件（unit）（.u-）：通常是一個(gè)不可再分的較為小巧的個(gè)體，通常被重復(fù)用于各種模塊中！比如按鈕、輸入框、loading、圖標(biāo)等！

  6. 功能（function）（.f-）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現(xiàn)，比如清除浮動(dòng)等！不可濫用！

  7. 皮膚（skin）（.s-）：如果你需要把皮膚型的樣式抽離出來，通常為文字色、背景色（圖）、邊框色等，非換膚型網(wǎng)站通常只提取文字色！非換膚型網(wǎng)站不可濫用此類！

  8. 狀態(tài)（.z-）：為狀態(tài)類樣式加入前綴，統(tǒng)一標(biāo)識(shí)，方便識(shí)別，她只能組合使用或作為后代出現(xiàn)（.u-ipt.z-dis{}，.m-list li.z-sel{}），具體詳見命名規(guī)則的擴(kuò)展相關(guān)項(xiàng)。

  功能類和皮膚類樣式為表現(xiàn)化的樣式，請(qǐng)不要濫用！以上順序可以按需求適當(dāng)調(diào)整。

  以上分類的命名方法詳見命名規(guī)則

  ?

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

  /* 重置 */ div,p,ul,ol,li{margin:0;padding:0;} /* 默認(rèn) */ strong,em{font-style:normal;font-weight:bold;} /* 統(tǒng)一調(diào)用背景圖 */ .m-logo a,.m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;} /* 統(tǒng)一清除浮動(dòng) */ .g-bdc:after,.m-dimg ul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';} .g-bdc,.m-dimg ul,.u-tab{zoom:1;} /* 布局 */ .g-sd{float:left;width:300px;} /* 模塊 */ .m-logo{width:200px;height:50px;} /* 元件 */ .u-btn{height:20px;border:1px solid #333;} /* 功能 */ .f-tac{text-align:center;} /* 皮膚 */ .s-fc,a.s-fc:hover{color:#fff;}