この記事では主に CSS 変数の分析を紹介しますが、これを必要な友達に共有します。 CSS 変数では、SASS や LESS などのプリコンパイラーのみを使用できます。新しいドラフトのリリースにより、CSS で変数を直接定義して使用することはもはや夢物語ではなくなりました。この記事では、CSS変数について詳しく紹介します
基本的な使い方
CSS変数は、CSS作成者によって定義され、ドキュメント全体で再利用される特定の値を含むエンティティです。カスタム属性を使用して変数名を設定し、特定の var() を使用してアクセスします
互換性: モバイルおよび IE ブラウザーには互換性がありません
【変数の宣言】
変数は
で始まる必要があります。たとえば、 --example-variable: 20px は、 --example-varibale 変数に 20px を割り当てることを意味します 変数を宣言するステートメントを任意の要素内に配置できます。グローバル変数を設定したい場合は、次のように設定できます。 : root、body、またはhtml:root{
--bgColor:#000;
}-- 変数宣言は通常のスタイル宣言文と同様に、インラインスタイルも使用できます<body style="--bgColor:#000">
変数宣言文は要素内に含める必要があり、ランダムに配置することはできません
//错误 <style> --bgColor:#000; </style>
【変数を使う】
var( ) 関数を使用すると、変数を使用するため、どこでも使用できます。例: var(--example-variable) は、--example-variable
<body style="--bgColor:#000;">
<p style="width: 100px;height: 100px;background-color: var(--bgColor)"></p> </body>に対応する値を返します。 var() 関数には、変数が値を取得できない場合にデフォルト値を設定するオプションのパラメーターもあります。デフォルト値
<body>
<p style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></p> </body>継承とカスケード
通常のスタイル属性と同様に、変数属性も継承とカスケードをサポートします。以下の例では、body 要素の変数値は緑、p 要素の変数値は赤です。カスケードの原理に基づいて、p 要素の最終的な背景色は赤です
<body style="--bgColor:green;">
<p style="width: 100px;height: 100px;--bgColor: red;background-color: var(--bgColor,pink)"></p> </body>組み合わせと計算
【組み合わせ】
CSS変数を組み合わせて使うことができます
<style>.box{
--top:20%;
--left:30%;
width: 100px;
height: 100px;
background-image: url(img/24/xiaoshu.jpg);
background-position: var(--left) var(--top);}</style><p class="box"></p>ただし、CSS変数はvar(--color1)var(--color2)という形式で組み合わせるとブラウザで認識されません。 var(--color1) var(--color2) などは #333 として解析されますが、これもブラウザでは認識されません
<style>.box{
--color1:#;
--color2:333;
width: 100px;
height: 100px;
background-color: var(--color1)var(--color2);}</style><p class="box"></p>【計算】
変数は通常のスタイルの値と組み合わせたものと同じです。 , 計算には calc を使うこともできます
<style>.box{
--borderWidth:2px;
width: 100px;
height: 100px;
background-color:lightblue;
border-left: calc(var(--borderWidth) * 2) solid black;}</style><p class="box"></p>JS
CSS 変数は JS Interaction と対話できます。 getPropertyValue() メソッドと setProperty() メソッドのみを使用でき、スタイル属性
[style 属性]
<p id="box" style="--color:lightgreen;background-color: var(--color)"></p> <script> var oBox = document.getElementById('box'); console.log(oBox.style['--color']); //undefined</script>
[getPropertyValue()]
<p id="box" style="--color:lightgreen;background-color: var(--color)"></p> <script> var oBox = document.getElementById('box'); console.log(oBox.style.getPropertyValue('--color'));//'lightgreen'</script>
[setProperty()]
<style>#box{
--color:lightgreen;
background-color: var(--color);
width: 100px;
height: 100px;
display:inline-block;}</style><button id="btn" type="button">变浅蓝</button><p id="box"></p> <script>var oBox = document.getElementById('box');var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
oBox.style.setProperty('--color','lightblue');
}</script>not は使用できないことに注意してください。サポートされています
特に注意すべき点は、変数がサポートされていないことです!重要
.box{
--color:red;
width: 100px;
height: 100px;
background-color:--color !important;
}</style><p class="box"></p>Chrome ブラウザのスクリーンショットは次のとおりです
目的
1. 保守性
カラースキームまたはサイズスキームを維持するWeb ページの意味 一部のスタイルは CSS ファイル内で複数回出現し、繰り返し使用されます。プランを変更する場合、特定のスタイルを調整する場合でも、プラン全体を完全に変更する場合でも、複雑な問題になります。このとき、CSS 変数が役に立ちます
:root{
--mainColor:#fc0;
}
.p1{
color:var(--mainColor);
}
.p2{
color:var(--mainColor);
}2. 意味化。
変数の2番目の利点は、名前自体に意味情報が含まれていることです。 CSS ファイルが読みやすく、理解できるようになります。 main-text-color は、ドキュメント内の #fc0 よりも理解しやすいです。特に、同じ色が異なるファイルに表示される場合に便利です
3. @media メディア クエリを実装すると便利です
一般的に、メディア クエリは次のとおりです
<style>.box{
width: 100px;
height: 100px;
padding: 20px;
margin: 10px;
background-color: red}@media screen and (max-width:600px) {
.box{
width: 50px;
height: 50px;
padding: 10px;
margin: 5px;
}}</style><p></p> ただし、変数を使えばコードを効率化できます
<style>.box{
--base-size:10px;
width: calc(var(--base-size) * 10);
height: calc(var(--base-size) * 10);
padding: calc(var(--base-size) * 2);
margin: calc(var(--base-size) * 1);
background-color: red;}@media screen and (max-width:600px) {
.box{
--base-size:5px;
}}</style><p class="box"></p>以上がこの記事の全内容であり、皆様の学習に役立つことを願っております。
関連する推奨事項:
CSSの位置属性の分析
以上がCSS変数の解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Google Fontsをタグ付けし、Goofonts.comを作成する方法Apr 12, 2025 pm 12:02 PMGoofontsは、開発者妻とデザイナーの夫によって署名されたサイドプロジェクトであり、どちらもタイポグラフィの大ファンです。 Googleにタグを付けています
時代を超越したWeb開発記事Apr 12, 2025 am 11:44 AMPavithra Kodmadは、彼らが変化したWeb開発に関する最も時代を超越した記事のいくつかであると考えていることについて、人々に推奨事項を求めました
graphQlの練習JavaScript APIでクエリをクエリしますApr 12, 2025 am 11:33 AMGraphQL APIの構築方法を学ぶことは非常に挑戦的です。ただし、10分でGraphQL APIを使用する方法を学ぶことができます！そして、それは私が完璧になったことがあります
円にタイプを設定します...オフセットパス付きApr 12, 2025 am 11:00 AMここでは、Yuanchuanからの合法的なCSSの策略があります。このCSSプロパティオフセットパスがあります。むかしむかし、それはモーションパスと呼ばれ、その後改名されました。私
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
