HTMLタグのテキストに飾り線を追加する-htmlチュートリアル-php.cn

HTMLタグのテキストに飾り線を追加する

angryTom

リリース： 2019-11-28 17:26:29

転載

2502 人が閲覧しました

#text-decoration 属性の概要

text-decoration 属性はテキストを設定するために使用されます装飾行に関しては、text-decoration 属性に合計 4 つの値があります。

#text-decoration 属性値の説明表

# (推奨学習:

HTML ビデオチュートリアル

)

値関数##noneテキスト変更行を削除下線を設定上線を設定取り消し線を設定しますHTML タグには変更された行が含まれています


	underline
	overline
	line-through

先頭に練習する前にtext-decoration 属性を使用して、u タグや s タグなどの独自の変更行を含めて HTML タグをまず普及させます。不備があれば、下のコメントで教えてください。結局のところ、私も初心者です。皆様とコミュニケーションをとり、助け合い、共に進歩していきたいと思っています。

u タグ

u タグの練習に入りましょう。

タグにはテキストに下線が付いています。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!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></pre><div class="contentsignin">ログイン後にコピー</div></div>結果グラフ

注:

u HTMLタグのテキストに飾り線を追加するタグは、

HTML

の他のタグと一緒に使用することもできます。 , 例: u タグを h1 タグにネストします。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><h1><u>成功不是击败别人，而是改变自己</u></h1></pre><div class="contentsignin">ログイン後にコピー</div></div>s タグ

s タグの実践に入りましょう。

タグにはテキスト削除機能が付いています。。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!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></pre><div class="contentsignin">ログイン後にコピー</div></div>結果グラフ

注:

s HTMLタグのテキストに飾り線を追加するタグは、

タグと一貫してネストすることもできます。著者はあまり多くを紹介しません。 none は変更された行を削除します

text-decoration 属性の

none

値のプラクティスを入力してみましょう。内容は次のとおりです。作成者は、HTML ページの s タグから取り消し線を削除しました。コードブロック<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!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></pre><div class="contentsignin">ログイン後にコピー</div></div>結果グラフ

注:

u HTMLタグのテキストに飾り線を追加するタグ、

タグと、text-decoration 属性値を含むすべての装飾行は削除できます。 underline アンダーラインの設定

text-decoration 属性の

underline

値の練習を入力してみましょう。作成者 HTML ページの h2 タグ内のテキストに下線を設定します。コードブロック<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!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></pre><div class="contentsignin">ログイン後にコピー</div></div>結果グラフ

##オーバーライン設定オーバーライン

HTMLタグのテキストに飾り線を追加する

入力してみましょう

text-decoration 属性の overline

値の練習練習内容は以下の通りです: 作者は

の h2 タグにテキストを入れます。 HTML ページオーバーラインを設定します。 コードブロック

<!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タグのテキストに飾り線を追加する

text-decoration

属性の line-through 値の練習を入力します練習内容は次のとおりです: 作者は

の h2 タグ内のテキストの削除を設定しますHTML

ページワイヤー。コードブロック<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!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></pre><div class="contentsignin">ログイン後にコピー</div></div>結果の図

この記事は、PHP 中国語 Web サイトの

html チュートリアル

列からのものです。

を学びましょう

以上がHTMLタグのテキストに飾り線を追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。