ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLタグのテキストに飾り線を追加する

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

angryTom
angryTom転載
2019-11-28 17:26:292466ブラウズ

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

#text-decoration 属性の概要

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

#text-decoration 属性値の説明表

# (推奨学習:

HTML ビデオ チュートリアル

)

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

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

u タグ

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

u

タグにはテキストに下線が付いています。 <pre class="brush:php;toolbar:false">&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt;     &lt;meta charset=&quot;UTF-8&quot;&gt;     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;     &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;     &lt;title&gt;设置文本修饰线&lt;/title&gt;    &lt;/head&gt; &lt;body&gt;     &lt;u&gt;成功不是击败别人,而是改变自己&lt;/u&gt; &lt;/body&gt; &lt;/html&gt;</pre>結果グラフ

注:

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

HTML

の他のタグと一緒に使用することもできます。 , 例: u タグを h1 タグにネストします。 <pre class="brush:php;toolbar:false">&lt;h1&gt;&lt;u&gt;成功不是击败别人,而是改变自己&lt;/u&gt;&lt;/h1&gt;</pre>s タグ

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

s

タグにはテキスト削除機能が付いています。 。 <pre class="brush:php;toolbar:false">&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt;     &lt;meta charset=&quot;UTF-8&quot;&gt;     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;     &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;     &lt;title&gt;设置文本修饰线&lt;/title&gt;    &lt;/head&gt; &lt;body&gt;     &lt;s&gt;成功不是击败别人,而是改变自己&lt;/s&gt; &lt;/body&gt; &lt;/html&gt;</pre>結果グラフ

注:

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

u

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

text-decoration 属性の

none

値のプラクティスを入力してみましょう。内容は次のとおりです。作成者は、HTML ページの s タグから取り消し線を削除しました。 コード ブロック<pre class="brush:php;toolbar:false">&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt;     &lt;meta charset=&quot;UTF-8&quot;&gt;     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;     &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;     &lt;title&gt;设置文本修饰线&lt;/title&gt;     &lt;style&gt;         s{             text-decoration: none;         }     &lt;/style&gt; &lt;/head&gt; &lt;body&gt;     &lt;s&gt;成功不是击败别人,而是改变自己&lt;/s&gt; &lt;/body&gt; &lt;/html&gt;</pre>結果グラフ

注:

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

s

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

text-decoration 属性の

underline

値の練習を入力してみましょう。作成者 HTML ページの h2 タグ内のテキストに下線を設定します。 コードブロック<pre class="brush:php;toolbar:false">&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt;     &lt;meta charset=&quot;UTF-8&quot;&gt;     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;     &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;     &lt;title&gt;设置文本修饰线&lt;/title&gt;     &lt;style&gt;         h2{             text-decoration: underline;         }     &lt;/style&gt; &lt;/head&gt; &lt;body&gt;     &lt;h2&gt;成功不是击败别人,而是改变自己&lt;/h2&gt; &lt;/body&gt; &lt;/html&gt;</pre>結果グラフ

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

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

ページ ワイヤー。 コード ブロック<pre class="brush:php;toolbar:false">&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt;     &lt;meta charset=&quot;UTF-8&quot;&gt;     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;     &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;     &lt;title&gt;设置文本修饰线&lt;/title&gt;     &lt;style&gt;         h2{             text-decoration: line-through;         }     &lt;/style&gt; &lt;/head&gt; &lt;body&gt;     &lt;h2&gt;成功不是击败别人,而是改变自己&lt;/h2&gt; &lt;/body&gt; &lt;/html&gt;</pre>結果の図

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

html チュートリアル

列からのものです。

を学びましょう

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

声明:
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。