ホームページ >ウェブフロントエンド >フロントエンドQ&A >var変数はCSSで使用できますか?
var変数はCSSで使用できますか?
- WBOYオリジナル
- 2022-06-06 16:57:422064ブラウズ
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
<!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's Republic of China.</p>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p>
<p>
<button>Yes</button>
<button>No</button>
</p>
</div>
</body>
</html>Output:
#(学習ビデオ共有: css ビデオ チュートリアル)
以上がvar変数はCSSで使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。