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

CSS text-decoration-line用法及代码示例


text-decoration-line属性用于设置各种text-decoration。 text-decoration可以包含许多值，例如下划线，上划线，line-through等。可以组合多个text-decoration属性。对于示例-下划线和上划线值可显示文本下方和上方的行。

用法:

text-decoration-line:none|underline|overline|line-through|initial|
inherit;

属性值：


  • none:它是默认值，用于不指定任何行来装饰文本。

    用法:

    text-decoration-line:none;

    例：

    <!DOCTYPE html> 
<html> 
    <head> 
        <title>text-decoration-line property</title> 
          
        <!-- text-decoration-line property used here -->
        <style> 
            h1 { 
                color:green; 
                text-decoration-line:none; 
            } 
            .gfg { 
                text-decoration-line:none; 
                font-weight:bold; 
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center"> 
          
        <h1>GeeksforGeeks</h1> 
          
        <h2>text-decoration-line:none;</h2> 
          
        <p class = "gfg"> 
            GeeksforGeeks:A computer science portal 
        </p> 
    </body> 
</html>                    

    输出：

  • underline:它用于在文本下方或下方显示一行。

    用法:

    text-decoration-line:underline;

    例：

    <!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            text-decoration-line property 
        </title> 
          
        <!-- text-decoration-line property used here -->
        <style> 
            h1 { 
                color:green; 
                text-decoration-line:underline; 
            } 
            .gfg { 
                text-decoration-line:underline; 
                font-weight:bold; 
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center"> 
          
        <h1>GeeksforGeeks</h1> 
          
        <h2>text-decoration-line:underline;</h2> 
          
        <p class="gfg"> 
            GeeksforGeeks:A computer science portal 
        </p> 
    </body> 
</html>                    

    输出：

  • overline:它用于在文本上方显示一行。

    用法:

    text-decoration-line:overline;

    例：

    <!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            text-decoration-line property 
        </title> 
          
        <!-- text-decoration-line property used here -->
        <style> 
            h1 { 
                color:green; 
                text-decoration-line:overline; 
            } 
            .gfg { 
                text-decoration-line:overline; 
                font-weight:bold; 
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center"> 
          
        <h1>GeeksforGeeks</h1> 
          
        <h2>text-decoration-line:overline;</h2> 
          
        <p class="gfg"> 
            GeeksforGeeks:A computer science portal 
        </p> 
    </body> 
</html>                    

    输出：

  • line-through它用于显示文本中的一行。

    用法:

    text-decoration-line:line through;

    例：

    <!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            text-decoration-line property 
        </title> 
          
        <!-- text-decoration-line property used here -->
        <style> 
            h1 { 
                color:green; 
                text-decoration-line:line-through; 
            } 
            .gfg { 
                text-decoration-line:line-through; 
                font-weight:bold; 
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center"> 
          
        <h1>GeeksforGeeks</h1> 
          
        <h2>text-decoration-line:line-through;</h2> 
          
        <p class="gfg"> 
            GeeksforGeeks:A computer science portal 
        </p> 
    </body> 
</html>                    

    输出：

  • initial:用于将属性设置为其默认值。它与none属性相同。

    用法:

    text-decoration-line:initial;

    例：

    <!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            text-decoration-line property 
        </title> 
          
        <!-- text-decoration-line property used here -->
        <style> 
            h1 { 
                color:green; 
                text-decoration-line:initial; 
            } 
            .gfg { 
                text-decoration-line:initial; 
                font-weight:bold; 
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center"> 
          
        <h1>GeeksforGeeks</h1> 
          
        <h2>text-decoration-line:initial;</h2> 
          
        <p class="gfg"> 
            GeeksforGeeks:A computer science portal 
        </p> 
    </body> 
</html>                    

    输出：

    支持的浏览器：下面列出了text-decoration-line属性支持的浏览器：

    • 谷歌浏览器57.0
    • Firefox 36.0、6.0 -moz-
    • 苹果Safari 7.1 -webkit-
    • Opera 44.0


相关用法


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