当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


CSS text-decoration用法及代码示例


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
  • 苹果浏览器


相关用法


注:本文由纯净天空筛选整理自Archana choudhary大神的英文原创作品 CSS | text-decoration Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。