css text-decoration属性详解

文本修饰属性text-decoration是一个很简单而具有很大吸引力的属性。这里介绍的是关于它的最基础的知识：也许我们很难看到有更多复杂的应用，使用这个属性最大的困难在于decoration这个单词的拼写,看起来它是一个六级词汇，人们经常查询下划线英文怎么拼写。但是不得不承认，现在很流行通过text-decoration : none 来去掉超级链接的下划线。这是一个经常用到的css属性。文章于2008年11月01日 发布在http://www.12px.net

语法：
text-decoration : none || underline || blink || overline || line-through
取值：
none :　 默认值。无装饰
blink :　 闪烁 【这个属性是NS独有的，就在编辑整理这篇文章的时候，2008年1月1日，Netscape正式的停止了新版本的开发和技术支持.】
underline :　 下划线
line-through :　 贯穿线
overline :　 上划线

说明：
检索或设置对象中的文本的装饰。
有 href 特性的 a ，以及 u ， ins 对象默认值为 underline 。
对象 strike ， s ， del ，默认值是 line-through 。
假如 none 值在属性声明的最后，所有的先前的其他取值都会被清除。例如，声明 text-decoration: underline overline blink none 等于声明 text-decoration: none 。
假如对象没有文本(如 img 元素)或者是空元素(如：<EM></EM>)， 此属性不会发生作用。
假如你设置 body 对象的此属性值为 none ， a 对象将依然保持其原有的下划线样式。除非你针对 a 对象声明此属性值。

此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 textDecoration 。
示例：
div { text-decoration : underline; }
div { text-decoration : underline overline; } 

Object.style.textDecoration=none|underline|overline|line-through|blink

可能的值

ValueDescription
none Defines a normal text
underline Defines a line under the text
overline Defines a line over the text
line-through Defines a line through the text
blink Defines a blinking text (does not work in IE and Opera)

 

当显式的使用去掉超级链接的下划线时，我们应该保证通过其它方式，例如背景或者鲜明的颜色来提示访问者。

Text-decoration支持组合值，当然这些值之间不能互相矛盾。

例如:a.12px{text-decoration:underline overline}

但是如果有两个规则作用于同一个元素，这些值不会组合，只有胜出的规则会有效。例如

h1.12px{text-decoration:line-through }

h1{text-decoration:underline overline}

如果应用在<h1 class="12px">www.12px.net</h1>这样一个元素中，只有红色的样式会起作用。

需要注意的是，当元素具有text-decoration属性时，它的子元素会应用这个规则。例如

p{text-decoration:underline;color:red}

b{text-decoration:none;color:green}

<p>12px.net,十二像素网站的地址是<b>www.12px.net</b></p> 这里会得到什么结果呢？？？自己试试看吧。

 

 

text-decoration也就是修饰的颜色是决定于元素的color颜色值，如何实现超级链接的下划线和元素颜色不同呢？

第一个简单的办法当然是border-bottom了，但是这个办法看起来很笨重。其它的办法可以参考上面的那个例子。

 

 

最后来一段新闻:

在花了许多年考虑到底该怎么做之后，AOL正式宣布终止Netscape浏览器开发。四年半前AOL拆开了开发团队，试图创造Mozilla基金会的同时不影响原有浏览器的企图却注定要失败，AOL曾两次尝试重新改造Netscape，但除了见证了Firefox浏览器的腾飞，它并没有获得成功。他们创造出了一个怪物如 Netscape 8，同时使用了Mozilla和IE的渲染引擎，而在几个月前他们刚刚发布了Netscape 9，设法赶上流行的社交网络风潮。Netscape浏览器的技术支持将到2008年2月1日终止，之后AOL不会再发布安全补丁。为了怀旧，他们建议用户使用Firefox，安装Netscape主题。

相关文章