ホームページ  >  記事  >  ウェブフロントエンド  >  CSSに取り消し線を追加するにはどうすればよいですか? css text-decoration 属性は取り消し線を設定します (コード例)

CSSに取り消し線を追加するにはどうすればよいですか? css text-decoration 属性は取り消し線を設定します (コード例)

青灯夜游
青灯夜游オリジナル
2018-10-09 14:10:0622969ブラウズ

CSS に取り消し線を追加するにはどうすればよいですか?前回の記事では [html文字に取り消し線を付けるには?取り消し線を付ける2つの方法(例)】 htmlタグに取り消し線を付ける2つの方法を紹介しましたが、この章ではcss text-decoration属性を使ってテキストに取り消し線を付ける方法を紹介します。取り消し線の効果、CSSを使用して取り消し線のスタイルを設定する方法。困っている友人は参考にしていただければ幸いです。

まず、CSS の text-decoration 属性について簡単に説明します。

text-decoration 属性は、テキストに追加する装飾を指定します。

説明:

この属性を使用すると、取り消し線の追加など、テキストに特定の効果を設定できます。子孫要素に独自の装飾がない場合、祖先要素に設定された装飾は子孫要素にも「拡張」されます。ユーザー エージェントはまばたきをサポートする必要はありません。

それでは、cssのtext-decoration属性を使ってテキストの取り消し線効果を追加する方法を、以下では簡単なコード例を通してcssの取り消し線の実装方法を詳しく解説していきます!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css添加文本文字的删除线</title>
		<style>
			p{
				text-decoration:line-through;
			}
		</style>
	</head>
	<body>
		<p>这里有一条删除线</p>
	</body>
</html>

レンダリング:

CSSに取り消し線を追加するにはどうすればよいですか? css text-decoration 属性は取り消し線を設定します (コード例)

説明:

line-through 属性値: テキストの下を通過する線を定義します。

例からもわかるように、text-decoration:line-through; を設定して、

タグ内の文字列に取り消し線を追加する方法が簡単で便利です。また、CSS 設定を通じて取り消し線のスタイルを簡単に変更できます。色、例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css添加文本文字的删除线</title>
		<style>
			p{
				text-decoration:line-through;
				color: red;
			}
			span{
				color: black;
			}
		</style>
	</head>
	<body>
		<p><span>这里有一条删除线</span></p>
	</body>
</html>

レンダリング:

CSSに取り消し線を追加するにはどうすればよいですか? css text-decoration 属性は取り消し線を設定します (コード例)

このようにして、text-decoration: line-through; と スタイルを組み合わせて、CSS でさまざまな取り消し線とテキスト色のスタイル効果を実現できます。とてもシンプルです!

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、 CSS ビデオ チュートリアル をご覧ください。

関連する推奨事項: php 公共福祉トレーニング ビデオ チュートリアル

以上がCSSに取り消し線を追加するにはどうすればよいですか? css text-decoration 属性は取り消し線を設定します (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。