Register  |  Login

DNN默认核心CSS继承关系解析

Posted in [DNN皮肤设计], [解析DNN代码] By Baldwin
在DNN里,因为存在皮肤主题及插件模块的概念,故而衍生出一系列的产物,比如Tab Skin(页面皮肤), Container Skin(容器皮肤), Module Template(模块模版)等等,而这一切都是DNN布局显示所需要的. 那DNN是如何处理这些文件所包含的样式, 正如你所想, DNN是通过继承的关系来创建这些样式的关系的. 现在不妨我们查看一下任何一个DNN页面(或者你本机或者我们的网站)的源代码(在浏览器查看页面源代码), 你会发现类似如下的样式顺序:
<link id="_Portals__default_" rel="stylesheet" type="text/css" 
      href="/Portals/_default/default.css" />
<link id="_Portals__default_Skins_DNN_Minimal_" rel="stylesheet" type="text/css" 
      href="/Portals/_default/Skins/DNN-Minimal/skin.css" />
<link id="_Portals_0_Containers_DNN_10_0_" rel="stylesheet" type="text/css" 
      href="/Portals/0/Containers/DNN.10.0/container.css" />
<link id="_Portals_0_" rel="stylesheet" type="text/css" href="/Portals/0/portal.css" />
这就是DNN所谓的"样式继承关系", 当DNN动态加载页面时, 其核心机制就会根据顺序把这些样式表添加进来, 正如你所知道的,当一个页面同时包含不同的样式表文件, 如果你在前一个样式定义的Class与后边样式表文件定义出现重复, 那最后定义的class会覆盖之前的定义(或部分覆盖或全部覆盖). 在此举一个例子:
在"/Portals/_default/default.css" 和 "/Portals/0/Skins/xxYourSkin/skin.css" 文件里分别定义同样名字的样式class("Head"):
/* from '/Portals/_default/default.css' */
.Head
{
    font-family:Tahoma, Arial, Helvetica;
    font-size:20px;
    font-weight:normal;
    color:#333;
}

/* from '/Portals/0/Skins/xxYourSkin/skin.css' */
.Head
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
}
我想你也应该猜得到, 前一个样式会被直接覆盖, 除了color属性会保留应用到页面. 最终凡是被赋予class为Head的页面元素都会应用skin.css的定义.
接下来我们来看看DNN具体是如何加载这些样式表文件的以及我们可以如何利用这些机制来实现自己网站的布局设计呢?
首先被DNN添加的样式表是"/Portals/_default/default.css", 你如果打开这个文件看一下,你会发现这里主要定义一些基本的,全站式的样式定义, 其主要作用就是就是保证如果接下来的其他样式都没有样式定义的话, 网站仍然能有一些基本的布局设计, 否则也许会乱七八糟.
第二个样式就是我们经常提到的皮肤样式表,可取名为skin.css 或 skinname.css, 比如("/Portals/PortalID/skins/skinname/skin.css") 或 ("/Portals/PortalID/skins/skinname/skinfilename.css").我想大家都理解skin.css的存在,那就是定义皮肤的最基本样式表.但有时我们可能所创建的皮肤,可能会包含好些skin,比如专为首页显示的xx_Home.ascx,专为管理页面的xx_admin.ascx,一般的xx_skin.ascx等等,显然这些页面可能是不同的布局设计,不同的样式定义,如果这些不同的样式都在skin.css里定义的话会导致该文件冗赘,并且不能达到不同的样式的目的(前提是你使用同样的class样式定义).故此我们可以有一种新的解决方案,简约而实用,那就是我们可以把通用的样式定义在skin.css里,而一些有区别的,定制的样式我们可以新建一个跟skin一样名字的样式表文件,比如xx_admin.ascx对应新建一个xx_admin.css.而DNN加载的顺序是skin.css->xx_admin.css,如此一来即使你不想使用通用的样式(在skin.css里),你也可以在xx_admin.css里重新定义而达到覆盖的效果.
接下来的就是容器(Container)的样式表,比如("/Portals/PortalID/containers/skinname/container.css"), 遵循同样规律,如果是同样的Class定义,其会覆盖上一层(即父样式表)的样式效果.
最后要提到的就是网站的样式表,即portal.css ("/Portals/PortalID/portal.css"),它可直接通过网站设置来编辑相关样式定义.当你打开网站设置的样式编辑,你会发现里边也包含了类似default.css的一些基本,全站式的Class定义,但唯一不同的是这里都默认为空,也就是没有任何样式属性的设置而只有样式Class的声明,这就给我们提供一个修改及其覆盖所有上一层的样式的解决方案.比如你可能需要解决全站式的统一的Title样式,Normal样式,就像本网站一样,因为Text/HTML和Blog模块(或其他模块)的文本显示都默认定义为class为Normal,如此一样全站就基本统一了文本的显示效果,给用户比较协调的感觉.但我发现有点问题存在,那就是所有样式表中定义的Normal都没添加行距的属性,导致行距极其拥挤,浏览起来很别扭,之后我就直接在Portal.css里边(即在网站设置)的Normal定义里仅添加了行距属性,这就相当于保留之前所有的定义并添加行距属性, 我想这就是我想要的的效果.
/* from '/Portals/PortalID/portal.css */
.Normal{line-height:200%;}
当然, 我们可能还会有其他的样式文件, 而上述提到只是DNN基本的样式定义. 说到这, 大家可能都会想到应该还有一个很重要的样式文件, 那就是模块样式表,即module.css, 其定义于所属的模块文件夹里, 比如"/DesktopModules/xx_Module/module.css", 该文件不是开发模块所必需要的, 所以可能有些模块并没有这一样式文件, 因为我们在模块开发定义样式时会直接使用DNN默认的样式定义(比如Normal,NormalRed,Head,Head). 但目前开发模块, 如果需要在模块级别来设计布局及其样式效果显示, 比较理想的方案应该是模版级别控制(Template or Token), 比如forum模块.
Popular tags: CSS, Skinning Design, Web Design, XHTML
Previous Entry: 一些关于DNN的FAQs(适合New DNNer)
Next Entry: DNN性能优化建议

Comments

Was it good for you, too? Join the discussion »

leave a reply

About the author
Baldwin's Status
 Contact Me
Baldwin Sun
Senior Developer for dnn solution & founder of SunBlog module...
网站主页
dnnsun
最新评论
  1. Re: "暴力"解决DNN无法登陆的问题

    你好 有个问题 我改了登录界面后能登录 但是一点注册 就跳到了HOME页 这个怎么解决

    --zl24622

  2. Re: 你的dnn站点慢了么?

    需要你把旁边的checkbox勾选上再执行 :)

    --Baldwin

  3. Re: 你的dnn站点慢了么?

    为什么,我将你的代码copy到host>sql中去执行之后,报错呢,语句是不是有问题哦?

    --claire

  4. Re: 剖析DNN架构-开篇之作

    很好

    --vling83

  5. Re: SunBlog更新:增加3D Tag Clouds插件

    在以上评论已说明, SunBlog已经是一个成熟的商业模块,如果需要授权或下载请邮件联系我们, 感谢你的关注, 我们即将推出一个demo的站点(这周之内).

    --Baldwin

  6. Re: SunBlog更新:增加3D Tag Clouds插件

    这个没地方下载的吗,要怎么才能下载到,谢谢

    --Sun key

  7. Re: SunBlog更新:增加3D Tag Clouds插件

    已经电邮您了,请注意查收

    --sunny0315

  8. Re: 如何添加DNN模块的自定义权限

    你只要设置好该节点即可, 比如:DnnSun.SunBlogNuke.Business.InterfaceController, DnnSun.Modules.SunBlogNuke 其他的请再详细看看本文,我觉得说得蛮清楚的 :)

    --Baldwin

Blog搜索
Rss Feed
feedsky
抓虾
pageflakes
newsgator
哪吒
相册库
更多照片请查看相册库
我们的服务
  • DotNetNuke 咨询
  • Web设计及其模块开发
  • 免费建站
  • 电子商务
  • 开拓市场
我们致力于开发定制的web 2.0 ,所服务的客户主要包括小中型企业,社区俱乐部及其非盈利机构组织。我们将利用开源的DNN作为我们核心的系统机制,更多相关信息...
版权声明
本站任何言论仅代表个人观点,与作者所在的公司没有任何关系,所有贴子皆以“现状”提供且没有任何担保,同时也没有授予任何权利。