html文字标签设置(如何给HTML标签中的文本设置修饰线)
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
版权:本站使用「CC BY 4.0」创作共享协议,转载请在文章明显位置注明作者及出处。
- html和css制作导航条(使用Html+Css实现简易导航栏功能导航栏遇到鼠标切换背景颜色)
- html网页设计排版布局(HTML利用九宫格原理进行网页布局)
- html自适应怎么没有滚动条(如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度)
- html5的优点是什么
- html5本地存储功能(利用Node实现HTML5离线存储的方法)
- html5 canvas 特效(JavaScript canvas实现流星特效)
- html5发送文字特效(HTML5调用手机发短信和打电话功能)
- 微信html5页面怎么制作(HTML5中外部浏览器唤起微信分享功能的代码)
- html5canvas怎么改扇形起始角(HTML5 Canvas实现放大镜效果示例)
- html5+css样式代码(详解HTML5中CSS外观属性)
- UrlHelper、HtmlHelper的使用
- html5video怎么优化(HTML5 video循环播放多个视频的方法步骤)
- html5的语法变化(详解HTML5.2版本带来的修改)
- html5元素列表(HTML5触摸事件touchstart、touchmove和touchend的实现)
- html5页面传值表(html5的pushstate以及监听浏览器返回事件的实现)
- javascript怎么生成html控件(JavaScript+html实现前端页面滑动验证2)
- 得这个 难治病 的人太多了,300个人赶到杭州商量怎么办(得这个难治病的人太多了)
- 经度,世界时间腕表的灵魂(世界时间腕表的灵魂)
- 阿里最新财报公布 三季度营收增长3 ,将增加150亿美元回购额度 在美股价小涨(阿里最新财报公布)
- 赵薇时胖时瘦 最近变美少女 原因在这里 躺着就变瘦(赵薇时胖时瘦最近变美)
- 学会这26种姿势,你就可以和兵哥哥切磋了(你就可以和兵哥哥切磋了)
- 吴彦祖陈冠希 恩怨 ,失去曾让他流泪的女友,终遇走过18年真爱(吴彦祖陈冠希恩怨)
热门推荐
- 云服务器怎么设置端口映射(云服务器怎么修改远程端口)
- canvas 中文字体(详解canvas绘制网络字体几种方法)
- tomcat处理乱码(Tomcat中catalina.bat设置为UTF-8控制台出现乱码)
- 面试时如何回答对工作的期望
- 织梦怎么设置栏目列表(dedecms织梦给后台管理员列表增加搜索功能的示例代码)
- php运算符与操作符(php中的buffer缓冲区用法分析)
- php查询数据库给变量赋值(详解PHP变量传值赋值和引用赋值变量销毁)
- meta标签中viewport
- python技巧图解(Python魔法方法功能与用法简介)
- thinkphp5怎么设置默认返回(thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9