優れた印刷デザインは、成功したウェブサイトの重要な部分です。 CSSを使用すると、作成するWebページのWebページ上のテキストの外観をきめ細かく制御できます。 これには、使用するフォントの色を変更する機能が含まれます。
フォントの色は、 外部スタイルシート 、 内部スタイルシート 、またはHTML文書内のインラインスタイルを使用して変更することができます。 ベストプラクティスでは、CSSスタイルに外部スタイルシートを使用する必要があります。 内部スタイルシートは、ドキュメントの「先頭」に直接書かれたスタイルで、通常は1ページ分の小さなサイトにのみ使用されます。 インラインスタイルは、何年も前に扱った古い "フォント"タグに似ているので避けてください。 これらのインラインスタイルは、インラインスタイルのすべてのインスタンスでフォントスタイルを変更する必要があるため、フォントスタイルを管理するのが非常に難しくなります。
この記事では、外部スタイルシートと段落タグで使用されるスタイルを使用してフォントの色を変更する方法を学習します。 同じスタイルプロパティを適用して、
タグを含め、テキストを囲む任意のタグのフォント色を変更することができます。フォントの色を変更するためのスタイルの追加
この例では、ページマークアップ用のHTMLドキュメントと、そのドキュメントにアタッチされた別のCSSファイルが必要です。 HTML文書は、その中にいくつかの要素を作っているでしょう。 この記事の目的で懸念しているのは段落要素です。
外部スタイルシートを使用して段落タグ内のテキストのフォント色を変更する方法は次のとおりです。
カラー値は、カラーキーワード、RGBカラーナンバー、または16進カラーナンバーとして表現できます。
- 段落タグのスタイル属性を追加します。
- p {}
- スタイルにcolorプロパティを配置します。 そのプロパティの後にコロンを置きます：
- p {色：}
- 次に、プロパティの後ろに色の値を追加します。 その値をセミコロンで終わらせてください：
- p {color：black;}
あなたのページの段落は黒になります。
この例では、 "black"というキーワードが使用されています。 これがCSSで色を追加する方法の1つですが、これは非常に限定的です。 「黒」と「白」のキーワードを使用するのは簡単ですが、その2つの色は非常に特殊ですが、「赤」、「青」、「緑」などのキーワードを使用するとどうなりますか？ 赤、青、緑のどのような色合いが得られますか？ キーワードでどの色合いを使用するかを正確に指定することはできません。 このため、カラーキーワードの代わりに16進値が使用されることがよくあります。
p {色：＃000000; }
このCSSスタイルは、＃000000の16進コードが黒に変換されるため、段落の色を黒に設定します。 あなたはその16進値で省略表現を使用して＃000だけ書くこともでき、同じことができます。
すでに述べたように、黒または白ではない色が必要な場合は、16進値がうまく機能します。 次に例を示します。
p {color：＃2f5687; }
この16進値は段落を青色に設定しますが、キーワード "青"とは異なり、この16進数コードは非常に明確な青色の設定を可能にします。このウェブサイト。 この場合、色は中間色のスレート状の青色になります。
最後に、RGBAカラー値をフォントカラーに使用することもできます。 最近のすべてのブラウザでRGCAがサポートされているため、これらの値はWebブラウザでサポートされないという心配はありませんが、簡単なフォールバックを設定することもできます。
p {color：rgba（47,86,135,1）; }
このRGBA値は、先に指定したスレート青色と同じです。 最初の3つの値は赤、緑、青の値を設定し、最後の数値はアルファ設定です。 これは "100％"を意味する "1"に設定されているので、この色は透明ではありません。 それを.85のような10進数に設定すると、85％の不透明度に変換され、色はわずかに透明になります。
あなたの色の値を弾丸にしたい場合、これを行うでしょう：
p {
色：＃2f5687;
色：rgba（47,86,135,1）;
}
この構文は、16進コードを最初に設定します。 次に、その値をRGBA番号で上書きします。 つまり、RGBAをサポートしていない古いブラウザでは最初の値を取得し、2番目の値は無視します。 最新のブラウザでは、CSSカスケードごとに2番目のブラウザを使用します。