HTML テキストの装飾

さまざまな方法でテキストを装飾するために使用される HTML のテキスト装飾。 text-decoration はテキストの装飾に使用されるプロパティです。 text-decoration プロパティは、アンダーライン、オーバーライン、ラインスルー、アンダーラインオーバーラインの値を受け取り、さまざまな方法でテキストを装飾します。

リアルタイムの例: テキスト装飾の上線、下線、ラインスルーの値は、ログイン ユーザーが人間かロボットかを確認しながらキャプチャを生成するために使用されます。テキストの上にある行はロボットによって完全に認識されないためです。

タイプ:

• テキスト装飾: なし;
• テキスト装飾: 上線;
• テキスト装飾: ラインスルー;
• テキスト装飾: 下線;

HTML ではテキスト装飾はどのように機能しますか?

テキスト装飾プロパティは、なし、上線、通し線、および下線に基づいて機能します

1.なし

構文:

text-decoration: none;

説明: テキストに装飾は加えられません。通常のテキストと同じです。

2.オーバーライン

構文:

text-decoration: overline;

説明: テキストの上に 1px サイズの線を付けます。

3.ラインスルー

構文:

text-decoration: line-through;

説明: テキストの中央から 1px のサイズで行を表示します。

4.下線

構文:

text-decoration: underline;

説明: テキストの下部に 1px サイズの行が表示されます。

5.点滅

構文:

text-decoration: blink;

説明: 不透明度 0% から 100% までの異なる色でテキストを点滅させます。

注: 最近のブラウザの点滅機能は非推奨になりました。今では全く使われていません。

テキスト装飾プロパティでは、点線、波線、実線、溝などのデフォルトのスタイル以外にも、色付きの上線、通し線、下線を付けることができます。以下の構文を確認できます。

構文:

text-decoration: underline dotted red;

HTML テキスト装飾の例

以下は HTML テキスト装飾の例です:

例 #1 – なし

コード:

<style>
h1 {
text-align:center;
color:green;
}
.none {
text-decoration: none;
font-size:20px;
}
}
</style>


<h1 id="Demo-for-text-decoration-none">Demo for text-decoration:none</h1>
<p class="none">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in the development of back end features in Spring MVC with Hibernate. Developed importing models and logic in the Office Note app to store spreadsheet data and deployed
to host.
</p>

出力:

説明: ご覧のとおり、text-decoration: none は段落テキストに行装飾を与えることができません。

例 #2 – 下線

コード:

<style>
h1 {
text-align:center;
color:green;
}
.underline {
text-decoration: underline;
font-size:20px;
}
}
</style>


<h1 id="Demo-for-text-decoration-underline">Demo for text-decoration:underline</h1>
<p class="underline">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>

出力:

説明: ご覧のとおり、text-decoration:Underline はテキストの下に行を与えます。

例 #3 – 上書き

テキスト装飾: 上書きの例:

コード:

<style>
h1 {
text-align:center;
color:green;
}
.overline{
text-decoration: overline;
font-size:20px;
}
}
</style>


<h1 id="Demo-for-text-decoration-overline">Demo for text-decoration:overline</h1>
<p class="overline">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>

出力:

説明: ご覧のとおり、text-decoration: overline はテキストの上に線を付けます。

例 #4 – ラインスルー

テキスト装飾:ラインスルーの例:

コード:

<style>
h1 {
text-align:center;
color:green;
}
.through {
text-decoration: line-through;
font-size:20px;
}
}
</style>


<h1 id="Demo-for-text-decoration-line-through">Demo for text-decoration:line-through</h1>
<p class="through">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>

出力:

説明: ご覧のとおり、text-decoration: line-through はテキストの途中から線を入れます。

例 #5

実線、二重、下線付きの波線、スルーライン、上線によるテキスト装飾の例:

コード:

<style>
h1 {
text-align:center;
color:green;
}
.p1 {
text-decoration:solid overline brown;
font-size:18px;
}
.p2 {
text-decoration:double line-through blue;
font-size:18px;
}
.p3 {
text-decoration:wavy underline red;
font-size:18px;
}
}
</style>


<h1 id="Demo-for-text-decoration-solid-overline-brown">Demo for text-decoration:solid overline brown</h1>
<p class="p1">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
<h1 id="Demo-for-text-decoration-double-line-through-blue">Demo for text-decoration:double line-through blue</h1>
<p class="p2">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
<h1 id="Demo-for-text-decoration-wavy-underline-red">Demo for text-decoration:wavy underline red</h1>
<p class="p3">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>

出力:

説明: ご覧のとおり、最初の段落には実線の上線があり、2 番目の段落には二重線があり、3 番目の段落には波線の下線のテキスト装飾スタイルが付いています。

結論

テキストの装飾は、上線、下線、通過線のプロパティ値によってスタイル設定でき、また任意の色のさまざまな線スタイルによってスタイル設定することもできます。

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