如何给HTML标签中的文本设置修饰线


Posted in HTML / CSS onNovember 18, 2019

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>

结果图

如何给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>

结果图

如何给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>

结果图

如何给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>

结果图

如何给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>

结果图

如何给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标签中的文本设置修饰线

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

作者: 微笑是最初的信仰

出处:https://www.cnblogs.com/lq0001/p/11878033.html

版权:本站使用「CC BY 4.0」创作共享协议,转载请在文章明显位置注明作者及出处。

HTML / CSS 相关文章推荐
css3之UI元素状态伪类选择器实例演示
Aug 11 HTML / CSS
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
Nov 18 #HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 #HTML / CSS
iframe跨域的几种常用方法
Nov 11 #HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 #HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 #HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 #HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 #HTML / CSS
You might like
PHP面向对象编程快速入门
2006/12/14 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
Python随机数函数代码实例解析
2020/02/09 Python
python实现一个猜拳游戏
2020/04/05 Python
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
公司同意接收函
2014/01/13 职场文书
工程招投标邀请书
2014/01/30 职场文书
分层教学实施方案
2014/03/19 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
春节超市活动方案
2014/08/14 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers