HTML テキストの装飾-htmlチュートリアル-php.cn

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

HTML テキスト装飾の例

例 #1 – なし

例 #2 – 下線

例 #3 – 上書き

例 #4 – ラインスルー

例 #5

結論

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML テキストの装飾

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:40 PM

html html5 HTML Tutorial HTML Properties HTML tags

さまざまな方法でテキストを装飾するために使用される 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 – なし

コード:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.none {
text-decoration: none;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>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>
</body>
</html>

ログイン後にコピー

出力:

HTML テキストの装飾

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

例 #2 – 下線

コード:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.underline {
text-decoration: underline;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>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>
</body>
</html>

ログイン後にコピー

出力:

HTML テキストの装飾

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

例 #3 – 上書き

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

コード:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.overline{
text-decoration: overline;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>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>
</body>
</html>

ログイン後にコピー

出力:

HTML テキストの装飾

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

例 #4 – ラインスルー

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

コード:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.through {
text-decoration: line-through;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>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>
</body>
</html>

ログイン後にコピー

出力:

HTML テキストの装飾

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

例 #5

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

コード:

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h1>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>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>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>
</body>
</html>

ログイン後にコピー

出力:

HTML テキストの装飾