ホームページ > 記事 > ウェブフロントエンド > CSSでフォントの下線を設定する方法
CSS でフォントの下線を設定する方法: 1. "text-decoration:underline;" を使用して下線のスタイルを設定します; 2. "border-bottom" 属性を通じて下線のスタイルを設定します。
このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
CSS では、text-decoration 属性または border-bottom 属性を使用して、フォントの下線スタイルを設定できます。
1. text-decoration:underline; を使用して下線スタイルを設定します
CSS の text-decoration 属性は、テキストに追加する装飾を指定するために使用され、その下線属性値は次のように指定できます。テキストの下に行を定義します。
文法:
text-decoration:underline;
コード例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css 文字下划线样式</title> <style> .demo span{ text-decoration:underline; } </style> </head> <body> <p class="demo">这是一段测试文字,<span>php中文网</span>!</p> </body> </html>
css text-decoration 属性によって追加される下線は最も単純なスタイルであり、特別なスタイルを設定する方法はありません。など、下線が点線に設定されます。下線を追加する別の方法を見てみましょう。さまざまな下線スタイルを設定できます。
[推奨: "css ビデオ チュートリアル "]
2. border-bottom 属性を使用して下線スタイルを設定します。
border-bottom 属性CSS の 属性 で、テキストの下に線を追加できるように、要素の下枠のスタイルを設定できます。
構文:
border-bottom: width style color;
パラメータ:
width: 下枠の幅を指定します。
style: 下枠のスタイルを指定します。
color: 下枠の色を指定します。
説明: border-bottom 属性は、線の太さ、色、スタイルを制御することで、さまざまなテキストの下線スタイルを実現できます。
コード例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css 文字下划线样式</title> <style> .demo{ width: 400px; height: 400px; margin:100px auto; } .demo1 span{ border-bottom: 1px solid #000000; } .demo2 span{ border-bottom: 5px solid #0081EF; } .demo3 span{ border-bottom: 2px dashed #000000; } .demo4 span{ border-bottom: 2px dotted #000000; } .demo5 span{ border-bottom: 5px double #000000; } </style> </head> <body> <div class="demo"> <p class="demo1">这是第1段测试文字,<span>php中文网</span>!</p> <p class="demo2">这是第2段测试文字,<span>php中文网</span>!</p> <p class="demo3">这是第3段测试文字,<span>php中文网</span>!</p> <p class="demo4">这是第4段测试文字,<span>php中文网</span>!</p> <p class="demo5">这是第5段测试文字,<span>php中文网</span>!</p> </div> </body> </html>
コードを直接コピーしてローカルでテストできます。
以上がCSSでフォントの下線を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。