把基本的CSS抽取出来命名为style.css。这个文件不论字体是放大还是缩小都要用。然后我们根据需要再划分3个css文件。分别定义了大,中,小字体的时候页面的元素外观。
在html的顶部引用css文件。
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="text-small.css" title="Small Text" />
<link rel="alternate stylesheet" type="text/css" href="text-medium.css" title="Medium Text" />
<link rel="alternate stylesheet" type="text/css" href="text-large.css" title="Large Text" />
细心的你会看到上面的rel属性有不同。
对了,这就是关键!
html认为只有rel="stylesheet"的css文件才会被最终调用。我们只需要编写一个js脚本来修改各个css的rel属性就可以实现更换不同的css了。
在HTML内容区的最上面增加
<script type="text/javascript" src="dngz_switcher.js"></script>
点击这里下载dngz_switcher.js
dngz_switcher.js会在html页面中增加更换字体大小的链接按钮。
在新窗口中查看效果页
顺着这个思路,你可以制作更换皮肤,更换布局等以及更多的很棒的效果!