HTML でフォントの色を設定する方法と、PS を使用して HTML で正確なフォントの色を取得する方法

HTML でフォントの色を設定する方法と、PS を使用して HTML で正確なフォントの色を取得する方法

1. HTMLフォントカラー設定

HTML では、フォント タグを使用してフォント コンテンツの色を設定します。

1.フォント構文:


コードをコピー
コードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8" />
<title>フォントカラーのオンライン例</p></title>
</head>
<本文>
<font color="#FF0000">私は赤いフォントです</font>
<テーブルの幅="300" 境界線="1">
<tr>
<td><font color="#0000FF">こんにちは</font></td>
<td></p></td>
</tr>
</テーブル>
</本文>
</html>

まず、フォントは通常のタグのペアです。タグにフォントのテキストコンテンツを入れ、フォントタグにカラーカラー+対応するカラー値を設定して、フォントタグオブジェクトにフォントカラーを設定します。

2. HTMLフォント設定フォント色の例

2-1. HTML フォントカラーの例の完全なコード:


コードをコピー
コードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8" />
<title>CSS フォントカラーのオンラインデモ</p></title>
<スタイル>
.</p>{color:#F00}
</スタイル>
<!-- HTML コメント: スタイル タグを使用してフォントの色を設定します -->
</head>
<本文>
<div class="</p>">フォントが赤です</div>
<div style="color:#00F">フォントは青です</div>
<!-- div タグの style 属性を使用してフォントの色を設定します -->
</本文>
</html>

上記の例では、フォントの色を個別に設定し、表内のフォントの色を設定しています。

2-2. フォント色の例のスクリーンショット

HTML フォント色設定例のスクリーンショット

2-3. オンラインデモ: ケーススタディを見る

フォントの色を変更するには、色の値を変更するだけです。

2. HTML p cssフォント色設定

CSS スタイルを使用して HTML のフォント色を設定します。

CSS を使用して HTML フォントの色を設定するには、タグ内の CSS と外部 CSS の 2 つの方法があります。

1. 基礎知識の紹介

外部 CSS を使用する場合は、CSS ファイルに CSS コードを別途配置し、html リンクを使用して CSS を導入する (html introduces css) か、html 内の <style> タグを使用して CSS を作成することができます。 HTML タグの style 属性を使用して CSS カラーを設定することもできます。

2. p+CSSの例のデモンストレーション

ここでは、HTML フォント カラー設定を実装する 2 つの方法を実践します。1 つはタグで CSS を使用する方法、もう 1 つはスタイル タグを使用してフォント カラー設定を実装する方法です。

3. 完全なHTMLソースコードの例


コードをコピー
コードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8" />
<title>HTML ハイパーリンクのフォント色設定のオンライン デモ</p></title>
<スタイル>
{ 色:#00F }
a:hover{ color:#F00}/* マウスがホバーしているときのフォント色*/
/* CSS コメント: 上記のコードは HTML 内のハイパーリンクのフォント色を設定するためのものです */
.div a{ 色:#090}
.div a:hover{ color:#090}
/* CSS コメント: 上記のコードは、HTML の .div オブジェクト内のハイパーリンクのフォント色を設定するためのものです */
</スタイル>
</head>
<本文>
<p>テストコンテンツの色を青に設定しました<a href="http://www.css.com">cSS</a></p>
<div class="div">私は div オブジェクトの中にいます。ハイパーリンクの色は <a href="#">私は緑色のハイパーリンクです</a></div>
</本文>
</html>

HTML でフォントの色を設定するには、<style> タグと p タグの style 属性を使用します。

4. P CSSケースのスクリーンショット

CSS フォント色設定例のスクリーンショット

5. CSS+P 事例オンラインデモ:事例を見る

3. HTMLハイパーリンクのフォント色設定

HTML でアンカー テキスト フォントの色を設定する方法は 2 つあります。1 つは、すべての HTML ハイパーリンクに統一されたフォントの色を設定する方法であり、もう 1 つは、指定されたオブジェクトのアンカー テキスト ハイパーリンク フォントに別の色を設定する方法です。

この記事では、HTML のハイパーリンク アンカー テキストのフォント色の統一設定と個別設定を例を通して紹介します。

1. 完全なp+css htmlコードは次のとおりです。

  1.  <!DOCTYPE html> <html>
  2.  <head> <meta charset="utf-8" />
  3.  <title>HTML ハイパーリンクのフォント色設定オンラインデモ </title> <style>
  4.  a{ color:#00F} a:hover{ color:#F00}/* マウスがホバーしているときのフォント色 */
  5.  /* CSS コメント: 上記のコードは、HTML 内のハイパーリンクの統一されたフォント色を設定するためのものです */ .p a{ color:#090}
  6.  .p a:hover{ color:#090} /* CSSコメント: 上記のコードは、HTMLの.pオブジェクト内のハイパーリンクのフォント色を設定するためのものです */
  7.  </スタイル> </ヘッド>
  8.  <body> <p>テストコンテンツの色を青に設定しました<a href="http://www..com"></a></p>
  9.  <p class="p">私は p オブジェクトの中にいます。ハイパーリンクの色は <a href="#">私は緑色のハイパーリンクです</a></p> </body>
  10.  </html>

ハイパーリンクの青いフォントは HTML の統一設定であり、緑のフォントは個別に設定されたハイパーリンクのフォント色です。

2. ハイパーリンクのフォント色の例のスクリーンショット

CSS ハイパーリンク フォントの例のスクリーンショット

3. オンラインデモ: ケーススタディを見る

上記の 3 つの p+CSS ケースはダウンロード用にパッケージ化されています。

今すぐダウンロード (2.928KB)

4. HTMLで要求される正確なフォント色を取得する方法

正確なカラー値を取得するには、通常、Photoshop (ps) ソフトウェアが使用されます。以下では、PS を使用して特定の場所のフォント カラー値を取得し、それを柔軟に適用して、フォント値を取得することで特定の場所の背景、画像、または境界線のカラー値を取得する方法について説明します。

上記の画像「CSS」の青の特定の色値を取得したいとします。

1. この画像をPSで開く

追伸：この画像を開いてください

2. PSツールの「前景色を選択」または「背景色を選択」ツールを使用します。

ここで赤いボックスの「前景色」ツールをクリックします

3. 「前景色の選択」タブがポップアップ表示されます

2 番目のステップの後、「前景色を選択」タブがポップアップ表示され、マウス ポインターがストローのようなアイコン「カラー ピッカー」に変わります。このとき、色の値を取得する必要がある場所をクリックします。画像が小さく、正確にクリックするのが難しい場合は、「ctrl+++」を使用して画像を連続的に拡大できます。

正確な色値「0000FF」を取得します

4.カラーを使用して取得したカラー値を設定します

色:#0000FF

ヒント：色の値を使用する場合は、通常、手動入力エラーを避けるために、PSから色の値を直接コピーすることをお勧めします。同時に、色の値の前に「＃」記号を追加することを忘れないでください。

5. HTMLフォントカラーのまとめ

ここでは、HTML フォント、CSS テキスト カラー、CSS ハイパーリンク フォント カラーの 3 つのフォント カラー設定を紹介します。また、PS を使用して正確なカラー値を取得する方法も紹介します。フォントや背景色の設定を柔軟に拡張できます。

<<:  Postman 自動インターフェーステストの実践

>>:  CSS3は小さな矢印のさまざまなグラフィック効果を実現します

推薦する

Ubuntu 16.04/18.04 に Pycharm と Ipython をインストールするチュートリアル

Ubuntu 18.04の場合1. sudo apt install python 。コマンドライン...

JS を使って 1 分で github+Jekyll ブログに訪問カウント機能を追加する実装

目次1分でgithub+Jekyllブログにトラフィック機能を追加する1. ジェクルとは何か1. J...

Vue コンポーネント化の一般的な方法: コンポーネント値の転送と通信

関連する知識ポイント親コンポーネントから子コンポーネントに値を渡す子コンポーネントから親コンポーネン...

マウスを動かしたときにセカンダリメニューバーを実装するために HTML+CSS を使用する例

この記事では、マウスを動かしたときにセカンダリ メニュー バーを実装するために HTML+CSS を...

Element-UI の Select と Cascader にポップアップ下部アクション ボタンを追加する方法

下図のように、 selectポップアップレイヤーの下部に操作ボタンを配置するのが一般的な設計方法です...

Mysql データベースのマスタースレーブ同期構成

目次Mysql マスタースレーブ同期構成1. 2つのmysqlをインストールする2. MySQL設定...

MySQL ページング中にオフセットが大きすぎる場合の SQL 最適化の経験の共有

問題を見つけるコンテンツをリストで表示すると、リスト内のコンテンツの数は多いかもしれませんが、ユーザ...

MYSQL5.6.33 データベース マスター/スレーブ (マスター/スレーブ) 同期のインストールと構成の詳細 (マスター-Linux スレーブ-windows7)

1. 設置環境Windows7 で MySQL5.6 データベースの解凍バージョンをアンインストー...

Dockerデータストレージのバインドマウントの詳細な説明

この記事を読む前に、Volumes について予備知識を身に付けておいてください。詳細については、こち...

Node.jsはexpress-fileuploadミドルウェアを使用してファイルをアップロードします

目次プロジェクトを初期化するサーバーの作成クライアントを初期化するコンポーネントの記述ファイルアップ...

.htaccess を使用して特定の IP からの Web サイトへのアクセスを禁止する方法

序文コストを考慮して、ほとんどのウェブマスターは、多数の小規模なウェブサイト用にサーバーを個別に購入...

JavaScript スタイル オブジェクトと CurrentStyle オブジェクトのケース スタディ

1. スタイルオブジェクトスタイル オブジェクトは単一のスタイル宣言を表し、スタイルが適用されている...

Docker が MySQL を作成する説明

1. MySQLイメージをダウンロードするコマンド: docker pull mysql 2. コン...

WeChat アプレット開発フォーム検証 WxValidate の使用

個人的には、WeChat アプレットの開発フレームワークは VUE と概ね似ていると感じていますが、...

ネイティブJSを使用した遅延読み込みlazyLoadの3つの方法の概要

目次序文方法1: 高コントラスト方法2: getBoundingClientRect() APIを使...