HTMLでWebページの色を変更する方法-フロントエンドQ&A-php.cn

HTMLでWebページの色を変更する方法

PHPz

リリース： 2023-04-13 11:16:16

オリジナル

4714 人が閲覧しました

HTML は Web 開発の最も基本的な部分であり、Web ページの色の選択も非常に重要です。 HTML には、ページの背景色、テキストの色、リンクの色の変更など、Web ページの色を変更する方法がいくつか用意されています。

1. Web ページの背景色

色の名前を使用する

HTML には、赤、青、緑、その他の一般的な色など、137 の色の名前が用意されています。。 body タグに style 属性を追加し、background-color 属性を使用し、属性値として色の名前を使用して背景色を変更します。

<body style="background-color: red;">

ログイン後にコピー

16 進数のカラー値の使用

色の名前に加えて、16 進数のカラー値を使用して背景色を変更することもできます。 body タグに style 属性を追加し、background-color 属性を使用し、属性値として color 値を使用します。

<body style="background-color: #FF0000;">

ログイン後にコピー

2. 文字色

色の名前を使用

文字の色は色名を使用して変更することもできます。色を変更したいタグにstyle属性を追加し、color属性を使用し、属性値として色の名前を使用します。

<p style="color: green;">这是一个绿色的段落</p>

ログイン後にコピー

16 進数のカラー値の使用

同様に、テキストの色も 16 進数のカラー値を使用して変更できます。色を変更したいタグにstyle属性を追加し、color属性を使用し、属性値としてcolor値を使用します。

<p style="color: #00FF00;">这是一个绿色的段落</p>

ログイン後にコピー

3. リンクの色

訪問していないときのリンクの色を変更します

style 属性を a タグに追加します。 color 属性を指定し、色を変更します。属性値として、名前または色の値を使用できます。マウスがホバーしているときにリンクの色を変更したい場合は、:hover 疑似クラスを使用できます。

<a href="#" style="color: red;">未访问链接</a>
<a href="#" style="color: #FF0000;">未访问链接</a>

<a href="#" style="color: red;">鼠标悬停链接</a>:hover { color: blue; }
<a href="#" style="color: #FF0000;">鼠标悬停链接</a>:hover { color: #0000FF; }

ログイン後にコピー

リンクが訪問されたときに色を変更する

a:visited 疑似クラスに style 属性を追加し、color 属性を使用し、color を使用します。属性値として名前または色の値を指定するだけです。

a:visited { color: gray; }
a:visited { color: #808080; }

ログイン後にコピー

概要

上記は HTML で色を変更する基本的な方法です。色の名前または RGB 16 進数値を選択することで、Web ページに独自のスタイルを表示できます。実際の開発では、CSS を使用して Web ページの色をより柔軟に制御することもできます。この記事が初心者の方に役立つことを願っています。

以上がHTMLでWebページの色を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。