discuz內建常用CSS程式碼分析

標籤：discuz   color   os   使用   io   strong   ar   div   cti   

CSS多IE下相容HACK寫法

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

CSS書寫規範

1. 屬性寫在一行內，屬性之間、屬性名稱和值之間以及屬性與“{}”之間須有空格，例如：.class { width: 400px; height: 300px; }
2. 屬性的書寫順序：
   1. 針對特殊瀏覽器的屬性，應寫在標準屬性之前，例如：-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;
   2. 按照元素模型由外及內，由整體到細節書寫，大致分為五組：
      1. 位置：position,left,right,float
      2. 盒模型屬性：display,margin,padding,width,height
      3. 邊框與背景：border,background
      4. 段落與文本：line-height,text-indent,font,color,text-decoration,...
      5. 其他屬性：overflow,cursor,visibility,...
3. 謹慎添加新的選擇符規則，尤其不可濫用 id，儘可能繼承和複用已有樣式
4. 選擇符、屬性、值均用小寫（格式的顏色值除外），縮寫的選擇符名稱須說明縮寫前的全稱，例如 .cl -> Clearfix
5. 勿使用冗餘低效的 CSS 寫法，例如：ul li a span { ... }
6. 慎用 !important
7. 建議使用在 class/id 名稱中的詞語
   1. 表示狀態：a->active
   2. 表示結構：h->header,c->content,f->footer
   3. 表示地區：mn->main,sd->side,nv-navigation,mu->menu
   4. 表示樣式：l-list,tab,p_pop

常用CSS

• 左浮動、右浮動

.z { float: left; } .y { float: right; }

• 因為左右浮動造成的父級浮動溢出，及使用方法

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

 

• 大標題字型

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

• 行內分割豎線

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

• 文字字型大小

.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; }

• 灰色文字

.xg1, .xg1 a { color: {LIGHTTEXT} !important; }.xg1 .xi2 { color: {HIGHLIGHTLINK} !important; }.xg2 { color: {MIDTEXT}; }

• 高亮文字，1為橙色，2為藍色

.xi1, .onerror { color: {NOTICETEXT}; }.xi2, .xi2 a, .xi3 a { color: {HIGHLIGHTLINK} ; }

• 文字粗體

.xw0 { font-weight: 400; }.xw1 { font-weight: 700; }

• 層下邊線

.bbda { border-bottom: 1px dashed {COMMONBORDER}; }.bbs { border-bottom: 1px solid {COMMONBORDER} !important; }

• 去除邊框

.bw0 { border: none !important; }.bw0_all, .bw0_all th, .bw0_all td { border: none !important; }

• 去除背景

.bg0_c { background-color: transparent !important; }.bg0_i { background-image: none !important; }.bg0_all { background: none !important; }

• 外邊距樣式

.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; }

• 內邊距樣式

.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; }

discuz內建常用CSS程式碼分析