DotNetNuke使用了好几个CSS文件,在什么时候,如何针对不同的需求修改CSS文件让人觉得很难把握,其实只要搞明白了DNN加载各个CSS文件的顺序,再遵循CSS文件生效的优先级就能准确的把握什么时候要修改哪个CSS文件。
首先我们来看看DNN加载CSS文件的顺序:在任何一个页面中查看HMTL源文件,在<head>部份可以看到这样的代码。很明显:首先是default.css,然后是skin.css,然后是portal.css(这里没有讨论Container的CSS,原理是一样的)
之后,我们对照一下这几个CSS在DNN目录中的位置(绿色块表示目录),这样一来我们就能明白这几个CSS是怎么工作的。
对于任何一个页面,DNN首先加载对全局起作用的“default.css”,之后,根据你选择的皮肤,加载皮肤所带的"skin.css",最后,根据你打开的“站点”加载“站点”目录下的"portal.css"。后一个CSS中的定义都会覆盖前一个CSS中的定义。
其实每一个皮肤的ascx文件还可以附加一个同名的CSS文件,如果DNN检查到有这样的文件,也会加载。因为我用dnn-blue皮肤做的示范,所以没有这一个CSS。大家可以找个其它皮肤试试,看看DNN把这个CSS文件放在第几位加载。^_^
首先我们来看看DNN加载CSS文件的顺序:在任何一个页面中查看HMTL源文件,在<head>部份可以看到这样的代码。很明显:首先是default.css,然后是skin.css,然后是portal.css(这里没有讨论Container的CSS,原理是一样的)
<
style
id
="StylePlaceholder"
></
style
>
< link id ="_Portals__default_" rel ="stylesheet" type ="text/css" href ="/Portals/_default/default.css" />
< link id ="_Portals__default__skins_dnn_blue_" rel ="stylesheet" type ="text/css" href ="/Portals/_default//skins/dnn-blue/skin.css" />
< link id ="_Portals__default_Containers_Puresino_" rel ="stylesheet" type ="text/css" href ="/Portals/_default/Containers/Puresino/container.css" />
< link id ="_Portals__default_Containers_Puresino_Plain_css" rel ="stylesheet" type ="text/css" href ="/Portals/_default/Containers/Puresino/Plain.css" />
< link id ="_Portals_0_" rel ="stylesheet" type ="text/css" href ="/Portals/0/portal.css" />
< link id ="_Portals__default_" rel ="stylesheet" type ="text/css" href ="/Portals/_default/default.css" />
< link id ="_Portals__default__skins_dnn_blue_" rel ="stylesheet" type ="text/css" href ="/Portals/_default//skins/dnn-blue/skin.css" />
< link id ="_Portals__default_Containers_Puresino_" rel ="stylesheet" type ="text/css" href ="/Portals/_default/Containers/Puresino/container.css" />
< link id ="_Portals__default_Containers_Puresino_Plain_css" rel ="stylesheet" type ="text/css" href ="/Portals/_default/Containers/Puresino/Plain.css" />
< link id ="_Portals_0_" rel ="stylesheet" type ="text/css" href ="/Portals/0/portal.css" />
之后,我们对照一下这几个CSS在DNN目录中的位置(绿色块表示目录),这样一来我们就能明白这几个CSS是怎么工作的。
对于任何一个页面,DNN首先加载对全局起作用的“default.css”,之后,根据你选择的皮肤,加载皮肤所带的"skin.css",最后,根据你打开的“站点”加载“站点”目录下的"portal.css"。后一个CSS中的定义都会覆盖前一个CSS中的定义。
其实每一个皮肤的ascx文件还可以附加一个同名的CSS文件,如果DNN检查到有这样的文件,也会加载。因为我用dnn-blue皮肤做的示范,所以没有这一个CSS。大家可以找个其它皮肤试试,看看DNN把这个CSS文件放在第几位加载。^_^