text-decoration属性

一、在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里面前后空格。

效果如下图示意:

时间: 2024-07-31 06:43:36

text-decoration属性的相关文章

精心点缀的文字:CSS Text Decoration

大家很熟悉的 CSS2 用法 text-decoration ,到了 CSS3 就拥有很多新的特性.本文将介绍 Level 4 中最新添加的特性. CSS Text Decoration 文字修饰线:text-decoration-line text-decoration-line也就是 CSS3 之前的 text-decoration,属性有如下的属性值: 属性值 效果 none 无效果 underline 下划线 overline 上划线 line-through 删除线 blink 文字闪

zencart批量插入TEXT文本属性attributes

有时候上传的产品与多级分类比较多,在后台添加文本属性如Name,Number等需要顾客自定义的内容就比较费神了.现在只需将以下代码保存为insert_attributes.php,变量$options_id_array,$current_category_id修改为实际的值,上传到网站根目录运行即可一步到位. <?php //header("content-Type: text/html; charset=utf-8"); @set_time_limit(1800); @ini_

struts2 访问国际化资源 &lt;s:text&gt;作为属性

保留全局级国际化信息资源文件.并在message.properteis中增加一个带有参数的国际化信息. Java代码   labela = labela in zh_CN labelb = labelb,{0} <s:text>访问国际化信息 用<s:text>标签来访问国际化信息,只需要在它的name属性上填入需要的key即可.下面,来看看它的其它的属性. 1:使用带参数的国际化信息        可以用参数把一些可变值传给国际化信息,在<s:text>标签访问国际化

CSS text系列属性

text-shadow 语法规则: h-shadow(必需,水平阴影的位置,可负): v-shadow(必需,垂直阴影的位置,可负): blur(可选,模糊距离): color(可选,阴影的颜色). 注意:可以指定多个阴影,用逗号隔开. text-shadow各种特效 text-align left,左对齐: center居中对齐: right,右对齐: justify两端对齐. text-decoration none,默认值. underline,下划线: linethrough,中划线:

【AmazeUI】框架之text大小属性

提供如下,方便大家记忆 .am-text-xs - 12px .am-text-sm - 14px .am-text-default - 16px .am-text-lg - 18px .am-text-xl - 24px .am-text-xxl - 32px .am-text-xxxl - 42px

前端学习 -- Css -- 属性选择器

属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]:选取属性值以指定内容开头的元素 [属性名$="属性值"]:选取属性值以指定内容结尾的元素 [属性名*="属性值"]:选取属性值中包含指定内容的元素 demo:(注:这么尴尬的诗句肯定不是我写的) <!DOCTYPE html> <html> &l

C#.NET中的字段与属性_1

一个类中需要有描述这个类信息的数据,而存储这些数据的变量就成为字段. 字段默认的访问级别为private(只有本类可以直接访问),我们将其访问级别改为public,在其他类中就可以访问了. 字段和属性表示对象包含的信息,字段类似于变量,因为可以直接读取或设置他们. 属性是对字段的封装.属性可以对字段的访问进行控制,可以进行非法设置值的判断.属性并不存储数据,字段存储数据. 封装后,有一些字段我只能赋值,不能读取,有些只能读取,不能赋值,而且可以对传过来的值进行选择. 建议所有的字段不要写成pub

css3——属性选择器

lE[attr]只使用属性名,但没有确定任何属性值 lE[type="text"]指定属性名,并指定了该属性的属性值 lE[attr~="value"]指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“?”不能不写 lE[attr^="value"]指定了属性名,并且有属性值,属性值是以value开头的 lE[attr$="value"]指定了属性名,并且有属

CSS3 属性组参考资料

CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打印 Ruby 语音 表格 文本 2D/3D 转换 过渡 用户界面 "CSS" 列指示该属性是在哪个 CSS 版本(CSS1.CSS2 或 CSS3)中定义的. CSS3 动画属性(Animation) 属性 描述 CSS @keyframes 规定动画. 3 animation 所有动画属性的简写属性,

linux中改变文件权限和属性

Linux中,默认显示所有用户名的文件在/etc/passwd,用户组的信息在/etc/group 密码/etc/shadow chgrp改变文件所属用户组 chgrp [-R] 用户组名 文件或目录 chown改变文件所有者 chown [-R] 账号名称或账号名称:组名 文件或目录 chmod改变文件权限 chmod [-R] xyz 文件或目录 都有一个-R参数,表示进行递归的持续更改,也即连同子目录下所有的文件.目录都变更相应的权限 xyz表示数字类型的权限属性,为rwx的属性相加 r: