ホームページ  >  記事  >  ウェブフロントエンド  >  CSSで変数を定義できるのでしょうか?

CSSで変数を定義できるのでしょうか?

WBOY
WBOYオリジナル
2022-04-27 18:41:342769ブラウズ

CSSで変数を定義できます。変数定義の構文は「--変数名」で、CSS で定義された変数名は大文字と小文字が区別されます。var() 関数を使用して変数を読み取ることができます。構文は「var(--変数名)」です。関数の 2 番目のパラメータは、変数のデフォルト値を表します。変数が存在しない場合は、このデフォルト値が使用されます。

CSSで変数を定義できるのでしょうか?

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

CSS で変数を定義できますか?

CSS で変数を使用できます。

CSS 変数を宣言する場合は、変数名の前に 2 つのハイフン (--) を追加します。変数名では大文字と小文字が区別されます。 --header-color と --Header-Color は 2 つの異なる変数です。

var() 関数は変数を読み取るために使用されます。

var() 関数は、2 番目のパラメーターを使用して変数のデフォルト値を表すこともできます。変数が存在しない場合は、このデフォルト値が使用されます。

2 番目のパラメータは内部のカンマやスペースを処理せず、パラメータの一部とみなされます。

css 変数使用例:

    :root{
      --base: yellow;
      --spacing: 10px;
      --blur: 10px;
    }

上記のコードは 3 つの変数を定義し、:root により誰でもアクセスできるようにします

    img{
      filter: blur(var(--blur));
      padding: var(--spacing);
      background: var(--base);
 
    }

上記では、以前に定義された変数を属性値として使用します。

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。