text-decoration属性用于对文本的内容进行“decorate”。它本质上是用不同种类的线条来装饰文本。它是text-decoration-line(必填),text-decoration-color和text-decoration-style的简写属性。句法:
text-decoration:text-decoration-line text-decoration-style text-decoration-color|initial|inherit;
属性值:
- text-decoration-line:指定使用的装饰类型(例如,下划线,上划线等)。
用法:
text-decoration:text-decoration-line;
例:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>text-decoration</title> <style> h1 { color:green; } body { text-align:center; } ul li { margin-top:15px; } #example1 { text-decoration:underline; } #example2 { text-decoration:line-through; } #example3 { text-decoration:overline; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2> text-decoration:text-decoration-line;</h2> <ul> <li id="example1">Welcome geeks!</li> <li id="example2">Welcome geeks!</li> <li id="example3">Welcome geeks!</li> </ul> </body> </html> </html>
输出:
- text-decoration-style:指定使用的装饰风格(例如,点缀,波浪形等)。
用法:text-decoration:text-decoration-line text-decoration-style;
例:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>text-decoration</title> <style> h1 { color:green; } body { text-align:center; } ul li { margin-top:15px; } #example1 { text-decoration:underline dotted; } #example2 { text-decoration:underline wavy; } #example3 { text-decoration:underline dashed; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2> text-decoration: text-decoration-line text-decoration-style; </h2> <ul> <li id="example1">Welcome geeks!</li> <li id="example2">Welcome geeks!</li> <li id="example3">Welcome geeks!</li> </ul> </body> </html>
输出:
- text-decoration-color:指定装饰的颜色。
用法:text-decoration:text-decoration-line text-decoration-color;
例:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>text-decoration</title> <style> h1 { color:green; } body { text-align:center; } ul li { margin-top:15px; } #example1 { text-decoration:underline wavy green; } #example2 { text-decoration:line-through red; } #example3 { text-decoration:overline blue; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2> text-decoration: text-decoration-line text-decoration-color; </h2> <ul> <li id="example1">Welcome geeks!</li> <li id="example2">Welcome geeks!</li> <li id="example3">Welcome geeks!</li> </ul> </body> </html>
输出:
- initial:将属性设置为其默认值。
用法:text-decoration:initial;
例:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>text-decoration</title> <style> h1 { color:green; } body { text-align:center; } #example1 { text-decoration:initial; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2> text-decoration:initial;</h2> <a href="#"> This is a link without text-decoration. </a> <br> <br> <a id="example1" href="#"> This is a link with text-decoration set to initial. </a> </body> </html>
输出:
- inherit:它从其父元素继承此属性。
用法:text-decoration:inherit;
例:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>text-decoration</title> <style> h1 { color:green; } body { text-align:center; } #example1 { text-decoration:underline wavy green; } #example1child { text-decoration:inherit; font-weight:bold; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2> text-decoration:inherit;</h2> <p id="example1"> I am parent and <span id="example1child"> this my is child.</span> </p> </body> </html>
输出:
支持的浏览器:text-decoration属性支持的浏览器如下所示:
- 谷歌浏览器
- IE浏览器
- 火狐浏览器
- Opera
- 苹果浏览器
相关用法
- HTML Style textDecoration用法及代码示例
- CSS transition-property用法及代码示例
- CSS nav-right用法及代码示例
- CSS top属性用法及代码示例
- CSS all属性用法及代码示例
- CSS nav-down用法及代码示例
- CSS nav-up用法及代码示例
- CSS right属性用法及代码示例
- CSS will-change用法及代码示例
- CSS clear属性用法及代码示例
- CSS bleed属性用法及代码示例
- CSS border-right用法及代码示例
- CSS columns属性用法及代码示例
- CSS resize属性用法及代码示例
- CSS nav-left用法及代码示例
注:本文由纯净天空筛选整理自Archana choudhary大神的英文原创作品 CSS | text-decoration Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。