如何给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实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 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的变量总结 新手推荐
2011/04/18 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
PHP闭包函数详解
2016/02/13 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
简述php环境搭建与配置
2016/12/05 PHP
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
js Dialog 实践分享
2012/10/22 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
Python3读取zip文件信息的方法
2015/05/22 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
美国批发零售网站:GearXS
2016/07/26 全球购物
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
客服文员岗位职责
2013/11/29 职场文书
一年级学生评语
2014/04/23 职场文书
运动会方阵口号
2014/06/07 职场文书
初中中等生评语
2014/12/29 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
2015年预算员工作总结
2015/05/14 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL
python基础之文件操作
2021/10/24 Python