在DNN里,因为存在皮肤主题及插件模块的概念,故而衍生出一系列的产物,比如Tab Skin(页面皮肤), Container Skin(容器皮肤), Module Template(模块模版)等等,而这一切都是DNN布局显示所需要的.那DNN是如何处理这些文件所包含的样式,正如你所想,DNN是通过继承的关系来创建这些样式的关系的.现在不妨我们查看一下任何一个DNN页面(或者你本机或者我们的网站)的源代码(在浏览器查看页面源代码),你会发现类似如下的样式顺序:
到此你应该,这就是DNN所谓的样式继承关系,当DNN动态加载页面时,其核心机制就会根据顺序把这些样式表添加进来,正如你所知道的,当一个页面同时包含不同的样式表文件,如果你在前一个样式定义的Class与后边样式表文件定义出现重复,那最后定义的Class会覆盖之前的定义(或部分覆盖或全部覆盖).在此举一个例子:
在"/Portals/_default/default.css" 文件里:
在"/Portals/0/Skins/xxYourSkin/skin.css"文件里:
我想你也应该猜得到,前一个样式会被直接覆盖,除了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定义里仅添加了行距属性,这就相当于保留之前所有的定义并添加行距属性,我想这就是我想要的的效果.
当然,我们可能还会有其他的样式文件,而上述提到只是DNN基本的样式定义.说到这,大家可能都会想到应该还有一个很重要的样式文件,那就是模块样式表,即module.css,其定义于所属的模块文件夹里,比如"/DesktopModules/xx_Module/module.css",该文件不是开发模块所必需要的,所以可能有些模块并没有这一样式文件,因为我们在模块开发定义样式时会直接使用DNN默认的样式定义(比如Normal,NormalRed,Head,Head).但目前开发模块,如果需要在模块级别来设计布局及其样式效果显示,比较理想的方案应该是模版级别控制(Template or Token),比如forum模块.