快捷搜索:

网页风格化用CSS实现皮肤适时切换

用W3C标准建造的网站,从理论上来说可以做到完全的体现与布局相分离。打个比方,便是可以在不动骨架(布局,XHMTL)和肌肉(行径,Javascript)的条件下,彻彻底底地换一身皮(体现,CSS)。

当然,换皮之前你必要先按W3C标准建好你的网站,并且为它筹备两套体现不一样的CSS。“换皮”实质上便是“换CSS”,我们要做的,只是用某种措施让浏览器载入另一套CSS,从新衬着页面。措施有很多种,我就先容最常见的三种。

措施一:什么也不干

啊?什么也不干?嗯,这个……准确地说是:就干那么一丁点儿 (你还真以为有这么好的事儿呀……)。

假设我们有两套CSS,分手封闭在两个不合的文件中:a.css和b.css。然后在之间加入如下两行XHTML代码:

然后用你的Firefox打开这个页面,在菜单栏中选择:查看 -> 页面风格,应该可以看到如下的“风景”:

就这么简单,现在你就可以用Firefox来“换皮”了。IE?IE没这个功能……MS便是这么拽,W3C“明文保举”:要求浏览器供给给用户自己选择样式表的权力,可它就不这么干。幸运的是这件事也不是太难杂,咱就代劳一下吧。

措施二:Javascript

在措施一的根基上,可以用Javascript的DOM措施造访link工具,再将不必要的CSS设为“禁用(disabled)”,剩下的CSS就会被浏览器用来衬着页面。脚本如下,请留意此中的注释:

然后在相宜的地方调用这个函数,以本页为例,添加如下两个按钮:

应用Javascript的好处是方便、快捷、简单,毛病也是很显着的:很难做到全站的CSS切换,只能局限在当前页上。为了影象用户的选择,可行的规划便是采纳cookie。可是就算应用cookie,也必要在何时载入CSS,用户没有Javasciprt支持怎么办等问题上多做好些文章。以是不如用下面的措施――

措施三:办事器端脚本

毫无疑问,最好的CSS切换器应该应用办事器端脚本(PHP、ASP、JSP等)来开拓。这样做的好处是很显着的:直接、高效、兼容性好、可以影象用户选择、以致可以组合不合的CSS实现相称繁杂的“皮肤”切换。

我这里就用PHP为例,用其他的说话也都大年夜同小异,对一样平常的开拓职员来说不会有任何艰苦。

基础思路是这样:用户选择一种“皮肤”,把用户的选择记入cookie(记入数据库也一样,不过这样系统开销会大年夜一些),用户造访网站上的任何一个页面时,再从cookie(或数据库)中读出之前用户的选择,载入响应的CSS文件(这里照样以措施一中讲到的a.css和b.css为例)。

创建一个名为switcher.php的文件,内容如下:

这段脚本先读取query数据,然后把参数style的值记入cookie,着末返回上一页。接下来我们就可以创建两个用于切换样式的链接了,并且放在相宜的页面上,比如首页或用户治理后台(留意把此中的site.com换成你的域名):

主题A

主题B

点击随意率性一个链接,响应的就会把“a”或“b”记入cookie,然后就必要一段脚原先读取这个cookie值并且输出XHTML来引入对应的CSS:

.css" />

每一个必要切换样式的页面都要加上这段代码,以是直接把它加入网站的头文件中就行了。当然你可以根据自己的必要改动这个脚本,但万变不离其宗,总的思路应该是不变的。

您可能还会对下面的文章感兴趣: