系列教程 Discuz模板內(nèi)置常用CSS代碼分析

2018-6-13 11:29| 發(fā)布者: 豬八戒| 查看: 537| 評(píng)論: 0

摘要: 制作模板時(shí)必須學(xué)會(huì)的就是css語法，css是一種相對(duì)比較簡(jiǎn)單的前臺(tái)HTML基礎(chǔ)語言(css2中文手冊(cè)下載)。學(xué)會(huì)使用內(nèi)置常用CSS，可以減少代碼，優(yōu)化網(wǎng)頁結(jié)構(gòu)一、CSS書寫規(guī)范1、屬性寫在一行內(nèi)，屬性之間、屬性名和值之間以 ...

制作模板時(shí)必須學(xué)會(huì)的就是css語法，css是一種相對(duì)比較簡(jiǎn)單的前臺(tái)html基礎(chǔ)語言(css2中文手冊(cè)下載)。學(xué)會(huì)使用內(nèi)置常用CSS，可以減少代碼，優(yōu)化網(wǎng)頁結(jié)構(gòu)

一、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ù)用已有樣式。

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

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

6、慎用 !important

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

表示狀態(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; }

2、因?yàn)樽笥腋?dòng)造成的父級(jí)浮動(dòng)溢出，及使用方法

.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; }

</div>

3、大標(biāo)題字體

.wx, .ph { font-family: "Microsoft YaHei", "Hiragino Sans GB", STHeiti, Tahoma, SimHei, sans-serif; font-weight: 100; }

4、行內(nèi)分割豎線

.pipe { margin: 0 5px; color: #CCC; }

5、文字字體大小

.xs0 { font-family: {SMFONT}; font-size: {SMFONTSIZE}; -webkit-text-size-adjust: none; }

.xs1 { font-size: 12px !important; }