text-decoration属性介绍

  • text-decoration属性是用来设置文本修饰线呢，text-decoration属性一共有4个值。

text-decoration属性值说明表

值 作用
none 去掉文本修饰线
underline 设置下划线
overline 设置上划线
line-through 设置删除线

HTML标签自带修饰线

  • 在开始实践text-decoration属性之前，笔者先给大家普及下HTML中的标签自带修饰线如：u标签、s标签，若有不全大家可以在下面评论中告诉笔者,毕竟笔者也是前端的一个小白,希望和大家相互交流，互帮互助，共同进步。

u标签

  • 下面让我们进入u标签的实践，u标签自带的是文本下划线。

  • 代码块

<!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>

  • 结果图

  • 注意：u标签也可以配合HTML中的其他标签使用，举例：将u标签嵌套到h1标签中使用。

  • 代码块

<h1><u>成功不是击败别人，而是改变自己</u></h1>

s标签

  • 下面让我们进入s标签的实践，s标签自带的是文本删除线。

  • 代码块

<!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>

  • 结果图

  • 注意：s标签也可以嵌套，和u标签一致，笔者就不过多的介绍了。

none去除修饰线

  • 让我们进入text-decoration属性的none值实践，实践内容如：笔者将HTML页面中的s标签自带的删除线给去除掉。

  • 代码块

<!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>

  • 结果图

  • 注意：u标签、s标签、包括text-decoration属性值的所有的修饰线都可以去掉哦。

underline设置下划线

  • 让我们进入text-decoration属性的underline值实践，实践内容如：笔者将HTML页面中的h2标签中的文本设置一个下划线。

  • 代码块

<!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>

  • 结果图

overline设置上划线

  • 让我们进入text-decoration属性的overline值实践，实践内容如：笔者将HTML页面中的h2标签中的文本设置一个上划线。

  • 代码块

<!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>

  • 结果图

line-through设置删除线

  • 让我们进入text-decoration属性的line-through值实践，实践内容如：笔者将HTML页面中的h2标签中的文本设置一个删除线。

  • 代码块

<!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>

  • 结果图

如何给HTML标签中的文本设置修饰线的更多相关文章

  1. JS修改标签中的文本且不影响其中标签

    /********************************************************************* * JS修改标签中的文本且不影响其中标签 * 说明: * ...

  2. selenium获取标签中的文本

    # 寻找文本所在的标签waitClickCompanyName = driver.find_elements_by_xpath('//div[@id="nsrzt"]//li') ...

  3. PHP 导出网页表格如何对标签中的内容设置属性

    当在使用php导出excel表格的时候,有时需要将某一列专门设置成文本属性 方法: 在需要设置属性的的<td>标签中 添加  style='vnd.ms-excel.numberforma ...

  4. 10、NFC技术：读写NFC标签中的文本数据

    代码实现过程如下: 读写NFC标签的纯文本数据.java import java.nio.charset.Charset; import java.util.Locale; import androi ...

  5. p标签中的文本换行

    参考文章 word-break:break-all和word-wrap:break-word的区别 CSS自动换行.强制不换行.强制断行.超出显示省略号 属性介绍 white-space: 如何处理元 ...

  6. ★★★.NET 在meta标签中使用表达式设置页面的关键字

    在aspx文件中 给meta标签的属性复制是不能直接使用 表达式的 错误的写法: <meta name="keywords" content="<%=news ...

  7. js向标签中添加文本或其他的简例

    1.如何用js 在div内插入内容? 不是改变内容,而是插入,就是在保留原内容的基础上,在尾部添加.举个例子. 元内容<div>你好</div> 插入后<div>你 ...

  8. 如何将HTML页面中的文本设置首行缩进

    text-indent属性介绍 属性值单位 描述 em 比如:1em 就代表缩进1个字,2em缩进2个字...... 由于简单我就不过多的介绍了直接上代码了哦,注意:text-indent属性的值支持 ...

  9. JS---DOM---设置和获取---标签内容和文本内容

    设置和获取---标签内容和文本内容   总结---设置: 使用innerText主要是设置文本的, 设置标签内容, 是没有标签的效果的 innerHTML是可以设置文本内容 innerHTML主要的作 ...

随机推荐

  1. 设计模式常见面试知识点总结（Java版）

    设计模式 这篇总结主要是基于我设计模式系列的文章而形成的的.主要是把重要的知识点用自己的话说了一遍,可能会有一些错误,还望见谅和指点.谢谢 更多详细内容可以到我的cdsn博客上查看: https:// ...

  2. Mybatis入门简版（一）

    一.Mybatis介绍 MyBatis是一个优秀的持久层框架,它对jdbc的操作数据库的过程进行封装,使开发者只需要关注 SQL 本身,而不需要花费精力去处理例如注册驱动.创建connection.创 ...

  3. STM32串口IAP分享

    什么是IAP? IAP是In Application Programming的首字母缩写,IAP是用户自己的程序在运行过程中对User Flash的部分区域进行烧写,目的是为了在产品发布后可以方便地通 ...

  4. 路由器静态IP的配置及其备份静态路由缺省路由

    静态路由时管理员手动配置并维护的路由.静态路由配置简单,被广泛应用于网络中.静态路由还可以实现负载均衡和路由备份.学习掌握好静态路由的配置是很重要的. 如下图, 首先进入路由器的命令视图,(sys) ...

  5. opensuse下安装redis

    1.安装gcc zypper install gcc 2.解压,安装到指定路径 sudo tar xzf redis-4.0.1.tar.gzcd redis#安装到指定目录中sudo make PR ...

  6. windows 抓hash获取管理员密码

    webshell 找能执行权限的目录上传 C:\Windows\System32\config\sam 内有windows 密码 利用工具把密码抓出来 samcopy 直接抓取 GetHASHES.e ...

  7. SSH框架项目配置和启动的加载顺序及请求的执行顺序

    1:======配置和启动====== (1)配置web.xml 配置<context-param>,其中内容为Spring的配置文件applicationContext.xml.注意&l ...

  8. CodeForces - 1214D B2. Books Exchange (hard version)

    题目链接:http://codeforces.com/problemset/problem/1249/B2 思路:用并查集模拟链表,把关系串联起来,如果成环,则满足题意.之后再用并查集合并一个链,一个 ...

  9. Oracle数据库 常见的SQL题，复习

    01.查询员工表所有数据,并说明使用*的缺点 select * from emp 02.查询职位(JOB)为'PRESIDENT'的员工的工资 select sal from emp where jo ...

  10. JVM(8) 线程安全与锁优化

    面向过程编程:程序编写以算法为核心,程序员会把数据和过程分别作为独立的部分来考虑,数据代表问题空间的客体,程序代码则用于处理这些数据.这种思维方式直接站在计算机的角度去抽象问题和解决问题,称为面向过程 ...