最快捷的是直接在header.php页头或footer.php页脚引入,如果是指正对指定版块的可以搜索一下Discuz!2.5的目录模块或模板文件目录,查看对应的版块文件:
若样式比较少,也可以直接添加要对应的模块css文件中:
footer.php页脚
header.php页头
/source/archiver/forum
discuz.php论坛首页
forumdisplay.php论坛列表页
viewthread.php帖子内容页
/source/class核心类库
/source/class/adv程序广告功能库
adv_article.php门户文章页
adv_articlelist.php门户文章列表页
adv_blog.php空间日志
adv_cornerbanner.php全局 右下角广告
adv_couplebanner.php全局 对联广告
adv_custom.php自定义广告
adv_feed.php空间 动态广告
adv_float.php全局 漂浮广告
adv_footerbanner.php全局 页尾通栏广告
adv_headerbanner.php全局 页头通栏广告
adv_intercat.php论坛 分类间广告
adv_interthread.php论坛/群组 帖间通栏广告
adv_search.php搜索 右侧广告
adv_subnavbanner.php全局 页头二级导航栏广告
adv_text.php门户/论坛/群组/空间 格子广告
adv_thread.php论坛/群组 帖内广告
adv_threadlist.php论坛/群组 帖子列表帖位广告
/source/class/block/forumDIY模块-论坛功能库
blockclass.phpDIY模块语言包加载
block_activity.php活动模块
block_activitycity.php同城活动
block_activitynew.php最新活动
block_forum.php版块调用
block_thread.php主题调用
block_threaddigest.php精华主题
block_threadhot.php热门主题
block_threadnew.php最新主题
block_threadspecial.php特殊主题
block_threadspecified.php指定帖子
block_threadstick.php置顶帖
block_trade.php商品模块
block_tradehot.php热门商品
block_tradenew.php新商品
block_tradespecified.php指定商品
/source/class/block/groupDIY模块-群组功能库
blockclass.phpDIY模块语言包加载
block_group.php群组模块
block_groupactivity.php群组活动
block_groupactivitycity.php同城活动
block_groupactivitynew.php最新活动
block_grouphot.php热门群组
block_groupnew.php最新群组
block_groupspecified.php指定群组
block_groupthread.php群组帖子
block_groupthreadhot.php群组热门贴
block_groupthreadnew.php群组最新贴
block_groupthreadspecial.php群组特殊主题
block_groupthreadspecified.php群组指定贴
block_grouptrade.php群组商品
block_grouptradehot.php群组热门商品
block_grouptradenew.php群组最新是行频
block_grouptradespecified.php群组指定商品
/source/class/block/htmlDIY模块-静态模块功能库
blockclass.phpDIY模块语言包加载
block_adv.php站点广告
block_announcement.php站点公告模块
block_banner.php图片横幅
block_blank.php自定义HTML
block_forumtree.php版块列表
block_friendlink.php友情链接
block_google.phpGOOGLE
block_line.php分割线
block_myapp.php漫游模块
block_search.php搜索条
block_sort.php分类信息
block_stat.php数据统计
block_vedio.php网络视频
commonblock_html.php
/source/class/block/memberDIY模块-会员模块功能库
blockclass.phpDIY模块语言包加载
block_member.php会员模块
block_membercredit.php积分排行
block_membernew.php最新会员
block_memberposts.php发帖排行
block_membershow.php竞价排行
block_memberspecial.php特殊会员
block_memberspecified.php指定会员
/source/class/block/otherDIY模块-其他类模块功能库
blockclass.phpDIY模块语言包加载
block_otherfriendlink.php友情链接
block_otherstat.php统计模块
/source/class/block/portalDIY模块-门户模块功能库
blockclass.phpDIY模块语言包加载
block_article.php文章模块
block_articlehot.php热门文章
block_articlenew.php最新文章
block_articlespecified.php指定文章
block_portalcategory.php频道栏目
block_topic.php专题
block_topichot.php热门专题
block_topicnew.php最新专题
block_topicspecified.php指定专题
/source/class/block/spaceDIY模块-空间类模块功能库
blockclass.phpDIY模块语言包加载
block_album.php相册模块
block_albumnew.php最新相册
block_albumspecified.php指定相册
block_blog.php日志模块
block_bloghot.php热门日志
block_blognew.php最新日志
block_blogspecified.php指定日志
block_doing.php记录模块
block_doinghot.php热门记录
block_doingnew.php最新记录
block_pic.php图片模块
block_pichot.php热门图片
block_picnew.php最新图片
等等......
默认default模板都会有module.css 、common.css 2个全局样式表,如果是使用discuz默认default模板,并且只是想修改默认模板中的一些css,那么直接加载其扩展CSS文件中重写就行了!扩展css文件命名格式:
extend_module.css
extend_common.css
extend就是扩展标识,将上面的css扩展文件放置在common目录下即可!自行验证方法是否生效!
这里需要注意的是:
假如你是新建一个自己的模板,则该模板下必须有一份从默认模板拷贝过来的common目录,该目录下包含默认的common.css样式表,然后再加extend_common.css样式表进去进行自定义!!
如果想在默认模板上简单的修改、附加扩展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: 400pxheight: 300px} 。
属性的书写顺序:
位置:position,left,right,float
盒模型属性:display,margin,padding,width,height
边框与背景:border,background
段落与文本:line-height,text-indent,font,color,text-decoration,...
其他属性:overflow,cursor,visibility,...
针对特殊浏览器的属性,应写在标准属性之前,例如:-webkit-box-shadow:-moz-box-shadow:box-shaow:
按照元素模型由外及内,由整体到细节书写,大致分为五组:
谨慎添加新的选择符规则,尤其不可滥用 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: blockheight: 0clear: bothvisibility: hidden} .cl { zoom: 1}
大标题字体:
.wx, .ph { font-family: "Microsoft YaHei", "Hiragino Sans GB", STHeiti, Tahoma, SimHei, sans-seriffont-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。