[風間]

在預設模板基礎上簡單的修改、附加擴充套件 CSS 時只需在對應的模板套系下新增一個對應的擴充套件 CSS 檔案即可, 例如修改或擴充套件 common.css 中的程式碼, 只需在建立的模板套系目錄對應位置：common/ 資料夾下新建一個 extend_common.css 檔案, 然後追加需要修改或者擴充套件的 CSS 程式碼。在生成快取 CSS 時, 擴充套件程式碼會追加到預設模板的 CSS 檔案 tmplate/default/common/common.css 解析成當前的模板 id 快取樣式檔案。

CSS 繼承規範：
• Discuz! X 系列產品中 CSS 檔案會在快取時按照以下順序進行合併：
  • template/default/*.css 檔案。
  • 當前模板是非預設模板時, template/當前模板目錄/extend_*.css 檔案 或 template/當前模板目錄/*.css 。
  • 當某外掛啟用時, source/plugin/外掛目錄/template/extend_*.css 檔案。
• 因此非預設模板目錄中的 CSS 屬性將繼承預設模板中的 CSS 屬性, 外掛目錄中的 CSS 檔案將繼承前二者的 CSS 屬性。
• CSS 自身的整合順序為：當 CSS 屬性名稱相同時, CSS 檔案中, 寫在後面的替換前面的程式碼。

 

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

 

常用 css 例項：
• 相容 IE 瀏覽器 css hack
  

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

• 浮動樣式及浮動元素父元素高度自適應樣式程式碼： .z/.y 浮動 left/right .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; }
• 外邊距樣式： .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; }
• 文字字型大小： .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; }
• 內邊距樣式： .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; }
• 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 。

[殼殼蟲]

沒錯，我就是——美貌與智慧並重，英雄與俠義的化身，存在的意義就是消滅零回覆！

為什麼我會出現在這裡：

1 、時間過長、此貼釋出時間太長，且未收到相關回復；

2 、水貼、單純的發表見解，尚未收到相關回復；

3 、不支援或未解決的問題，無法回應或未收到相關回復

如有與之相關的問題，請發表新話題進行討論。

[作者]

帖子