CSS_html/css_WEB-ITnose での変数の使用方法の詳細な説明-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS_html/css_WEB-ITnose での変数の使用方法の詳細な説明

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:42 AM

CSS の変数は、利便性、コードの再利用、より信頼性の高いコードベース、エラー防止機能の向上など、多くの利点をもたらします。

例

基本

CSS 変数を使用する場合、次の 3 つの主要なコンポーネントを知っておく必要があります:

カスタムプロパティ

var() 関数

:root 擬似クラス

カスタムプロパティ

もう知っている色、マージン、幅、フォントサイズなどの CSS の標準プロパティ。

次の例では、CSS color プロパティを使用しています。

:root { --base-font-size: 16px; --link-color: #6495ed; }p { font-size: var( --base-font-size ); }a { font-size: var( --base-font-size ); color: var( --link-color ); }

カスタムプロパティ は、単に私たち (CSS ファイルを作成した人) がプロパティの名前を定義することを意味します。 属性名をカスタマイズするには、プレフィックスとして -- を使用する必要があります。
黒の値を持つ text-color という名前のカスタム属性を作成したい場合は、次のようにすることができます:

body { color: #000000; /* The "color" CSS property */ }

var() 関数

カスタム属性を適用するには、

var() を使用する必要があります。 関数、それ以外の場合、ブラウザーはそれらが何を表しているのか分かりません。 p、h1、h2 のスタイルで --text-color を使用したい場合は、次のように var() 関数を使用できます:

:root { --text-color: #000000; /* A custom property named "text-color" */ }

これは次と同等です:

:root { --text-color: #000000; }p { color: var( --text-color ); font-size: 16px; }h1 { color: var( --text-color ); font-size: 42px; }h2 { color: var( --text-color ); font-size: 36px; }

:root pseudo-class

カスタム属性を配置する場所が必要です。カスタムプロパティは任意のスタイルルールで指定できますが、あらゆる場所にプロパティを定義することは得策ではありません。これは CSS の保守性と可読性にとって課題となります。

:root 疑似クラスは、HTML ドキュメントのルート要素を表します。これは、他のより具体的なセレクターを通じてカスタム属性値をオーバーライドできるため、カスタム属性を配置するのに適しています。

CSS 変数の利点

保守性

Web 開発プロジェクトでは、特定の CSS プロパティ値を再利用することがよくあります:

p { color: #000000; font-size: 16px; }h1 { color: #000000; font-size: 42px; }h2 { color: #000000; font-size: 36px; }

特定のプロパティ値を変更する必要がある場合、問題が明らかになります。

特に CSS ファイルが大きい場合にプロパティ値を手動で変更すると、時間がかかるだけでなく、エラーが発生する可能性があります。同様に、バッチ検索と置換を実行すると、他のスタイルルールに誤って影響を与える可能性があります。
CSS 変数を使用して書き換えることができます:

h1 { margin-bottom: 20px; font-size: 42px; line-height: 120%; color: gray; }p { margin-bottom: 20px; font-size: 18px; line-height: 120%; color: gray; }img { margin-bottom: 20px; border: 1px solid gray; }.callout { margin-bottom: 20px; border: 3px solid gray; border-radius: 5px; }

現在の顧客が、テキストの色が明るすぎて読みにくいため、テキストの色を変更したいと言っているとします。現時点では、更新する必要があるのは 1 行だけです。 CSS ルールの説明:

:root { --base-bottom-margin: 20px; --base-line-height: 120%; --text-color: gray; }h1 { margin-bottom: var( --base-bottom-margin ); font-size: 42px; line-height: var( --base-line-height ); color: var( --text-color ); }p { margin-bottom: var( --base-bottom-margin ); font-size: 18px; line-height: var( --base-line-height ); color: var( --text-color ); }img { margin-bottom: var( --base-bottom-margin ); border: 1px solid gray; }.callout { margin-bottom: var( --base-bottom-margin ); border: 1px solid gray; border-radius: 5px; color: var( --text-color ); }

CSS の可読性の向上

カスタム属性により、スタイルシートがより読みやすくなり、CSS プロパティ宣言がよりセマンティックになります。

このステートメント

--text-color: black;

を次のステートメント

background-color: yellow;font-size: 18px;

と比較してください。 yellow や 18px などの属性値は有用なコンテキスト情報を提供しませんが、--base-font-size や -- などを読むと、属性名はhighlight-colorと同じなので、他の人のコードでもこの属性値が何をしているのかすぐに分かります。

注意事項

大文字と小文字を区別します

カスタム属性は大文字と小文字が区別されます(通常のCSSルールとは異なります)

background-color: var( --highlight-color );font-size: var( --base-font-size );

カスタム属性値の解析

カスタム属性が繰り返し宣言される場合、その割り当ては通常のCSSカスケードに従いますそして継承ルール。たとえば、次の例:

HTML

:root { --main-bg-color: green; --MAIN-BG-COLOR: RED; }.box { background-color: var( --main-bg-color ); /* green background */ }.circle { BACKGROUND-COLOR: VAR(--MAIN-BG-COLOR ); /* red background */ border-radius: 9999em; }.box,.circle { height: 100px; width: 100px; margin-top: 25px; box-sizing: padding-box; padding-top: 40px; text-align: center; }

CSS

<body>  <div class="container">    <a href="">Link</a>  </div></body>

.container ルールが削除されると、リンクの色の値は緑色になります。

フォールバック値

var() 関数を使用する場合、最初のパラメーターから , で区切られた追加パラメーターとしてフォールバック属性値を割り当てることができます。次の例を見てください:

HTML

:root { --highlight-color: yellow; }body { --highlight-color: green; }.container { --highlight-color: red; }a { color: var( --highlight-color ); }

CSS

<div class="box">A Box</div>

フォールバック値パラメータが var() に渡されるため、div の背景色は赤でレンダリングされます。

無効な値

CSS プロパティに間違ったタイプの値を割り当てないように注意してください。

以下の例では、カスタム属性 --small-button に長さの単位が割り当てられているため、.small-button スタイルで使用すると無効になります (翻訳者注: color 属性の型の値が間違っているため)

div { --container-bg-color: black; }.box { width: 100px; height: 100px; padding-top: 40px; box-sizing: padding-box; background-color: var( --container-bf-color, red ); color: white; text-align: center; }

Aこれを回避する良い方法は、わかりやすいカスタムプロパティ名を付けることです。たとえば、上記のカスタム属性に --small-button-width という名前を付けます

CSS 変数のブラウザサポート

CSS 変数は非常に使いやすいですが、ブラウザのサポートはあまり良くありません:

または、ここをクリックしてリンク: var support

この記事は @Jacob Gube の「 Introduction to CSS Variables 」をもとに翻訳したものであり、翻訳内容に個人的な理解や考えが含まれておりますので、翻訳が良くない場合や間違っている点がございましたら、同業者の方にアドバイスをお願いいたします。この翻訳を転載する場合は、英語のソースを明記してください: http://sixrevisions.com/css/variables/。

声明

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

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。