ホームページ > 記事 > ウェブフロントエンド > CSSで変数は使えるのでしょうか?
css では変数を使用できます。 CSS では、変数は CSS 作成者によって定義されたエンティティであり、ドキュメント全体で再利用される特定の値が含まれています。カスタム プロパティを使用して変数名を設定し、var() 関数を使用して変数名を読み取ります。
このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。
CSS 変数には現在 2 つの形式があります:
変数には正当な識別子と正当な値があります。どこでも使用できます。変数は var() 関数を使用して使用できます。例: var(--example-variable) は、--example-variable
カスタム属性に対応する値を返します。これらのプロパティは、名前として特別な形式 --*where* を使用します。たとえば、--example-variable: 20px; CSS 宣言ステートメントも同様です。これは、 --example-varibale 変数に 20px を割り当てることを意味します。
CSS 変数を使用するときに知っておくべき 3 つの主な事項
カスタム属性
var( ) function
: ルート擬似クラス
##1. カスタム属性
再利用を定義できます属性をカスタム属性として保存しておくと、将来変更する必要があるときに、カスタム属性の属性値を変更するだけで済みます。:root { --textColor: #444; }上記のコードはカスタム属性です。カスタム属性は --
3 で始まることに注意してください。 var() 関数
p { color: var(--textColor); }p タグの文字色は、上記のコードのように と記述すると、
p { color: #444; }
と同じになります。 3 、ルート擬似クラス
ルート擬似クラスについて説明する前に、まず CSS カスタム属性のスコープの問題について話さなければなりません同じ CSS カスタム属性を使用できますセレクター内で複数宣言されている場合、読み込む際に最も優先度の高い属性が有効になりますbody { --bgColor: red; } .content { --textColor: blue; }上記のコードでは、-bgColorのスコープはbody、--textColorのスコープは.contentです。このため、カスタム属性をルート要素 (root) に配置して、どのセレクターでも読み取れるようにすることが最善です。 (学習ビデオ共有:
css ビデオ チュートリアル )
以上がCSSで変数は使えるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。