变脸：用CSS JS打造的网页皮肤
每个人都有不同程度的审美疲劳，说俗一点就是喜新厌旧，对于网页，如何把浏览者的审美疲劳拒之门外，使之对网页保持某种意义上的新鲜感，这是一个值得研究的问题。其实，很多大型网站或者个人网站都会不定期地对网页进行改版，这些都可以归纳为一个字，那就是“变”，不停地变换网页的布局与样式，就是为了迎合人们不断变化的口味。
CSS核心：属性重定义
先来看几个小技巧：
1、给链接加上修饰
我们通常会用样式表以外的元素对链接进行修饰，比如使用图片、使用表格、使用其他标签，其实我们可以对<a>标签用样式表来定义，为了过程简单，我们直接在<a>中使用style来定义。
A：给链接加上边框
为什么要给链接加边框呢，通常情况下我们在导航部分会给链接作些边框修饰，如果用样式表来定义，我们可以这样写：
| <a style="border:1px solid #ccc;" href="http://www.webjx.com/" >带边框的链接</a> |
这是效果:带边框的链接
当然，这样的边框并不好看，我们还需要对其设置一下内边距。如下代码：
| <a style="border:1px solid #ccc;padding:5px;" href="http://www.webjx.com/">带边框的链接</a> |
这里是效果：带边框的链接
B：给链接加上背景颜色
其实这个效果也并没有达到美观的效果，我们可以为其添加背景颜色，代码如下：
| <a style="border:1px solid #ccc;padding:5px;background-color:#efefef;" href="http://www.webjx.com/">带边框的链接</a> |
这里是效果：带边框的链接
这样的边框和背景色也许不是您想要的，您可以自己修改颜色参数。
C：给链接加上文字修饰
通常情况下我们可以在<a>标签中使用<b>标签或<strong>标签来加粗文字链接，实际上这都是多余的，我们只要在<a>标签中这样定义：
| <a style="border:1px solid #ccc;padding:5px;background-color:#efefef;font-weight:bold;" href="http://www.webjx.com/">带边框的链接</a> |
这里是效果：带边框的链接
2、重定义原始标签的属性
什么叫重定义原始标签的属性？举个简单的例子：<b>标签的作用在于把文字显示为粗体，这是浏览器对<b>标签的默认属性的解释。但我们可以通过样式表对其进行改写，如下代码：
| <b style="font-weight:100;">被重定义属性的<b>标签</b> |
这里是效果：被重定义属性的<b>标签
大家会看到上面的这几个字“被重定义属性的<b>标签”显示为正常文字，而非粗体，这是因为<b>的font-weight属性被重新定义了，所以在显示的时候会优先解析CSS对其的定义。
当然，我们同样可以对<b>标签加诸如边框、背景色、上划线下划线之类的修饰，见以下代码：
| <b style="border:1px solid #FF6600;background-color:#FFEFE8; padding:5px; text-decoration:underline;">被修饰的<b>标签</b> |
这里是效果：被修饰的<b>标签
综上所述，html中几乎所有尖角符号内的标签都可以用来样式重新定义，进而改变这些标签的默认属性。
文章整理：西部数码--专业提供域名注册、虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!
