ホームページ > 記事 > ウェブフロントエンド > HTMLタグのテキストに飾り線を追加する
HTMLタグのテキストに飾り線を追加する
- angryTom転載
- 2019-11-28 17:26:292451ブラウズ
#text-decoration 属性の概要
text-decoration 属性はテキストを設定するために使用されます装飾行に関しては、text-decoration 属性に合計 4 つの値があります。
# (推奨学習:
HTML ビデオ チュートリアル| underline | |
| overline | |
| line-through | |
先頭に 練習する前にtext-decoration 属性を使用して、u タグや s タグなどの独自の変更行を含めて HTML タグをまず普及させます。不備があれば、下のコメントで教えてください。結局のところ、私も初心者です。皆様とコミュニケーションをとり、助け合い、共に進歩していきたいと思っています。
u タグu タグの練習に入りましょう。
u タグにはテキストに下線が付いています。 <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>結果グラフ
u
タグは、
の他のタグと一緒に使用することもできます。 , 例: u タグを h1 タグにネストします。 <pre class="brush:php;toolbar:false"><h1><u>成功不是击败别人，而是改变自己</u></h1></pre>s タグ
s タグの実践に入りましょう。
s タグにはテキスト削除機能が付いています。 。 <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>結果グラフ
s
タグは、
タグと一貫してネストすることもできます。著者はあまり多くを紹介しません。 none は変更された行を削除します
text-decoration 属性の
none 値のプラクティスを入力してみましょう。内容は次のとおりです。作成者は、HTML ページの s タグから取り消し線を削除しました。 コード ブロック<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>結果グラフ
u
タグ、
タグと、text-decoration 属性値を含むすべての装飾行は削除できます。 underline アンダーラインの設定
text-decoration 属性の
underline 値の練習を入力してみましょう。作成者 HTML ページの h2 タグ内のテキストに下線を設定します。 コードブロック<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>結果グラフ
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>
結果グラフ
##ラインスルー設定取り消し線
属性の line-through 値の練習を入力します 練習内容は次のとおりです: 作者は
の h2 タグ内のテキストの削除を設定しますHTML ページ ワイヤー。 コード ブロック<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>結果の図
html チュートリアル
列からのものです。を学びましょう
以上がHTMLタグのテキストに飾り線を追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。