ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSの下線を設定するにはどうすればよいですか? CSSで文字に下線を設定する方法の紹介

CSSの下線を設定するにはどうすればよいですか? CSSで文字に下線を設定する方法の紹介

不言
リリース: 2018-10-27 11:16:58
オリジナル
10005 人が閲覧しました

デフォルトでは、Web ページ上のテキスト フォントには下線スタイルがありませんが、Web ページ上のリンクではないテキストの下に下線が表示されることがあります。では、この下線スタイルはどのように実装されているのでしょうか。この記事ではCSSで文字に下線を設定する方法を紹介します。 次に、具体的な内容を見ていきましょう。

CSS には text-decoration 属性があります。この属性はテキストの下線を実装するために使用されます。

text-decoration 属性のコードも非常に簡単です。テキスト下線の実装は次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div{
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div>php中文网文字加下划线</div>
</body>
</html>
ログイン後にコピー

CSS でテキスト下線を設定する効果は次のとおりです:

CSSの下線を設定するにはどうすればよいですか? CSSで文字に下線を設定する方法の紹介

上記の方法は非常に簡単ではありませんか?実際、CSS でテキストに下線を付けるには、CSS の border 属性を使用する方法もあります。CSS の border 属性がどのように機能するかを詳しく見てみましょう。テキストに下線を付けます。

border 属性を使用すると、下枠の border-bottom を通じてテキストの下線効果を実現できます。テキストの下線を実現するコードを詳しく見てみましょう。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        span{
            border-bottom: 1px solid pink;
        }
        
    </style>
</head>
<body>
<span>中文网文字下划线</span>
</body>
</html>
ログイン後にコピー

テキストの下線効果は次のとおりです。

CSSの下線を設定するにはどうすればよいですか? CSSで文字に下線を設定する方法の紹介

テキストの下線を点線に変更したい場合は、上記のコードの実線を破線または点線に変更するだけです。

最後に、なぜ上記のコードで div の代わりに span が使用されているかについてですが、div タグは 1 行を占め、span タグはコンテンツの幅が広いため、比較的多くのスペースを占めるためです。簡単にspanタグを使用できます。

以上がCSSの下線を設定するにはどうすればよいですか? CSSで文字に下線を設定する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート