text-decoration 属性,这是一个很有意思的属性,它提供了很多非常有趣的行为。
text-decoration 有 5 个值:
- none
- underline
- overline
- line-through
- blink
不出所料,underline 会对元素加下划线,就像 HTML 中的 U 元素一样。overline 的作用恰好相反,会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线,等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁,类似于 Netscape 支持的颇招非议的 blink 标记。
none 值会关闭原本应用到一个元素上的所有装饰。通常,无装饰的文本是默认外观,但也不总是这样。例如,链接默认地会有下划线。如果您希望去掉超链接的下划线,可以使用以下 CSS 来做到这一点:
a {text-decoration: none;}
注意:如果显式地用这样一个规则去掉链接的下划线,那么锚与正常文本之间在视觉上的唯一差别就是颜色(至少默认是这样的,不过也不能完全保证其颜色肯定有区别)。
还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线,又有上划线,则规则如下:
a:link a:visited {text-decoration: underline overline;}
不过要注意的是,如果两个不同的装饰都与同一元素匹配,胜出规则的值会完全取代另一个值。请考虑以下的规则:
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}
对于给定的规则,所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰,而没有下划线和上划线,因为 text-decoration 值会替换而不是累积起来。
分享到:
相关推荐
text-decoration和border-radius属性出现了两次系统无法获取命令识别执行代码而对于其他属性系统者可以继承你的新指令,前一指令不受影向
定义和用法text-decoration 属性规定添加到文本的修饰。注释:修饰的颜色由 "color" 属性设置。说明这个属性允许对文本设置某种效果,如加下划线。如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到...
为锚链接文本装饰着色插入符生成类text-decoration-color: ; . 部分来自你的顺风配置颜色——所以你可以使用decoration-gray-500或自定义颜色decoration-sop-900 。安装通过npm或纱将其拉入: npm install tailwind-...
CSS文本装饰和文本转换 再次仅使用css文件,而不使用html。 在正文中尝试了text-decoration和text-transform关键字。 这些关键字有很多功能,但是对于修饰,我选择了下划线,对于转换,我选择了小写字母。 这些...
css下划线
plugins: [ { resolve : 'gatsby-transformer-remark' , options : { plugins : [ { resolve : 'gatsby-remark-text-decoration' , options : { } } ] } }]使用下划线和标记装饰的示例影响格式例子输出颜色{c-color...
链接伪类控制超链接;什么是伪类?;伪类并不是真正意义上的类,它的名称是由系统定义的,通常由标签名、类名或id名加“:”构成。;;<style type="text/css"> a:link,a:visited{ color:#FC0; text-decoration:none; /*...
color direction line-height letter-spacing text-align text-decoration text-indent text-transform word-spacing 背景属性 background background-color background-image backeground-position background-...
3.text-decoration 装饰文本 一般用来取消下划线 上划线 删除线 none/underline下划线/overline上划线/line-through删除线 4.text-indent 文本首行缩进 通常以em为单位设置 无需关注字体大小 em相对单位 1em表示一...
新增了text-decoration-line、text-decoration-color、text-decoration-style参考; 新增了ime-mode参考; 新增了CSS3速查表参考; 新开了Only Firefox节点; 补充修订了问题和经验列表; 新增了一些对本手册指出过...
cssdemo.css样式表文件...text-decoration:none; } a:visited { text-decoration: none; } a:hover { font-size: 18px; color: #FF0000; text-decoration: none; } a:active { text-decoration: none; } 包含CSS样式
TEXT-DECORATION: none } A:visited { COLOR: #000000; TEXT-DECORATION: none } A:active { COLOR: #000000; TEXT-DECORATION: none } A:hover { COLOR: #0033CC; TEXT-DECORATION: underline } .menu { ...
文本缩进 text-indent 值:长度值(正、负均可)示例:p {...}文本装饰 text-decoration 值:underline、overline、line-through、blink、none。示例:.retailprice {text-decoration:line-through;}文本对齐 text-al
新增了text-decoration-line、text-decoration-color、text-decoration-style参考;新增了 ime-mode参考;新增了CSS3速查表参考;新开了Only Firefox节点;补充修订了问题和经验列表;新增了一些对本手册指出过Bug...
TEXT-DECORATION: underline;font-weight:bold;line-height:150%;} .content A:visited {COLOR: #669933; TEXT-DECORATION: underline;font-weight:bold;line-height:150%;} .content A:hover {COLOR: #669933; ...
设 置 文 本 样 式 字体属性 ...text-decoration(none/underline/overline) text-indent (2em) 文本属性 颜色与背景属性 color background-color background-image(url(URL)) background-attachment(sc
CSS 语法 说明 关键字 font-family:字型一,字型二,…… 设置文本字型...text-decoration:关键字设置文本修饰 underline:下划线 overline:上划线 line-through:删除线 blink:闪烁 none:无,默认值 text-transform
a:link { text-decoration: none } a:visited { text-decoration: none } a:hover { text-decoration: underline } a:active { text-decoration: underline } FORM { padding:0px margin:0px } .CONTENT { ...
a:link { text-decoration: none } a:acitve { text-decoration: none } a:visited { text-decoration: none } body { background-color:white;font-size: 16pt } p { font-size: 16pt } h1, h2, h3, h4 { color: ...