全国服务热线:4008-888-888

技术知识

怎样给HTML标识中的文字设定装饰线

text-decoration特性详细介绍

text-decoration 特性是用来设定文字装饰线呢, text-decoration 特性1共有4个值。

 text-decoration特性值表明表 

    值 功效 none 去掉文字装饰线 underline 设定下划线 overline 设定上划线 line-through 设定删掉线

HTML标识自带装饰线

在刚开始实践活动 text-decoration 特性以前,笔者先给大伙儿普及下 HTML 中的标识自带装饰线如: u标识s标识 ,若有不全大伙儿能够在下面评价中告知笔者,终究笔者也是前端开发的1个小白,期待和大伙儿互相沟通交流,互相帮助,相互发展。

 u标识

下面让大家进到 u 标识的实践活动, u 标识自带的是文字下划线。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <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⑻">
    <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 标识1致,笔者就但是多的详细介绍了。

none除去装饰线

让大家进到 text-decoration 特性的 none 值实践活动,实践活动內容如:笔者将 HTML 网页页面中的 s 标识自带的删掉线给除去掉。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <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 标识中的文字设定1个下划线。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <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 标识中的文字设定1个上划线。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <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标识中的文字设定1个删掉线。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <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」创作共享资源协议书,转载请在文章内容显著部位注明作者及出处。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服