一、在CSS1中,text-decoration有六个值:

text-decoration:none  //默认,定义标准的文本,没有任何样式,正常显示

text-decoration:underline  //定义文本下的一条线

text-decoration:overline  //定义文本上的一条线

text-decoration:line-through  //定义文本中间的一条线

text-decoration:blink  //定义闪烁的文本, IE、Chrome 或 Safari 不支持 "blink" 属性值。

text-deration:inherit  //从父元素继承text-decoration的值,任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

展示形式如下:

text-decoration还支持多值属性,如text-decoration:underline overline;经个人测试此多值属性可兼容至IE8,IE7不兼容(有的同学测试IE7兼容,此情况需自测)

二、CSS3中新增了一些属性:

text-decoration:[text-decoration-line] [text-decoration-style] [text-decoration-color]

text-decoration-line就相当于css1中所讲的那几个属性

text-decoration-style:solid(实线,默认) | double(双线) | dotted(点状线) | dashed(虚线) | wavy(波浪线) 浏览器支持性不好

text-decoration-color:默认为文本的颜色,可自设装饰颜色  浏览器支持性不好

三、text-decoration-skip:none | [ objects || spaces || ink || edges || box-decoration ]  目前还没有什么浏览器支持这个属性

当字符和装饰线发生重叠关系的时候,例如,删除线,或者一些英文字符(g, q)和下划线,我们的装饰线是跳过文字字符,还是直接连在一起穿过去。举个例子吧,如下CSS:

a { text-decoration-skip: ink; }

可能最后的表现会是这样:

text-decoration-skip支持的一些值以及含义如下:

  • objects: 默认值。 装饰线跳过内联对象,比方说图片啊或者inline-block元素。
  • none: 装饰线穿过一切,包括本应跳过的内联对象。
  • spaces: 装饰线跳过空格或字符间分隔,以及letter-spacingword-spacing形成的间距。
  • ink: 装饰线跳过符号或下沉字母。
  • edges: 装饰性起始于内容起始边缘后面,结束语内容结束边缘的前面。这个属性值的目的是为了让两个搞在一起的下划线元素看上去公用一条下划线。这对于中文字体很有用,因为会使用下划线作为标点符号。
  • box-decoration: 装饰线跳过继承的marginborder, 以及padding.
  • trailing-spaces: 装饰线跳过prewhite-space: pre-wrap里面前后空格。

效果如下图示意:

text-decoration属性的更多相关文章

  1. 关于html与css的标签及属性(text文本属性、背景background属性、表格标签table、列表、)

    text文本属性1.颜色 colorcolor:red: 2.文本缩进text-indant属性值 num+px text-indant:10px:3.文本修饰 text-decoration属性值: ...

  2. HTML+css基础 Text文本属性

    Text文本属性: 1.颜色  color color:red 2.文本缩进 text-indent 属性值 数字+px: text-indent:10px: 3.文本修饰 text-decorati ...

  3. struts2 访问国际化资源 <s:text>作为属性

    保留全局级国际化信息资源文件.并在message.properteis中增加一个带有参数的国际化信息. labela = labela in zh_CN labelb = labelb,{0} < ...

  4. text——文本属性大全

    一.文字颜色(color:red;) <style> body {color:red} h1 {color:greenyellow} p.color {color:blue} </s ...

  5. zencart批量插入TEXT文本属性attributes

    有时候上传的产品与多级分类比较多,在后台添加文本属性如Name,Number等需要顾客自定义的内容就比较费神了.现在只需将以下代码保存为insert_attributes.php,变量$options ...

  6. 通过jQuery来获取DropDownList的Text/Value属性值

    脚本代码: <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript">& ...

  7. <html:text> Id属性

    可能 会遇到这样 的问题,需要通过document.getElementById得到<html:text>标签的id, 可是据说ie设置property后id就是一样的了,不过具体没有去测 ...

  8. 您是不是奇怪为什么 <script> 标签中没有 type="text/javascript" 属性?

    在 HTML5 中该属性不是必需的.JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言!

  9. 设置TextBlock默认样式后,其他控件的Text相关属性设置失效问题

    问题: 定义了默认TextBlock样式后,再次自定义下拉框 or 其他控件 ,当内部含有TextBlock时,设置控件的字体相关样式无效,系统始终使用TextBlock设置默认样式 解决方案: 为相 ...

  10. CSS| text文本属性

    注意:一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 1)  text-indent 取值: 5px/2 ...

随机推荐

  1. matlab初学者_脚本文件调用函数文件

    问题: matlab里面有两种文件,一种是脚本文件,一种是函数文件,为了模块化程序,我们需要把专门的功能写成一个函数封装到某个函数文件里面. 那么来看如何在脚本文件里调用函数文件中的函数. 注意点: ...

  2. ecshop获取浏览器各个版本

    <?php /** * 获得浏览器名称和版本 * * @access public * @return string */ function get_user_browser() { if (e ...

  3. .net 4中的pInvokeStackImbalance MDA默认是开启的

    今天把我之前发的一个小工具FreeEverything(基于everything的一个简易磁盘清理工具)升级到了.net framework 4.5,并且去掉了对mvvmlight的依赖.结果在测试运 ...

  4. ORACLE EXP命令

    本文对Oracle数据的导入导出 imp ,exp 两个命令进行了介绍, 并对其对应的參数进行了说明,然后通过一些演示样例进行演练,加深理解.文章最后对运用这两个命令可能出现的问题(如权限不够,不同o ...

  5. 怎样让HTML5调用手机摄像头拍照——实践就是一切

    原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...

  6. 升级 node 版本

    npm install -g n n stablen v0.10.26 n 0.10.26

  7. 常用的 css 命名规则

    头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...

  8. JavaScript Math对象

    Math对象是JavaScript的一个固有对象,其作用是执行常见的算数任务.该对象的使用并不是像Date,Array对象使用 new关键字来得到对象,而是直接 Math.[{property|met ...

  9. Android Cursor类的概念和用法

    http://www.2cto.com/kf/201109/103163.html 关于 Cursor 在你理解和使用 Android Cursor 的时候你必须先知道关于 Cursor 的几件事情: ...

  10. 让ie6/7/8兼容css3的圆角阴影等特殊效果的方法 PIE1.0.0及placeholder在这些IE下生效的方法

    PIE地址:http://css3pie.com/ 使用方法1: #login,#AnnouncementBox {  border:3px solid #fff;  -webkit-border-r ...