如何给HTML标签中的文本设置修饰线
时间:2019-11-17
本文章向大家介绍如何给HTML标签中的文本设置修饰线,主要包括如何给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>
结果图
原文地址:https://www.cnblogs.com/lq0001/p/11878033.html
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(28)-系统小结
- 用谷歌浏览器来当手机模拟器
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(27)-权限管理系统-分配用户给角色
- ASP.NET MVC5+EF6+EasyUI 后台管理系统-分配角色给用户
- 体验vs11 Beta
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(25)-权限管理系统-系统管理员(附生成器)
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(24)-权限管理系统-将权限授权给角色
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(23)-权限管理系统-角色组模块
- jQuery Gallery Plugin在Asp.Net中使用
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(22)-权限管理系统-模块导航制作
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(20)-权限管理系统-根据权限获取菜单
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(19)-权限管理系统-用户登录
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(21)-权限管理系统-跑通整个系统
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(18)-权限管理系统-表数据
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Flutter基础widgets教程-Text篇
- python 舆情分析 nlp主题分析 (2)-结合snownlp与jieba库,提高分词与情感判断 待续
- No qualifying bean of type 'com.pjh.service.Imp.serviceImp' available和Exception in thread "main" jav
- python音频文件中pcm格式提取
- Spring系列之事务的控制 注解实现+xml实现+事务的隔离等级
- Leetcode刷题 237. 删除链表中的节点 两行代码实现
- python提取视频第一帧图片
- Leetcode刷题 206. 反转链表 递归迭代两种方法实现
- airtest本地连接和远程连接
- Flutter基础widgets教程-TextField篇
- poco对象生成的几种方式根据你使用不同的ui决定
- java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL
- SpringMVC系列之SpringMVC快速入门 MVC设计模式介绍+什么是SpringMVC+ SpringMVC的作用及其基本使用+组件解析+注解解析
- [Go] GoAdminGroup/go-admin的安装和运行
- 算法篇:滑动窗口(一)