ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSテキストに下線を設定する方法の紹介
CSSテキストに下線を設定する方法の紹介
- 不言オリジナル
- 2018-11-05 14:22:107554ブラウズ
Web デザイン全体の中で、最も簡単に識別できるスタイルは依然として下線付きの青いテキストであり、そのほとんどは別の Web ページにリンクされています。リンク要素 にはデフォルトでスタイルがあり、デフォルト モードでは青が唯一の色になります。今日のリンク要素に下線を引く必要はなくなったとしても、テキストの下の行は単なる今日のリンク識別子ではないため、この知識点を理解する必要があります。この記事は主に下線テキスト変更 CSS オプションと「リンク」について説明しています。オプション。
まず、すばやく簡単に規則的な下線を付ける必要がある場合は、テキストの色のデフォルトの位置にテキストの色を作成する HTML 要素 を使用できます。実際、 要素は単にテキストの装飾を追加するだけです。ブラウザの組み込み 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 点線下線:
p{
text-decoration: underline;
text-decoration-style: dotted;
} 効果は次のとおりです:
css ピンクの実線の下線:
p{
text-decoration: underline;
text-decoration-color: red;
} 効果は次のとおりです:
css 波線下線:
p{
text-decoration: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}効果は次のとおりです:
# #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>結果は次のとおりです: 
##最後に、2 番目の方法はセットアップできません。波形の下線。
以上がCSSテキストに下線を設定する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。