dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1298|回复: 0

[Html/Css] 如何给HTML标签中的文本设置修饰线

[复制链接]
  • TA的每日心情

    2024-2-20 11:15
  • 签到天数: 11 天

    [LV.3]偶尔看看II

    878

    主题

    4343

    帖子

    3987

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    3987

    发表于 2020-4-16 22:00:02 | 显示全部楼层 |阅读模式

    本站资源全部免费,回复即可查看下载地址!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    text-decoration属性介绍#
    • text-decoration属性是用来设置文本修饰线呢,text-decoration属性一共有4个值。
    text-decoration属性值说明表[td]
    作用
    none去掉文本修饰线
    underline设置下划线
    overline设置上划线
    line-through设置删除线
    HTML标签自带修饰线#
    • 在开始实践text-decoration属性之前,笔者先给大家普及下HTML中的标签自带修饰线如:u标签、s标签,若有不全大家可以在下面评论中告诉笔者,毕竟笔者也是前端的一个小白,希望和大家相互交流,互帮互助,共同进步。
    u标签#
    • 下面让我们进入u标签的实践,u标签自带的是文本下划线。
    • 代码块
    • [HTML] 纯文本查看 复制代码
      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>设置文本修饰线</title>
        
      </head>
      <body>
          <u>成功不是击败别人,而是改变自己</u>
      </body>
      </html>

    结果图

    1.png
    • 注意:u标签也可以配合HTML中的其他标签使用,举例:将u标签嵌套到h1标签中使用。
    • 代码块

    Copy
    <h1><u>成功不是击败别人,而是改变自己</u></h1>
    s标签#
    • 下面让我们进入s标签的实践,s标签自带的是文本删除线。
    • 代码块
    • [HTML] 纯文本查看 复制代码
      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>设置文本修饰线</title>
        
      </head>
      <body>
          <s>成功不是击败别人,而是改变自己</s>
      </body>
      </html>




    结果图
    2.png
    • 注意:s标签也可以嵌套,和u标签一致,笔者就不过多的介绍了。

    none去除修饰线#
    • 让我们进入text-decoration属性的none值实践,实践内容如:笔者将HTML页面中的s标签自带的删除线给去除掉。
    • 代码块
    • [HTML] 纯文本查看 复制代码
      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>设置文本修饰线</title>
          <style>
              s{
                  text-decoration: none;
              }
          </style>
      </head>
      <body>
          <s>成功不是击败别人,而是改变自己</s>
      </body>
      </html>




    结果图
                3.png
    注意:u标签、s标签、包括text-decoration属性值的所有的修饰线都可以去掉哦。


    underline设置下划线#
    • 让我们进入text-decoration属性的underline值实践,实践内容如:笔者将HTML页面中的h2标签中的文本设置一个下划线。
    • 代码块
    • [HTML] 纯文本查看 复制代码
      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>设置文本修饰线</title>
          <style>
              h2{
                  text-decoration: underline;
              }
          </style>
      </head>
      <body>
          <h2>成功不是击败别人,而是改变自己</h2>
      </body>
      </html>

    结果图

                 4.png
    overline设置上划线#
    • 让我们进入text-decoration属性的overline值实践,实践内容如:笔者将HTML页面中的h2标签中的文本设置一个上划线。
    • 代码块
    • [HTML] 纯文本查看 复制代码
      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>设置文本修饰线</title>
          <style>
              h2{
                  text-decoration: overline;
              }
          </style>
      </head>
      <body>
          <h2>成功不是击败别人,而是改变自己</h2>
      </body>
      </html>

        结果图

                                  5.png
    line-through设置删除线#
    • 让我们进入text-decoration属性的line-through值实践,实践内容如:笔者将HTML页面中的h2标签中的文本设置一个删除线。
    • 代码块



    [HTML] 纯文本查看 复制代码
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>设置文本修饰线</title>
        <style>
            h2{
                text-decoration: line-through;
            }
        </style>
    </head>
    <body>
        <h2>成功不是击败别人,而是改变自己</h2>
    </body>
    </html>


    结果图
                          6.png







    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|本站代理|dmz社区

    GMT+8, 2024-12-23 11:28 , Processed in 0.513694 second(s), 36 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表