検索
ホームページウェブフロントエンドCSSチュートリアルCSSテキストのフォントカラーを設定する方法

この記事では主にCSSテキストのフォントの色(CSSカラー)の設定方法を紹介しますので、必要な方は参考にしてください

1.CSSの色(CSSカラー)を理解する

ここで紹介したいのは以下の内容です。 Web ページの色の設定における ;Web ページの色の規制と標準。

1. 一般的に使用される色には、フォントの色、ハイパーリンクの色、Web ページの背景の色、境界線の色が含まれます
2. 色の仕様と色の規制: Web ページでは RGB モードの色が使用されます

2. 色の基本知識

Web ページの使用は Web ページの重要な要素です。色を使用する目的は、特徴的で動的 (特にハイパーリンクで使用される) であり、美しいことです。同時に、色はさまざまな Web ページのスタイル表現要素の 1 つでもあります。CSS フォントの色について学びます。

w3c 標準および p CSS アプリケーションの色の従来の HTML カラーと CSS カラーの比較

CSS カラー カラー構文:

color:#000000;

CSS スタイルの color の直後に RGB カラー値 (#FFFFFF、#000000、#F00) を追加します
RGB カラー値は実際のレイアウト中に決定され、Photoshop (略して PS) 選択ツールを使用して取得できます。

オブジェクトのカラー スタイルを設定する 3 つ、2 つの方法

1. p タグでカラー カラー スタイルを使用します

www.jb51.net

2. CSS セレクターでカラー カラー スタイルの CSS コードを使用します:

.pcss5{color:#00F}
/* 设置对象pcss5内文字为蓝色 */

参考資料: CSS コメントを使用してこのスタイルを設定する手順は次のとおりです。CSS コメントを理解してください

3 p+CSS カラー スタイルの完全なケース:

CSSコード:

.pcss5{color:#00F}
/* 设置对象pcss5内文字为蓝色 */

HTMLコード:

<p> 
标签内使用color css样式
<p style="color:#F00">www.jb51.net 红色</p> 
</p> 
<p>外部样式表设置对象color颜色

<p class="pcss5">www.jb51.net 蓝色</p> 
</p>

4. 構造図の例:

上記では、タグ内のカラーカラースタイルとCSSコード内のカラーカラースタイルを使用しています。

4. テキストカラーコントロールは同じです

従来のHTMLとCSSのテキストカラーが同じ場合は、「color:」+「RGBカラー値」を使用します 色が黒テキストの場合は、「color」を追加します。 " 対応する CSS 属性セレクターに :#000;" 以上です。

5. Web ページの背景色の設定の違い

従来は「bgcolor=color value」を使用して背景色を設定していましたが、CSS では「background:」+ color value が使用されました。たとえば、背景を黒に設定します。これは、従来の Html 設定です。つまり、タグに「bgcolor="#000"」を追加すると、背景色が黒になります。W3C の場合は、常に「background:#000」になります。対応する CSS セレクターで「」を実行します。

6. 境界線の色の違いを設定します

従来の「bordercolor=value」、「border-color:」+色の値をCSSで設定します。例: 従来の HTML では、「bordercolor="#000"」を table タグに直接追加するだけです。現在の CSS では、境界線の色を黒に設定することを忘れないでください。スタイル (破線、実装)。

p+CSS カラー値の拡張知識:
カラー値は、キーワードまたは数値の RGB 仕様です。

16 のキーワードは Windows VGA パレットから取得されています: アクア、ブラック、ブルー、フクシア、グレー、グリーン、グレー、マルーン、ネイビー、オリーブ、パープル、レッド、シルバー、シアン、ホワイト、イエロー。

7. RGB カラーは 4 つのメソッドのいずれかを指定します

1. #rrggbb (例: #00cc00) (色の値を表すためにこれを使用することを強くお勧めします)
2. # の RGB (例: #0c0)
3. RGB(十,x,x) x は 0 から 255 までの包含的な整数 (RGB(0,204,0) など)
4.RGB(Y%, Y%, Y%) 、ここで y は包含的な整数です0.0 から 100.0 までの量 (RGB (0%、80%、0%) など)

8. 以下は RGB カラーテーブルです


もちろん、一般的な Web 開発ソフトウェアにはカラー値ピッカーがあります:

Web開発ソフトウェアDWソフトウェアのCSSカラーピッカー
CSSカラー値を取得するにはどうすればよいですか?
色の値を思い出せないのですが、アートワークとまったく同じ色の値を決定するにはどうすればよいですか?実際、これは非常に簡単です。通常、PS ソフトウェアの色認識ツールを使用して正確な色値を取得します。もちろん、他の特殊な色認識ツールを使用して正確な色値を取得することもできます。
9. CSS カラー カラー スタイルの概要
CSS スタイルを使用して、オブジェクト コンテンツのカラー スタイルを設定します。また、名前付き CSS クラス オブジェクトを使用して、そのカラー スタイルを設定することも、HTML タグ内で直接カラー スタイルを設定することもできます。上記では、テキストコンテンツの色を設定するこれら 2 つの方法についても詳しく紹介し、実践しました。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

グラデーション背景効果を実装するための JS および CSS コード

以上がCSSテキストのフォントカラーを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
2つの画像とAPI:製品のリクロッキングに必要なすべて2つの画像とAPI:製品のリクロッキングに必要なすべてApr 15, 2025 am 11:27 AM

最近、製品画像の色を動的に更新するソリューションを見つけました。したがって、製品の1つだけで、私たちはそれをさまざまな方法で色付けすることができます

毎週のプラットフォームニュース:サードパーティのコード、パッシブ混合コンテンツ、最も遅い接続のある国の影響毎週のプラットフォームニュース:サードパーティのコード、パッシブ混合コンテンツ、最も遅い接続のある国の影響Apr 15, 2025 am 11:19 AM

今週のラウンドアップでは、灯台はサードパーティのスクリプトに光を当て、安全なリソースが安全なサイトでブロックされ、多くの国の接続速度がブロックされます

独自の非JavaScriptベースの分析をホストするためのオプション独自の非JavaScriptベースの分析をホストするためのオプションApr 15, 2025 am 11:09 AM

サイトの訪問者と使用データを追跡するのに役立つ分析プラットフォームがたくさんあります。おそらく、特にGoogleアナリティクスが広く使用されています

それはすべて頭の中にあります:Reactヘルメットを使用してReact Poweredサイトのドキュメントヘッドを管理するそれはすべて頭の中にあります:Reactヘルメットを使用してReact Poweredサイトのドキュメントヘッドを管理するApr 15, 2025 am 11:01 AM

ドキュメントヘッドはウェブサイトの中で最も魅力的な部分ではないかもしれませんが、それに入るものは間違いなくあなたのウェブサイトの成功にとってそれと同じくらい重要です

JavaScriptのsuper()とは何ですか?JavaScriptのsuper()とは何ですか?Apr 15, 2025 am 10:59 AM

子のクラスでsuper()?を呼び出すJavaScriptを見たときに何が起こっているのか、Super()を使用して親のコンストラクターとSuperを呼び出します。そのアクセス

さまざまな種類のネイティブJavaScriptポップアップを比較しますさまざまな種類のネイティブJavaScriptポップアップを比較しますApr 15, 2025 am 10:48 AM

JavaScriptには、ユーザーインタラクション用の特別なUIを表示するさまざまな内蔵ポップアップAPIがあります。有名:

アクセス可能なWebサイトが構築が難しいのはなぜですか?アクセス可能なWebサイトが構築が難しいのはなぜですか?Apr 15, 2025 am 10:45 AM

先日、私は多くの企業がアクセス可能なウェブサイトを作るのに苦労している理由について、フロントエンドの人々とおしゃべりをしていました。アクセス可能なWebサイトがとても難しいのはなぜですか

「隠された」属性は目に見えて弱いです「隠された」属性は目に見えて弱いですApr 15, 2025 am 10:43 AM

あなたがそれがすべきだと思うことを正確に行うHTML属性があります:

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。