小白教程
所有教程
关于
Search
172.70.127.162
172.70.127.162
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Pr text text decoration”的源代码
本页内容
上一节:
Pr_text_text_align
下一节:
Pr_text_text_indent
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:text-decoration}}[[Category:css reference|185]] = CSS text-decoration 属性 = 设置h1,h2,h3和h4元素文本装饰: <sample title="" desc="" lang="html" hererun="1"> h1 {text-decoration:overline} h2 {text-decoration:line-through} h3 {text-decoration:underline} </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> </body> </html> </run> == 属性定义及使用说明 == text-decoration 属性规定添加到文本的修饰,下划线、上划线、删除线等。 text-decoration 属性是以下三种属性的简写: * [[css3 pr text decoration line|text-decoration-line]] * [[css3 pr text decoration color|text-decoration-color]] * [[css3 pr text decoration style|text-decoration-style]] === 语法 === <pre>/*关键值*/ text-decoration: none; /*没有文本装饰*/ text-decoration: underline red; /*红色下划线*/ text-decoration: underline wavy red; /*红色波浪形下划线*/ /*全局值*/ text-decoration: inherit; text-decoration: initial; text-decoration: unset;</pre> {| class="table table-striped table-hover" | 默认值: | none |- | 继承: | no |- | 版本: | CSS1 |- | JavaScript 语法: | object.style.textDecoration="overline" |} == 浏览器支持 == 表格中的数字表示支持该属性的第一个浏览器版本号。 {| class="table table-striped table-hover" ! 属性 ! Chrome ! Internet Explorer / Edge ! Firefox ! Safari ! Opera |- | text-decoration | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |} == 属性值 == {| class="table table-striped table-hover" ! 值 ! 描述 |- | none | 默认。定义标准的文本。 |- | underline | 定义文本下的一条线。 |- | overline | 定义文本上的一条线。 |- | line-through | 定义穿过文本下的一条线。 |- | blink | 定义闪烁的文本。 |- | inherit | 规定应该从父元素继承 text-decoration 属性的值。 |} == 更多实例 == <sample title="" desc="" lang="html" hererun="1"> h1.under { text-decoration: underline; } h1.over { text-decoration: overline; } p.line { text-decoration: line-through; } p.blink { text-decoration: blink; } a.none { text-decoration: none; } p.underover { text-decoration: underline overline; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> h1.under { text-decoration: underline; } h1.over { text-decoration: overline; } p.line { text-decoration: line-through; } p.blink { text-decoration: blink; } a.none { text-decoration: none; } p.underover { text-decoration: underline overline; } </style> </head> <body> <h1 class="under">下划线</h1> <p class="line">删除线</p> <p class="blink">闪烁效果,但浏览器不会显示</p> <h1 class="over">下划线</h1> <p>这是一个 <a class="none" href="#">链接</a>,默认情况下链接是有下划线的,这边我们移除它。</p> <p class="underover">上划线与下划线</p> </body> </html> </run> 虚线与波浪线: <sample title="" desc="" lang="html" hererun="1"> h1 { text-decoration: underline overline dotted red; } h2 { text-decoration: underline overline wavy blue; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> h1 { text-decoration: underline overline dotted red; } h2 { text-decoration: underline overline wavy blue; } </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p><strong>注意:</strong>在 Edge/Internet 浏览器中没有效果。</p> </body> </html> </run> == 相关文章 == CSS 教程: [[css text|CSS 文本]]
返回至“
Pr text text decoration
”。
上一节:
Pr_text_text_align
下一节:
Pr_text_text_indent