【道勤網(wǎng)】- bmrsportswear.com 軟件視頻自學(xué)教程|免費(fèi)教程|自學(xué)電腦|3D教程|平面教程|影視動(dòng)畫教程|辦公教程|機(jī)械設(shè)計(jì)教程|網(wǎng)站設(shè)計(jì)教程！【道勤網(wǎng)】

標(biāo)題: 修改discuz中的css樣式 [打印本頁(yè)]

作者: 道勤數(shù)據(jù) 時(shí)間: 2015-1-28 15:05
標(biāo)題: 修改discuz中的css樣式
一、CSS書寫規(guī)范

1、屬性寫在一行內(nèi)，屬性之間、屬性名和值之間以及屬性與“{}”之間須有空格，例如：.class { width: 400px; height: 300px; }

2、屬性的書寫順序：

針對(duì)特殊瀏覽器的屬性，應(yīng)寫在標(biāo)準(zhǔn)屬性之前，例如：-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;

3、按照元素模型由外及內(nèi)，由整體到細(xì)節(jié)書寫，大致分為五組：

位置：position,left,right,float

盒模型屬性：display,margin,padding,width,height

邊框與背景：border,background

段落與文本：line-height,text-indent,font,color,text-decoration,...

其他屬性：overflow,cursor,visibility,...

4、謹(jǐn)慎添加新的選擇符規(guī)則，尤其不可濫用 id，盡可能繼承和復(fù)用已有樣式。

選擇符、屬性、值均用小寫（格式的顏色值除外），縮寫的選擇符名稱須說(shuō)明縮寫前的全稱，例如 .cl -> Clearfix

5、勿使用冗余低效的 CSS 寫法，例如：ul li a span { ... }

6、慎用 !important

7、建議使用在 class/id 名稱中的詞語(yǔ)

表示狀態(tài)：a->active

表示結(jié)構(gòu)：h->header,c->content,f->footer

表示區(qū)域：mn->main,sd->side,nv-navigation,mu->menu

表示樣式：l-list,tab,p_pop

8、命名方式盡量不通用，使用自己的前綴。例如:（.header => .archy_hd / .footer => .archy_ft / ......）

二、CSS多IE下兼容HACK寫法

所有 IE瀏覽器適用：       .ie_all .foo { ... }
IE6 專用：             .ie6 .foo { ... }
IE7 專用：             .ie7 .foo { ... }
IE8 專用：             .ie8 .foo { ... }

三、常用CSS

1、左浮動(dòng)、右浮動(dòng)
.z { float: left; }
.y { float: right; }
復(fù)制代碼
2、因?yàn)樽笥腋?dòng)造成的父級(jí)浮動(dòng)溢出，及使用方法
.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; }

<div class="cl">
<div class="z"></div>
</div>
復(fù)制代碼
3、大標(biāo)題字體
.wx, .ph { font-family: "Microsoft YaHei", "Hiragino Sans GB", STHeiti, Tahoma, SimHei, sans-serif; font-weight: 100; }
復(fù)制代碼
4、行內(nèi)分割豎線
.pipe { margin: 0 5px; color: #CCC; }
復(fù)制代碼
5、文字字體大小
.xs0 { font-family: {SMFONT}; font-size: {SMFONTSIZE}; -webkit-text-size-adjust: none; }
.xs1 { font-size: 12px !important; }
.xs2 { font-size: 14px !important; }
.xs3 { font-size: 16px !important; }
復(fù)制代碼
6、灰色文字
.xg1, .xg1 a { color: {LIGHTTEXT} !important; }
.xg1 .xi2 { color: {HIGHLIGHTLINK} !important; }
.xg2 { color: {MIDTEXT}; }
復(fù)制代碼
7、高亮文字，1為橙色，2為藍(lán)色
.xi1, .onerror { color: {NOTICETEXT}; }
.xi2, .xi2 a, .xi3 a { color: {HIGHLIGHTLINK} ; }
復(fù)制代碼
8、文字粗體
.xw0 { font-weight: 400; }
.xw1 { font-weight: 700; }
復(fù)制代碼
9、層下邊線
.bbda { border-bottom: 1px dashed {COMMONBORDER}; }
.bbs { border-bottom: 1px solid {COMMONBORDER} !important; }
復(fù)制代碼
10、去除邊框
.bw0 { border: none !important; }
.bw0_all, .bw0_all th, .bw0_all td { border: none !important; }
復(fù)制代碼
11、去除背景
.bg0_c { background-color: transparent !important; }
.bg0_i { background-image: none !important; }
.bg0_all { background: none !important; }
復(fù)制代碼
12、外邊距樣式
.mtn { margin-top: 5px !important; }
.mbn { margin-bottom: 5px !important; }
.mtm { margin-top: 10px !important; }
.mbm { margin-bottom: 10px !important; }
.mtw { margin-top: 20px !important; }
.mbw { margin-bottom: 20px !important; }
復(fù)制代碼
13、內(nèi)邊距樣式
.ptn { padding-top: 5px !important; }
.pbn { padding-bottom: 5px !important; }
.ptm { padding-top: 10px !important; }
.pbm { padding-bottom: 10px !important; }
.ptw { padding-top: 20px !important; }
.pbw { padding-bottom: 20px !important; }
復(fù)制代碼

【道勤網(wǎng)】- bmrsportswear.com 軟件視頻自學(xué)教程|免費(fèi)教程|自學(xué)電腦|3D教程|平面教程|影視動(dòng)畫教程|辦公教程|機(jī)械設(shè)計(jì)教程|網(wǎng)站設(shè)計(jì)教程！【道勤網(wǎng)】

【道勤網(wǎng)】- bmrsportswear.com 軟件視頻自學(xué)教程|免費(fèi)教程|自學(xué)電腦|3D教程|平面教程|影視動(dòng)畫教程|辦公教程|機(jī)械設(shè)計(jì)教程|網(wǎng)站設(shè)計(jì)教程！【道勤網(wǎng)】