4

私はここで私が理解できないように見える問題を抱えています、今まで私のcssは少しスラップダッシュでした、そしてそれが正しく見えるまでそれはいつもハックのケースでした、しかし私はそれを正しく学ぶことに決めましたそして私はできる限り物事を分類しようとしています。

だから私は順序付けられていないリストを持つレイアウトを持っています、このリストには3つのliタグがあり、これらのliタグのそれぞれの中にそれぞれ2つのdivがあります。

これで、これらのコンテナごとにクラスができました。container_1container_2などと呼ぶことができます。

現在、それらはそれぞれにいくつかの固有の属性を持っていますが、それらはすべてセットスタイルに従います。たとえば、各liのdivは並んでいるため、2つのdivのセットもすべて丸い角になります。

したがって、クラスクラスrounded_cornersに加えてfloat_leftとfloat_rightを作成できると思ったので、コードを再入力してトウモロコシを丸めたり、何かをフロートさせたりする代わりに、次のようなクラスを参照できます。

.container_1 .rounded_corners .float_left
{

}
 .container_2 .rounded_corners .float_right
{

}

しかし、これを使用すると、スタイリングが失われるため、コンマを使用しました。これにより、divが戻るようにスタイリングできましたが、コーナーとフロートが機能しませんでした。

だから私はこれでどこが間違っているのですか？

これは私のコードです。レイアウトを壊すコードを取り出しましたが、コメントを削除すると、何が起こるかを確認できます。

http://jsfiddle.net/ragebunnykickass/g3Zaz/

名前は少し異なりますが、意味がわかります。

ありがとう。

4

3 に答える 3

16

CSS クラスは継承できないため、可能な限りアトミックになるように分割する必要があります。たとえば、角丸クラスがあり、コンテナに適用できる場合:

.rounded-corners
{
   /* Your CSS to define rounded corners */
}

丸みを帯びた角のプロパティのみを定義することに注意してください。ここで、コンテナのスタイルを設定するクラスがあるとします (たとえば、適切なパディングを使用):

.container
{
    /* Your CSS to define a nice container */
}

それらを組み合わせる方法は？これは CSS ではなく HTML で行われます。この例では、これはと<div>の両方から継承されます。containerrounded-corners

<div class="container rounded-corners">
</div>

非コンテナ オブジェクトの角を丸くする必要があるとします。

<div class="rounded-corners">
</div>

これがCSSの仕組みです。それらを（名前のために）オブジェクト指向言語のクラスと比較しないでください。各クラスは、そのクラスに属するすべての要素に適用される一連の属性を定義します。最終的な要素スタイルは、要素が属する各クラスから継承された属性の構成です。

注: 要約すると、答えは「はい」です。一部のコードを繰り返す必要がある場合があります。クラスをスタイルの短い名前として使用すると、コード (HTML と CSS の両方) を管理するのに問題が生じます。のようなクラスrounded-corners、明示的な外観)。想像してみてください。来月、Web サイトのスタイルを変更する必要があり、ファッションの要件により、四角いコーナーが課せられます。HTML コードを変更する必要があります (rounded-corners四角い境界線を適用するクラスを受け入れる場合を除きます)。単純に言って、CSS に a のレンダリングcontainer方法を定義 (および認識) させると、はるかに優れたものになります。container

あなたに適用できるかどうかはわかりませんが (好み、好み、開発環境によって異なります)、LESSを参照してください。CSS を解析する JavaScript として実装されます。もちろん、純粋に有効な CSS を作成するわけではありませんが、多くの新機能を得ることができます。あなたの場合、ミックスインが必要なものであることがわかるかもしれません:

.rounded-corners
{
    /* Your CSS here */
}

.float-left
{
    /* Your CSS here */
}

.container
{
    .rounder-corners
    .float-left
}
于 2012-10-24T14:58:14.677 に答える
0

うまくいけば、一連のクラスを各 div に適用しますか?

私はそれを次のように分割します：

CSS

.rounded_corners {}
.float_left {}
.float_right {}
.container {}

そしてhtmlで

<li id="container_1" class="container float_left rounded_corners">...</li>
<li id="container_2" class="container float_right rounded_corners">...</li>

等...

于 2012-10-24T15:00:58.713 に答える
0

次のような CSS コードを使用できます。

.container_1 {

}
.rounded_corners {

}
.float_left {

}

次に、この方法でクラスを HTML 要素に設定します。

<div class="container_1 rounded_corners float_left">...</div>

したがって、DIV 要素はすべてのクラスのすべてのスタイルを継承します! 明らかに、DIV は単なる例であり、すべてのタグを使用できます。

于 2012-10-24T14:56:44.177 に答える