如何给HTML标签中的文本设置修饰线
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标签中的文本设置修饰线的更多相关文章
- JS修改标签中的文本且不影响其中标签
/********************************************************************* * JS修改标签中的文本且不影响其中标签 * 说明: * ...
- selenium获取标签中的文本
# 寻找文本所在的标签waitClickCompanyName = driver.find_elements_by_xpath('//div[@id="nsrzt"]//li') ...
- PHP 导出网页表格如何对标签中的内容设置属性
当在使用php导出excel表格的时候,有时需要将某一列专门设置成文本属性 方法: 在需要设置属性的的<td>标签中 添加 style='vnd.ms-excel.numberforma ...
- 10、NFC技术:读写NFC标签中的文本数据
代码实现过程如下: 读写NFC标签的纯文本数据.java import java.nio.charset.Charset; import java.util.Locale; import androi ...
- p标签中的文本换行
参考文章 word-break:break-all和word-wrap:break-word的区别 CSS自动换行.强制不换行.强制断行.超出显示省略号 属性介绍 white-space: 如何处理元 ...
- ★★★.NET 在meta标签中使用表达式设置页面的关键字
在aspx文件中 给meta标签的属性复制是不能直接使用 表达式的 错误的写法: <meta name="keywords" content="<%=news ...
- js向标签中添加文本或其他的简例
1.如何用js 在div内插入内容? 不是改变内容,而是插入,就是在保留原内容的基础上,在尾部添加.举个例子. 元内容<div>你好</div> 插入后<div>你 ...
- 如何将HTML页面中的文本设置首行缩进
text-indent属性介绍 属性值单位 描述 em 比如:1em 就代表缩进1个字,2em缩进2个字...... 由于简单我就不过多的介绍了直接上代码了哦,注意:text-indent属性的值支持 ...
- JS---DOM---设置和获取---标签内容和文本内容
设置和获取---标签内容和文本内容 总结---设置: 使用innerText主要是设置文本的, 设置标签内容, 是没有标签的效果的 innerHTML是可以设置文本内容 innerHTML主要的作 ...
随机推荐
- 程序员IT狗有什么副业可以做呢?
1. 开篇 副业有很多,全网有做什么公众号.闲鱼.手机卡,各种各样的都有,大部分是骗子,小部分是通过自己的努力,获得了成功. 从年初就开始实践如何做一个自由职业者,近大半年有一些感受正好一起分享交流一 ...
- java普通项目打包成可执行jar文件时如何添加第三包
在java的web项目中,引用第三方包的时候非常简单.因为在web项目上中,默认有一个web-inf文件夹.web-inf文件夹下有一个lib文件夹,如果有用到第三方包,直接丢进去就行了.但是对于普通 ...
- PHP 哈夫曼的实现
<?php namespace Test; use Iterator; use ArrayAccess; use Exception; // 叶子结点或者连接结点的基类 class Huffma ...
- ArrayList源码解析[一]
ArrayList源码解析[一] 欢迎转载,转载烦请注明出处,谢谢. https://www.cnblogs.com/sx-wuyj/p/11177257.html 在工作中集合list集合用的相对来 ...
- date命令查看与修改
在我们使用linux服务器时,肯定会遇到Linux服务器时间不准确的情况如何查看Linux系统的时间,如何修改Linux系统上的当前时间呢. 查看Linux系统当前时间: 命令: date +回车 修 ...
- AB实验的高端玩法系列2 - 更敏感的AB实验, CUPED!
背景 AB实验可谓是互联网公司进行产品迭代增加用户粘性的大杀器.但人们对AB实验的应用往往只停留在开实验算P值,然后let it go...let it go ... 让我们把AB实验的结果简单的拆解 ...
- js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的区别
js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11.chrome 和 firefox ...
- java入门到秃路线导航,元芳你怎么看?【教学视频+博客+书籍整理】
目录 一.Java基础 二.关于JavaWeb基础 三.关于数据库 四.关于ssm框架 五.关于数据结构与算法 六.关于开发工具idea 七.关于项目管理工具Mawen.Git.SVN.Gradle. ...
- JVM(2) Java内存溢出异常
在Java虚拟机运行时数据区中,除了程序计数器之外,虚拟机栈.本地方法栈.方法区和Java堆都有发生OutOfMemoryError(简称OOM)异常的可能. 一.Java堆溢出 Java堆用于存储对 ...
- 设计模式(二十二)Command模式
一个类在进行工作时会调用自己或者是其他类的方法,虽然调用结果会反映在对象的状态中,但并不会留下工作的历史记录. 这时,如果我们有一个类,用来表示“请进行这项工作”的“命令”就会方便很多.每一项想做的工 ...