如何给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 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
CSS3教程(8):CSS3透明度指南
Apr 02 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
Python中实现参数类型检查的简单方法
2015/04/21 Python
python中defaultdict的用法详解
2017/06/07 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
python 美化输出信息的实例
2018/10/15 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
Python datetime 如何处理时区信息
2020/09/02 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
大一期末自我鉴定
2013/12/13 职场文书
技校毕业生的自我评价
2013/12/27 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
食品流通安全承诺书
2014/05/22 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书