CSSテキストに下線を設定する方法の紹介-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSテキストに下線を設定する方法の紹介

不言

Nov 05, 2018 pm 02:22 PM

Web デザイン全体の中で、最も簡単に識別できるスタイルは依然として下線付きの青いテキストであり、そのほとんどは別の Web ページにリンクされています。リンク要素にはデフォルトでスタイルがあり、デフォルトモードでは青が唯一の色になります。今日のリンク要素に下線を引く必要はなくなったとしても、テキストの下の行は単なる今日のリンク識別子ではないため、この知識点を理解する必要があります。この記事は主に下線テキスト変更 CSS オプションと「リンク」について説明しています。オプション。

まず、すばやく簡単に規則的な下線を付ける必要がある場合は、テキストの色のデフォルトの位置にテキストの色を作成する HTML 要素を使用できます。実際、要素は単にテキストの装飾を追加するだけです。ブラウザの組み込み CSS を使用してテキストに下線が付けられます。 (関連する推奨事項: css オンラインマニュアル)

CSSテキストに下線を設定する方法の紹介

効果は次のとおりです:

CSSテキストに下線を設定する方法の紹介

それは上記のようなものかもしれません。あなたが望むものではありません。次に、CSS

を使用してテキストの下に行を追加する 2 つのオプションの方法を紹介します。1 つ目は text-decoration 属性 です。テキストに追加する装飾を指定します。このプロパティに指定できる値は、下線、上線、および線通しです。 text-decoration 属性は、text-decoration-line、text-decoration-color、text-decoration-style の省略属性である必要がありますが、まだサポートされていません。これで、 text-decoration プロパティができました。テキストのテキストの下に線を追加したり、色を付けたり、その線とテキストスタイルに色を付けたり、下線を二重、点、破線、波線にすることができます。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	p{
		text-decoration: underline;
	}
	</style>
</head>
<body>
<p>我有一条文字下划线</p>
</body>
</html>

ログイン後にコピー

効果は次のとおりです:

CSSテキストに下線を設定する方法の紹介

テキスト下線の他の形状の例:

css 点線下線:

p{
		text-decoration: underline;
		text-decoration-style: dotted;
	}

ログイン後にコピー

効果は次のとおりです:

CSSテキストに下線を設定する方法の紹介

css ピンクの実線の下線:

p{
		text-decoration: underline;
		text-decoration-color: red;
	}

ログイン後にコピー

効果は次のとおりです:

CSSテキストに下線を設定する方法の紹介

css 波線下線:

p{
		text-decoration: underline;
		text-decoration-color: red;
		text-decoration-style: wavy;
	}

ログイン後にコピー

効果は次のとおりです:

CSSテキストに下線を設定する方法の紹介

# #2 番目の方法は、ボーダーボトム (border-bottom) 属性を使用する方法です。この場合、表示属性はインラインである必要があります。このメソッドを使用すると、padding-bottom プロパティで線の位置、border-bottom-width で線の太さ、border-bottom-style でスタイル、border-bottom-color で色を制御できます。 border-bottom-style には、text-decoration-style やいくつかの 3D 効果オプションと同じオプションがあります。このオプションではさらに多くのオプションと変数が提供されますが、この方法を使用するのは面倒になる場合があります。

コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	p{
		border-bottom-width: 5px;
		border-bottom-style: dashed;
		border-bottom-color: green;
		padding-bottom: 10px;
	}
	</style>
</head>
<body>
<p>我有一条文字下划线</p>
</body>
</html>

ログイン後にコピー

結果は次のとおりです:

CSSテキストに下線を設定する方法の紹介 ##最後に、2 番目の方法はセットアップできません。波形の下線。