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() 関数

var() 関数を使用して、変数を指定しない場合、ブラウザはカスタム属性が何であるかを認識できません。

var() 関数は、属性のデフォルト値を表す 2 番目の属性を指定することもできます。

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 サイトの他の関連記事を参照してください。