Var 変数は CSS で使用できます。var() 関数を使用して CSS 変数の値を挿入できます。CSS 変数は DOM にアクセスでき、この関数を使用して変数を読み取ることもできます構文は「var(変数名, 値)」で、2 番目のパラメーターの値を使用して変数のデフォルト値を表すことができます。

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css で var 変数を使用できますか?

var() 関数は、カスタム属性値を挿入するために使用されます。このメソッドは、属性値が複数の場所で使用される場合に便利です。

var() 関数は、CSS 変数の値を挿入するために使用されます。

CSS 変数は DOM にアクセスできます。つまり、ローカルまたはグローバル スコープで変数を作成したり、JavaScript を使用して変数を変更したり、メディア クエリに基づいて変数を変更したりできます。

CSS 変数を使用する優れた方法には、デザインの色が含まれます。同じ色を何度もコピーして貼り付ける代わりに、それらを変数に入れることができます。

var() 関数の構文は次のとおりです。

var(name, value)

name 必須。変数名 (2 つのダッシュで始まる)。

値 オプション。フォールバック値 (変数が見つからない場合に使用されます)。

var() の仕組み

最初に: CSS 変数はグローバル スコープまたはローカル スコープを持つことができます。

グローバル変数はドキュメント全体でアクセス/使用できますが、ローカル変数は宣言されているセレクター内でのみ使用できます。

グローバル スコープを持つ変数を作成するには、:root セレクターで変数を宣言します。 :root セレクターは、ドキュメントのルート要素と一致します。

ローカル スコープの変数を作成するには、それが使用されるセレクターで変数を宣言します。

次の例は上記と同じですが、ここでは var() 関数を使用します。

まず、2 つのグローバル変数 (--blue と --white) を宣言します。次に、var() 関数を使用して、変数の値をスタイルシートの後半に挿入します。

Example

使用 var() 函数

  
Welcome to Shanghai!
  
Shanghai is one of the four direct-administered municipalities of the People's Republic of China.
  
Shanghai is one of the four direct-administered municipalities of the People's Republic of China.
  

    Yes
    No
  

Output:

#(学習ビデオ共有: css ビデオ チュートリアル)

以上がvar変数はCSSで使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。