ホームページ > 記事 > ウェブフロントエンド > CSS の共通属性の色と単位
CSSコードの記述では色と単位の推定が必須ですが、CSSで色と単位の値を記述する方法はたくさんあるため、それを明確にする必要があります。
Color
私がフロントエンドを学んだばかりのとき、「Web ページの色を設定するにはどうすればよいですか?」という質問が浮かびました。一般的に、英語の色の名前または 16 進数の色の値。色を設定するために使用されますが、CSS には他にもより複雑な
の記述方法があります。
RGB カラー
コンピューターは、通常 RGB カラーと呼ばれる、赤、緑、青のさまざまなレベルを通じて新しい色を生成します。このような色生成の仕組みにより、異なる色のレベルを直接与えることで色を決定したり、3 つの色の値を自分で組み合わせたりすることができます。
書き込み:
h1{color:rgb(100%,100%,100%)} RGBカラー書き込みのパーセント、数値範囲は0%から100%です
h1{color:rgb(0,255,255) )} デジタル RGB カラー書き込み方法、数値範囲は 0 ~ 255 です
注: 両方の書き込み方法の値はトリミングされ、パーセンテージは 0% ~ 100% にトリミングされます。 100%を超える場合は100%にトリミングされ、0未満の場合は0〜255にトリミングされます。また、この2つを混合することはできません。混合書き込みは有効になりません。
16進数の色とカラー名の設定色についてはこれ以上触れません
単位
長さの単位: 一般に絶対単位と相対単位に分けられます。絶対単位は誕生以来ほとんど使用されておらず、少なくとも私はプロジェクトで使用することはほとんどありません。したがって、ここでは絶対単位の導入は省略します。
相対単位: em、ex、px の 3 つの相対長単位があります。最初の 2 つはそれぞれ「要素のフォントの高さ」と「shezhi'x' の文字の高さ」を表し、最後の px は「ピクセル」を表します。
相対的には、モニターの解像度に依存するためです。
em: CSS では、「em」は特定のフォントのフォント サイズの値です。唯一の例外はフォント サイズを設定する場合です。この場合、em 値は親要素を基準にします。
as
body{font-size:20px;}
p{font-size:1em;}
px: ピクセル値pxに応じて設定します。たとえば、
body{font-size:20px;}
p{font-size:16px;}
p 要素のフォントのサイズは 16px
パーセント値: と比較同じ長さの単位の場合、パーセンテージは非常に単純に見えます。単なるパーセンテージ値です。例:
h1{line-height:150%;} すべての h1 の行の高さを通常の行の高さの半分に設定します。
つまり、パーセンテージは常に別の値を通じて計算されます。これについては、後の属性の説明で 1 つずつ説明します。さらに、一部の属性では、パーセンテージは正または負の値になる可能性がありますが、これは別の話です。
今日の内容はここまでです。少し汚い文章ですが、今後はもっと上手に書けると思います。
一般的な CSS 属性の色と単位に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。