50

私はCSS初心者です。ある共通クラスを別のクラスに含めることは可能ですか?

例えば、

.center {align: center};
.content { include .center here};

css フレームワーク - Blueprintに出会いました。位置情報を HTML に入れる必要があります。

<div class="span-4"><div class="span-24 last">

そのため、ポジショニング属性を css ではなく html 内に配置します。レイアウトを変更する場合は、css ではなく html を変更する必要があります。

それが私がこの質問をする理由です。.span-4 を自分の css に含めることができれば、html タグで指定する必要はありません。

4

3 に答える 3

39

奇妙なことに、CSS は継承について語っていますが、クラスはこのように「継承」することはできません。あなたが本当にできる最善のことはこれです：

.center, .content { align: center; }
.content { /* ... */ }

また、このような「裸の」クラス セレクターを使用しないことを強くお勧めします。可能であれば、クラスに加えて ID またはタグを使用します。

div.center, div.content { align: center; }
div.content { /* ... */ }

私がこれを言うのは、セレクターを可能な限り広くすると、大きなスタイルシートを取得すると (私の経験では) 扱いにくくなってしまうからです。元のクラスを変更すると、望ましくないあらゆる種類のものが影響を受けるため、新しいクラス (.center2 など) を作成するポイントまで、意図しないセレクターが相互に対話することになります。

于 2009-10-16T04:58:37.057 に答える
14

ここで、Cascading Style Sheets の Cascading の出番です。

html 要素またはウィジェット/モジュール (ネストされた html 要素のグループ) をオブジェクトと考えてください。同じプロパティを共有するオブジェクトがあることはわかっているので、オブジェクトが利用できる再利用可能なクラスを作成する必要があります。

.baseModule {align: center;}

モジュールがメッセージ（エラー、フラッシュ...）であるとします。したがって、すべてのメッセージが中央揃えになるため、.baseModule クラスを「拡張」または「インクルード」します (最後の HTML の例を参照)。

.message {border: 1px solid #555;}

さらに、エラー メッセージの背景を赤にしたいとします。さらに、別の色や何かにしたい場合は、ここで .baseModule.message の border プロパティを上書きできます。

.error {background-color: red;}

これで、簡単に再利用できるいくつかの css 定義ができました。

<!-- Regular message module -->
<p class="baseModule message">
    I am a regular message.
</p>

<!-- Error message module -->
<p class="baseModule message error">
    I am an error message. My background color is red.
</p>

これをあなたの質問に関連付けるには、基本的に複数のクラス名を活用して再利用性を最大限に高めます。確かに ie6 は連鎖セレクター (class1.class2.class3) をサポートしていませんが、それでも巧妙なトリックです!

于 2009-10-16T05:41:06.530 に答える
14

標準の CSS では、これを行うことはできませんが、できれば便利です。

そのようなものについては、CSS に「コンパイル」する SASS などを使用する必要があります。

于 2009-10-16T04:59:21.707 に答える