兔源码网 - 专注DZ模版分享、DZ插件分享!

 找回密码
 立即注册

QQ登录

只需一步,快速开始

广告
温馨提示:本站所有DZ相关模板、插件、教程(包括DZ应用中心已下架插件、模板)皆为提供免费下载,无任何收费模式(不包括VIP版块非DZ资源,VIP版块需充值兔币购买会员组方可下载),用户仅需手动前往【申请下载权限】申请用户组下载权限即可,如本站没有您需要的插件或模板,请自行前往淘宝互站网送吗网等第三方站点搜索相关插件或模板进行低价格购买下载本站非常不建议用户浪费金钱前往DZ应用中心购买。

DZ资料库:CSS扩展

[复制链接]
tuyuanma 发表于 2017-4-6 10:23:47 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


在默认模板基础上简单的修改、附加扩展 CSS 时只需在对应的模板套系下添加一个对应的扩展 CSS 文件即可, 例如修改或扩展 common.css 中的代码, 只需在创建的模板套系目录对应位置:common/ 文件夹下新建一个 extend_common.css 文件, 然后追加需要修改或者扩展的 CSS 代码。在生成缓存 CSS 时, 扩展代码会追加到默认模板的 CSS 文件 tmplate/default/common/common.css 解析成当前的模板 id 缓存样式文件。


    % h: W* k* F" y/ s( Y# A- H
    1 d" b9 t* W& {# K  a# pCSS 继承规范:
  • Discuz! X系列产品中 CSS 文件会在缓存时按照以下顺序进行合并:! L1 x0 d& F# s+ U1 F
    • template/default/*.css 文件。
    • 当前模板是非默认模板时, template/当前模板目录/extend_*.css 文件 或 template/当前模板目录/*.css。
    • 当某插件启用时, source/plugin/插件目录/template/extend_*.css 文件。
      ( a  o4 s9 X: o6 w1 |3 I
  • 因此非默认模板目录中的 CSS 属性将继承默认模板中的 CSS 属性, 插件目录中的 CSS 文件将继承前二者的 CSS 属性。
  • CSS 自身的集成顺序为:当 CSS 属性名称相同时, CSS 文件中, 写在后面的替换前面的代码。- \: ~2 k+ a9 q/ n7 N$ q
    ! G" ?; }* q. p0 F3 r! c9 U6 F

    ! X7 d+ t3 W1 ?  ?$ ]CSS书写规范:
  • 属性写在一行内, 属性之间、属性名和值之间以及属性与“{}”之间须有空格, 例如:.class { width: 400px; height: 300px; } 。
  • 属性的书写顺序:9 n) R% c" j0 n1 X( _
    • 针对特殊浏览器的属性, 应写在标准属性之前, 例如:-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;
    • 按照元素模型由外及内, 由整体到细节书写, 大致分为五组:/ f- \! R% G) @/ m/ f
      • 位置:position, left, right, float
      • 盒模型属性:display, margin, padding, width, height
      • 边框与背景:border, background
      • 段落与文本:line-height, text-indent, font,color, text-decoration,...
      • 其他属性:overflow, cursor, visibility,...
        % \* P1 t9 Y. J0 _1 W. U

      . U  {; U3 o7 f; k
  • 谨慎添加新的选择符规则, 尤其不可滥用 id, 尽可能继承和复用已有样式
  • 选择符、属性、值均用小写(格式的颜色值除外), 缩写的选择符名称须说明缩写前的全称, 例如 .cl -> Clearfix
  • 勿使用冗余低效的 CSS 写法, 例如:ul li a span { ... }
  • 慎用 !important
  • 建议使用在 class/id 名称中的词语
    & z  B' S- G3 g1 \
    • 表示状态:a->active
    • 表示结构:h->header,c->content,f->footer
    • 表示区域:mn->main,sd->side,nv-navigation,mu->menu
    • 表示样式:l-list,tab,p_pop
      : l" o$ [( i! `( I6 E7 t

    . i2 P% c& y) I, z& g
    # }1 ]; h7 {8 s6 T  J  l& ?
    ! Y/ ]! V4 T% x7 L4 S& i
    常用css实例:
  • 兼容IE浏览器 css hack8 W) F5 ?+ b& c/ }- O" P( s
    所有 IE浏览器适用:.ie_all .foo { ... }
    IE6 专用:.ie6 .foo { ... }
    IE7 专用:.ie7 .foo { ... }
    IE8 专用:.ie8 .foo { ... }
  • 浮动样式及浮动元素父元素高度自适应样式代码:
    1. .z/.y 浮动 left/right        .z { float: left; } .y { float: right; }: Z4 _6 f, x$ i
    2. .cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; }
    复制代码
  • 大标题字体:
    1. .wx, .ph { font-family: "Microsoft YaHei", "Hiragino Sans GB", STHeiti, Tahoma, SimHei, sans-serif; font-weight: 100; }
    复制代码
  • 外边距样式:
    1. .mtn { margin-top: 5px !important; }
      ( s8 f/ X& Q) U) R; T
    2. .mbn { margin-bottom: 5px !important; }
      1 g( K; @/ D* E) g0 }, x
    3. .mtm { margin-top: 10px !important; }0 H- z- {# h3 j
    4. .mbm { margin-bottom: 10px !important; }, \' I" F+ K# r# V7 f- r) ?5 K9 y
    5. .mtw { margin-top: 20px !important; }
      ' A8 `0 n$ l! b" k2 E3 {- Y
    6. .mbw { margin-bottom: 20px !important; }
    复制代码
  • 文字字体大小:
    1. .xs0 { font-family: {SMFONT}; font-size: {SMFONTSIZE}; -webkit-text-size-adjust: none; }2 Y* a. x4 c) ^- }
    2. .xs1 { font-size: 12px !important; }' t+ `3 W, L) |
    3. .xs2 { font-size: 14px !important; }! E: s6 k5 P, m6 y2 l
    4. .xs3 { font-size: 16px !important; }
    复制代码
  • 内边距样式:
    1. .ptn { padding-top: 5px !important; }
      3 t9 _6 X5 H1 @2 I
    2. .pbn { padding-bottom: 5px !important; }
      - v  X, A5 o. J* [& {: h  [) G
    3. .ptm { padding-top: 10px !important; }2 w2 K* J9 U4 `* w  F
    4. .pbm { padding-bottom: 10px !important; }
      " @1 @/ i- z. t. I
    5. .ptw { padding-top: 20px !important; }: D' A6 K' }* |
    6. .pbw { padding-bottom: 20px !important; }
    复制代码
  • module.css 文件架构解析(此文件必须按照格式编写)
    1. /** group::index **/2 {  }- k. x" K
    2.     /* 群组 index 模块使用的CSS */
      4 t8 K4 ^# n5 N4 }, J" Y" p
    3. /** end **/' X' H+ c' U4 b9 L8 I; y; R
    4. ! Q/ {$ Y% G% q% Y/ @7 C
    5. /** group::index,forum::index **/
      ) a) {) _: G* N7 n4 L6 s
    6.     /* 群组 index 和 论坛 index 模块使用的CSS */
      + I/ V/ U7 |. x6 z# r
    7. /** end **/7 s, A; U6 F7 s1 X9 X
    8. $ L, E% Y- J$ [& ?6 P
    9. /** forum **/
      * ?7 U5 O7 l2 Z3 r+ J! x8 a" ~
    10.     /* 论坛 所有模块使用的CSS */- q7 C2 {2 ?' O
    11. /** end **/
      ! E4 o; V% s! ]: }: }0 s7 p
    12. 1 c. \) [: o" {8 O9 Q* d
    13. 实现模块化css分部加载!格式固定多个模块用”, “隔开例如:% N, @* O8 A$ ^0 h( Y/ \( k4 j+ _
    14. /** misc::invite,group,forum::viewthread,portal::view,home::space **/
    复制代码
    这个文件的分部加载是对应程序地址例如:forum.php?mod=forumdisplay, 应当按照 CURSCRIPT:mod 格式写即:forum::forumdisplay。; k6 E  g/ Z2 g9 G# M

. S( \# k: |  l/ p

/ r. n8 u" d, p9 A9 z* F& d+ U+ M  V7 |  T) X

版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

广告

兔源码网 ( 赣ICP备17001544号 公网安备36112102000036号 )

兔源码 QQ交流群:493651246  GMT+8, 2019-6-19 12:48
←站长统计工具 查看密码:tuyuanma

兔源码DZ模板下载 站长邮箱:tuyuanma@qq.com 站长QQ:3197813386 网站地图

© 2001-2013 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

     
快速回复 返回顶部 返回列表