CSSの色の探索

<p> CSS色のマスター：包括的なガイド

<p>前のレッスンでは、CSSセレクターを調査しました。次に、色の変更から始めて、選択した要素の外観を操作する方法を学ぶことで、その知識を築きましょう。このガイドは、色名、16進コード、RGB値、HSL形式など、CSSの色を定義するためのさまざまな方法をカバーしています。 前に示されているように、HTML要素を選択した後（例：a

段落）、<p>プロパティを使用してそのテキスト色を変更できます：<p> color

同様に、

<code class="language-css">p {
  color: red;
}</code>

プロパティは要素の背景を変更します：<p> background-color

CSSは「Red」や「Darkorange」などの一般的な色の名前をサポートしていますが、すべての可能な色合いを網羅していません。 正確なカラーコントロールのために、RGB、HEX、およびHSLカラーモデルはより大きな柔軟性を提供します。

<code class="language-css">p {
  background-color: darkorange;
}</code>

rgbカラーモデル<p>

RGB（赤、緑、青）は、コンピューターシステムの色表現の基礎を形成します。 これらの3つの主要な色を混ぜると、幅広い色合いが生成されます。

関数はRGBの色を定義します：

<p> 各パラメーター（rgb()、

、

<code class="language-css">rgb(<red>, <green>, <blue>)</code>

）は、各色コンポーネントの強度を表す0〜255の間の整数値を受け入れます。 0は最も弱い強度を示し、255が最も強いことを示します。たとえば、<p> red 異なる強度を組み合わせると、多様な色が生成されます：green blue

rgb値を視覚的に選択するには、カラーピッカーツールを強くお勧めします。数値値だけから結果の色を予測することは困難です。

<code class="language-css">p {
  color: rgb(255, 0, 0); /* Equivalent to color: red; */
}</code>

<p>

<code class="language-css">p {
  color: rgb(168, 189, 45);
}</code>

アルファチャネルを追加することにより、<p>関数は

を拡張します：<p>

<p>パラメーター（0.0〜1.0）は透明性を制御します。 0.0は完全に透明であり、1.0は完全に不透明です：rgba() rgb()

<code class="language-css">rgba(<red>, <green>, <blue>, <alpha>)</code>

<p> alpha16進モデル

<code class="language-css">p {
  color: rgba(167, 189, 45, 0.408);
}</code>

16進数は16進表記を使用します：<p>

シンボルは、6桁の16進コードの前にあります。 それぞれのペア（

、<p>、

）は、それぞれ00（0小数）からFF（255小数）までの赤、緑、青のコンポーネントを表します。 たとえば、

<code class="language-css">#rrggbb</code>

<p> 8桁の16進コードを使用して透明性を追加できます：# rr ggbbはアルファチャネル（00〜FF、0.0〜1.0にマッピング）を表します。

<code class="language-css">p {
  color: #ff0000; /* Equivalent to color: rgb(255, 0, 0); and color: red; */
}</code>

これは<p>。

に相当します

<code class="language-css">#rrggbbaa</code>

<p>aa

HSLカラーモデル

<p>HSL（色相、飽和、軽さ）は、グラフィックデザイナーに馴染みのあるカラーモデルです。 hsl()関数は使用します：

<code class="language-css">p {
  color: red;
}</code>

<p>hueカラーホイール上の色の位置（0〜360度）を表します。

<p>

<p>（0％から100％）は、色の強度を示します（0％は灰色、100％はフルカラーです）。 saturation

<p>

（0％〜100％）追加された黒または白の量を決定します（0％は黒、100％は白です）。 <p> lightness

<p>透明性のためのアルファチャネルを追加します：

<p> hsla()

これは

<code class="language-css">p {
  background-color: darkorange;
}</code>

および

<code class="language-css">rgb(<red>, <green>, <blue>)</code>

。<p>に相当します #a7bd2d68さらなる調査rgba(167, 189, 45, 0.408)

CSSを使用してマルチカラムレイアウトを作成します

CSSグリッドレイアウトのマスタリング
• CSSを使用したFlexBoxレイアウトの構築

以上がCSSの色の探索の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。