在默認模板基礎上簡單的修改、附加擴展 CSS 時只需在對應的模板套系下添加一個對應的擴展 CSS 文件即可, 例如修改或擴展
common.css 中的代碼, 只需在創建的模板套系目錄對應位置:common/ 文件夾下新建一個 extend_common.css 文件,
然後追加需要修改或者擴展的 CSS 代碼。在生成緩存 CSS 時, 擴展代碼會追加到默認模板的 CSS 文件
tmplate/default/common/common.css 解析成當前的模板 id 緩存樣式文件。

    CSS 繼承規範:

  1. Discuz! X 系列產品中 CSS 文件會在緩存時按照以下順序進行合併:
    1. template/default/*.css 文件。
    2. 當前模板是非默認模板時, template/當前模板目錄/extend_*.css 文件 或 template/當前模板目錄/*.css 。
    3. 當某插件啓用時, source/plugin/插件目錄/template/extend_*.css 文件。
  2. 因此非默認模板目錄中的 CSS 屬性將繼承默認模板中的 CSS 屬性, 插件目錄中的 CSS 文件將繼承前二者的 CSS 屬性。
  3. CSS 自身的集成順序為:當 CSS 屬性名稱相同時, CSS 文件中, 寫在後面的替換前面的代碼。
    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 實例:

  1. 兼容 IE 瀏覽器 css hack
    所有 IE 瀏覽器適用: .ie_all .foo { ... }
    IE6 專用: .ie6 .foo { ... }
    IE7 專用: .ie7 .foo { ... }
    IE8 專用: .ie8 .foo { ... }

  2. 浮動樣式及浮動元素父元素高度自適應樣式代碼:

    .z/.y 浮動 left/right .z { float: left; } .y { float: right; }
    .cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; }

  3. 大標題字體:

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

  4. 外邊距樣式:

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

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

  6. 內邊距樣式:

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

  7. module.css 文件架構解析 (此文件必須按照格式編寫)
    /** group::index **/
        /* 羣組 index 模塊使用的 CSS */
    /** end **/

    /** group::index,forum::index **/
        /* 羣組 index 和 論壇 index 模塊使用的 CSS */
    /** end **/

    /** forum **/
        /* 論壇 所有模塊使用的 CSS */
    /** end **/

    實現模塊化 css 分部加載!格式固定多個模塊用」, 「隔開例如:
    /** misc::invite,group,forum::viewthread,portal::view,home::space **/

    這個文件的分部加載是對應程序地址例如:forum.php?mod=forumdisplay, 應當按照 CURSCRIPT::$mod 格式寫即:forum::forumdisplay 。