var変数はCSSで使用できますか?-フロントエンドQ&A-php.cn

var変数はCSSで使用できますか?

WBOY

リリース： 2022-06-06 16:57:42

オリジナル

2095 人が閲覧しました

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

var変数はCSSで使用できますか?

このチュートリアルの動作環境: 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

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}
</style>
</head>
<body>
<h1>使用 var() 函数</h1>
<div class="container">
  <h2>Welcome to Shanghai!</h2>
  <p>Shanghai is one of the four direct-administered municipalities of the People&#39;s Republic of China.</p>
  <p>Shanghai is one of the four direct-administered municipalities of the People&#39;s Republic of China.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>
</body>
</html>

ログイン後にコピー

Output:

var変数はCSSで使用できますか?