CSS 変数と継承_html/css_WEB-ITnose

はしがき

Baixing.com のフロントエンド アーキテクトである CSS Magic による私の友人の「CSS Revealed」が出版および配布されており、彼は私にコピーをくれました。贈り物。この本を読むと、CSSのテクニックが本当にたくさんあることが分かりました。あなたはかなり多くのものを得るでしょう、それで彼がここでそれを宣伝するのを手伝ってください！今日取り上げた事例も部分的にはこの本を参考にしています。今回はCSS変数と継承についてお話します！

CSS にどうやって変数や継承を持たせることができるのかと言う人もいるかもしれません。 CSSプロセッサのことを言っているのでしょうか？

いいえ、私は純粋な CSS について話しています。実際、CSS はさまざまなプリプロセッサーの特性と記述方法を組み込もうとしています。たとえば、次のようなプロパティもあります。 >

calc 計算については、以前の記事を参照してください。 http://www.haorooms.com/post/css_unit_calc

この種のパーセンテージと単位の演算は、プリプロセッサでは実行できません。

早速、本題に入りましょう。

css 変数

実際、私が話している変数は CSS プロセッサーのカスタム変数ではなく、変数のような関数を持つ CSS の特定のプロパティです。

この属性は currentColor です

currentColor の適用

1. 画像と currentColor をくり抜きます

コードは次のとおりです:

説明: アイコンのデフォルトの背景色 currentColor は、リンクの色を使用します。リンクの色が変更されると、アイコンの背景色も変更されます。

.icon {    display: inline-block;    width: 16px; height: 20px;    background-image: url(http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/sprite_icons.png);    background-color: currentColor; /* 该颜色控制图标的颜色 */}.link:hover { color: #333; }/* 虽然改变的是文字颜色，但是图标颜色也一起变化了 */

2. すべての hr の色をテキストの色と一致させる必要がある場合は、currentColor を使用して次のように記述できます。

テキストの色が変わると、HR も自動的に変わります。

hr{height:.5em;background:currentColor}

css 継承

継承属性を使用します

これにはフォントの設定など、多くの用途があります。フォームのフォントはフォームの他の部分と同じである必要があります。ページのルールを繰り返す必要はありません。他のルールを継承するだけです。

ハイパーリンクの色は他の色と同じで、以下を使用できます。

input,select,button{font:inherit}

プロンプト ダイアログ ボックスの小さな矢印は、以下を含むダイアログ ボックス全体と一致している必要があります。境界線と背景には、継承を使用できます

a{color:inherit}

ダイアログ ボックスについては、以前の記事でも CSS でダイアログ ボックスを記述する方法について説明しましたが、この書き方ではダイアログ ボックスの境界線を制御するのが困難です。アプリケーションは以下から！

コードは次のとおりです。

背景と境界線は吹き出しを継承するため、記述がより便利になります。

.callout{position:relative;width:300px;height:200px;background-color:#ccc;border:1px solid red;}.callout::before{content:"";position:absolute;top:-.4em;left:1em;padding:.35em;background:inherit;border:inherit;border-right:0;border-bottom:0;transform:rotate(45deg);}//先写一个正方形，然后旋转45度变为三角形

一般的に使用される CSS については、次を参照してください: http://www.haorooms.com/post/css_common

元のアドレス: http://www.haorooms.com/post/ css_inherit_bl

この記事はオリジナルです。転載する場合はその旨を明記してください: haorooms フロントエンド ブログ http://www.haorooms.com/