ホームページ > ウェブフロントエンド > フロントエンドQ&A > HTML hr タグを黄色に設定できますか?

HTML hr タグを黄色に設定できますか?

青灯夜游
リリース: 2023-01-07 11:41:36
オリジナル
3460 人が閲覧しました

HTML では、hr タグを黄色に設定できます。色のスタイルを追加するには、hr タグの style 属性を使用するだけです。構文形式は「


" 。 border-color プロパティは、要素の境界線の色を設定するために使用されます。

HTML hr タグを黄色に設定できますか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。


タグは、HTML ページ内のトピックの変更 (トピックの転送など) を定義し、水平線として表示されます。


要素は、HTML ページ内のコンテンツを分離する (またはバリエーションを定義する) ために使用されます。

デフォルトの hr タグ スタイル:

HTML hr タグを黄色に設定できますか?

それでは、hr タグを黄色に設定できますか?

答えは「はい」です。

以下、例を挙げて紹介します。

<hr style="border-color: yellow"/>
ログイン後にコピー

HTML hr タグを黄色に設定できますか?

css の border-color プロパティを使用して hr タグの色を設定できることがわかります。

border-color プロパティは、要素の 4 つの境界線の色を設定します。

CSS では、色の値には色の名前、パーセント、数値、16 進数値が使用でき、4 つの書き方があります。

1) 色の名前を使用する

現在、名前付きの色は約 184 色ありますが、それらはさまざまなブラウザで実際にサポートされており、CSS 仕様として機能します。おすすめの色名は以下の16色です。

#表 1: CSS 仕様で推奨される色の名前NameColorName Nameカラー名前カラー##ブラック#シルバーライトグレーネイビーダークブルーライトブルー#グリーンダークグリーンライム##ティール天蓝#マルーンレッド #紫##オリーブブラウンイエロー yellow明黄グレーダークグレーホワイトシェルホワイト Web ページ、特に大規模な Web ページで色の名前を使用することはお勧めできません。スケールを使用すると、一部の色の名前を使用できなくなります。ブラウザによって解析されたり、ブラウザごとに色が異なって解釈されたりします。 これは最も一般的に使用される方法です。例: このステートメントは、赤、青、青の 3 種類を組み合わせます。緑 原色はすべて最大値に設定されており、その結果の組み合わせは白で表示されます。代わりに、 を黒に設定できます。 3 つのパーセンテージ値が等しい場合、グレーが表示され、同様にパーセンテージ値が大きい方の原色が優先されます。
ピュアブラック ##ブルー
#ライトグリーン##インディゴアクア
#クリムゾン##大红#ディープパープルフクシアマゼンタ
2) パーセンテージを使用します
color: rgb(100%, 100%, 100%);
ログイン後にコピー
rgb(0%, 0%, 0%)
3) 数値を使用します


数値の範囲は 0 ~ 255 です。例:

color: rgb(255, 255, 255);
ログイン後にコピー
上記のステートメントは白で表示されます。逆に rgb(0, 0, 0)

に設定すると黒が表示されます。 3つの値が等しい場合はグレー表示となり、同様に値が大きいほどどの原色の割合が多くなるかということになります。

4) 16 進数の色

これは最も一般的に使用される色の選択方法です。例:

color: #ffffff;
ログイン後にコピー
16 進数で # を追加します。

前面にある色の記号。上記のステートメントでは白が表示されますが、逆に

#000000

を黒に設定することもできます。これは RGB で表されます:

color: #RRGGBB;
ログイン後にコピー
の範囲は 0 から 255 です。実際には 10 進数で 255 です。 FF、16 進カラー値は、そのような 16 進値の 3 つのグループに等しく、順番に接続すると、赤、青、緑の 3 原色に等しくなります。 [推奨チュートリアル:

CSS ビデオ チュートリアル html ビデオ チュートリアル

]

以上がHTML hr タグを黄色に設定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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