CSS では、変数はカスタム属性を指します。カスタム属性は、正当な識別子と正当な値を持ち、どこでも使用できます。 CSS 変数は DOM にアクセスできるため、開発者はローカルまたはグローバル スコープの変数を作成したり、JavaScript を使用して変数を変更したり、メディア クエリに基づいて変数を変更したりすることができます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
CSS カスタム プロパティは CSS 変数とも呼ばれます。変数には法的な識別子と法的な値があり、どこでも使用できます。 var() 関数を通じて変数を使用します。例:var(--example)
は、--example に対応する値を返します。
var() 関数は、CSS 変数の値を挿入するために使用されます。
CSS 変数は DOM にアクセスできます。つまり、ローカルまたはグローバル スコープで変数を作成したり、JavaScript を使用して変数を変更したり、メディア クエリに基づいて変数を変更したりできます。
CSS 変数を使用する優れた方法には、デザインの色が含まれます。同じ色を何度もコピーして貼り付ける代わりに、それらを変数に入れることができます。
#基本的な使用法:
#
element { --main-bg-color: brown; }
element { background-color: var(--main-bg-color); }
:root { --global-color: #666; --pane-padding: 5px 42px; }
.demo{ color: var(--global-color); }
:root は CSS 疑似クラスであり、ルートと一致します。ドキュメントツリー要素の。 HTML の場合、:root は要素を表し、優先順位が高いことを除けば html セレクターと同じです。したがって、通常はカスタム属性を :root{} に記述し、HTML タグ内の要素はそれを継承します。
CSS カスタム プロパティはカスケードできます。各カスタム プロパティは複数回出現でき、変数の値はカスケード アルゴリズムとカスタム プロパティ値を使用して計算されます。
CSS 変数は ! important 宣言をサポートしていません。これは単なる宣言であることに注意してください。
(学習ビデオ共有:
css ビデオ チュートリアル以上がCSSの変数とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。