ホームページ >ウェブフロントエンド >htmlチュートリアル >htmlとcssでの色の使い方のまとめ

htmlとcssでの色の使い方のまとめ

伊谢尔伦
伊谢尔伦オリジナル
2017-06-09 11:03:431669ブラウズ

HTML では、色は次の 3 つの方法で表現できます: 色名、RGB 値、または HEX 値。実際の開発では、色を使用してさまざまなことができます。また、フォントの色の効果をカスタマイズして、境界線、フォント、画像などに必要なさまざまな色の効果を設定することもできます。この記事ではHTMLとCSSでの色の使い方を中心に紹介します。

まず、PHP 中国語 Web サイトに関連する無料コースを学習できます

1。「HTML/CSS クイック スタート」

htmlとcssでの色の使い方のまとめ2 の章のコースを学習します。

「Dark Horse Programmer HTML ビデオチュートリアル」

カラーコードビデオチュートリアル

htmlとcssでの色の使い方のまとめ

html、CSSでの色の使用法

1. htmlのさまざまな一般的な色の数値(コレクション) )

HTML では、色は色名、RGB 値、または HEX 値で表すことができます。 RGB rgb (赤、緑、青) の 3 つの変数は、3 原色の濃度 (0 ~ 255) です。たとえば、rgb (255,0,0) red rgb (0,0,0) black rgb (255,255,255) です。白のHEX 16進数は16を表します 10進法: 0~255 16進数への変換: 00~FF

2色の設定に使用できるコンテキスト プロパティが 2 つあることを確認します。

ストロークスタイルは、現在描画している線の色を決定します。

fillStyle は、現在塗りつぶしている領域の色を決定します。

色の値は CSS3 Any にのみ準拠します。カラー値の標準の有効な文字列を使用できます。

3.

CSS3 RGBAカラーモードの使用例コードの詳細説明

RGBAカラーモードは、RGBカラーモードを拡張し、赤、青、緑の三原色に基づく不透明度パラメータを追加します。構文は次のとおりです。

rgba(r,g,b,)

ここで、r,g,b は、赤、青、緑の 3 原色の比率を表します。値は整数またはパーセンテージで、正の整数値の範囲は 0 ~ 255、パーセンテージ値の範囲は 0.0% ~ 100.0% です。範囲外の値は最も近い値の制限に切り捨てられます。すべてのブラウザがパーセンテージ値の使用をサポートしているわけではないことに注意してください。 4 番目のパラメータ は、0 ~ 1 の値で不透明度を表します。

4.

Css グラデーションの色抜けマーク埋め込みフォントテキストシャドウの詳細紹介

CSS3 グラデーションは線形グラデーション(linear)と放射状グラデーション(radial)に分けられます。レンダリング エンジンが異なると、グラデーションを実装するための構文が異なるため、ここでは線形グラデーションの W3C 標準構文に基づいてその使用法のみを分析します。残りについては関連情報を参照してください。 W3C 構文は、IE10 以降、Firefox19.0 以降、Chrome26.0 以降、Opera12.1 以降などのブラウザでサポートされています。

5.

高品質な Web デザイン: 例とヒント No. 6 (色の可能性を最大限に活用する)

Summertime in Tennessee (テネシー夏の観光) は、活気があり、明るく、とても暖かいサイトです。すべてが夏のアクティビティを促進するようにデザインされています。このサイトでは、さまざまな色合いの彩度の高い色を幅広く使用していますが、どの色も的を射ており、テーマに不適切なものはありません。高品質なデザインの色の組み合わせは、そのデザインが提示するサービスや製品と密接に関連している必要があります。優れたデザインでは、必ずしも驚くべき色を選択する必要はありません。最も明白で使用すべき色を使用すると、より良い効果が得られます。たとえば、地獄のデザイン(地獄のデザイン)では、地獄を象徴する燃えるような赤色を使用しないのは単純に無理があります。

6.

CSS3 チュートリアル (3): border-color Web ページの境界線の色

境界線の幅を X ピクセルに設定すると、これで X タイプを使用できます。ボーダーの色。各色は 1 ピクセルの幅を表示します。境界線の幅が 10 ピクセルで、5 色または 6 色しか宣言されていない場合は、最後の色が残りの幅に追加されます。

関連する質問と回答

1. ブラウザの不透明度と rgba の効果は、Android および iOS プログラムで使用される色の透明効果とは大きく異なります。

2. CSS3 の hsl カラー モードがほとんど使用されないのはなぜですか?

【関連おすすめ】

1. php中国語ウェブサイトの無料ビデオチュートリアル: 「php.cn Dugu Jiijian (2)-cssビデオチュートリアル」

2 php中国語ウェブサイトの無料チュートリアル: 「」で学習します。指先」 HTML+CSS》

以上がhtmlとcssでの色の使い方のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。