CSSと親/子、継承された属性の構文と可能性

私はこれを持っていて、それが私が望むすべてのことをしますが、私にはdivの高さを別々に制御できるようにする方法があります。他のすべての同一の特性からのものである。私は私の検索で私に合った方法を見つけることができなかっただけです。CSSと親/子、継承された属性の構文と可能性

注：私はhtmlの約3日です。これが複雑であれば、私は理解するステップで学びます。私はスタイルシートを理解してプロセスを簡素化しましたので、よりシンプルな方法があるようです。

おかげ

<style type="text/css"> 
    body 
    { 

     width:1240px; 
     border:solid 1px black 
    } 

    .rightline1{float:right;width:618px;height:80px;border:solid 1px black;} 
    .rightline2{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline3{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline4{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline5{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline6{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline7{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline8{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline9{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline10{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline11{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline12{float:right;width:618px;height:20px;border:solid 1px black;} 
    .leftline1{float:left;width:618px;height:80px;border:solid 1px black;} 
    .leftline2{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline3{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline4{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline5{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline6{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline7{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline8{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline9{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline10{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline11{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline12{float:left;width:618px;height:20px;border:solid 1px black;} 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
    <div class="leftline1"></div> 
    <div class="rightline1"></div> 
    <div class="leftline2"></div> 
    <div class="rightline2"></div> 
    <div class="leftline3"></div> 
    <div class="rightline3"></div> 
    <div class="leftline4"></div> 
    <div class="rightline4"></div> 
    <div class="leftline5"></div> 
    <div class="rightline5"></div> 
    <div class="leftline6"></div> 
    <div class="rightline6"></div> 
    <div class="leftline7"></div> 
    <div class="rightline7"></div> 
    <div class="leftline8"></div> 
    <div class="rightline8"></div> 
    <div class="leftline9"></div> 
    <div class="rightline9"></div> 
    <div class="leftline10"></div> 
    <div class="rightline10"></div> 
    <div class="leftline11"></div> 
    <div class="rightline11"></div> 
    <div class="leftline12"></div> 
    <div class="rightline12"></div> 
</div> 
</form> 
</body>

出典

2012-03-09 Michael Cole

私は2つのオプションを参照してください。そして、この

.rightline1, .rightline2 (...) .rightLine12 { /* all current rules here */ }

など、

は、すべての一般的なスタイルを持つ別のルールを作成し、すべてのクラスに適用します必要に応じて単一のクラスに別のルールを追加するだけです。

もう一つの選択肢（私にはよく似ています）：要素に任意の数のクラスを割り当てることができるので、共通のスタイルに余分なクラスを追加するだけです。例：

HTML：
```
<p class="rightline rightline1">Lorem ipsum</p> 
```
CSS：
```
.rightline { /* all current rules here */ } 
.rightline1 { width: 200px; } 
```

出典

2012-03-09 19:06:24 bfavaretto

okが最初に驚くほど迅速な対応をありがとうございました、第二に私はあなたが要素に複数のクラスを割り当てることができます知りませんでした。もう一度おねがいします。 –

あなたは複数のHTML要素にCSSクラスを再利用することができます。たとえば、次の2つのCSSクラスはまったく同じです：

.rightline2{float:right;width:618px;height:20px;border:solid 1px black;} 
.rightline3{float:right;width:618px;height:20px;border:solid 1px black;}

ので、このクラスは一度だけ定義され、あなたがそれを必要な場所に使用することができます。

クラスの再利用（2つのdivの上で使用したのと同じCSSクラス）の例：

<div class="rightline2"></div> 
<div class="rightline2"></div>

出典

2012-03-09 19:07:49

はい、申し訳ありません。これは、セルのレイアウトを作成し、個々のセルを個別にサイズ変更してレイアウトを作成することになっています。ページに必要な応答に感謝します。 –

まず第一に、あなたはこのように同じCSSを書くことができます。

body { 
    width:1240px; 
    border:solid 1px black 
} 

.rightline1, .rightline2, .rightline3, .rightline4, .rightline5, .rightline6, .rightline7, .rightline8, .rightline9, .rightline10, .rightline11, .rightline12{ 
    float:right; 
    width:618px; 
    height:20px; 
    border:solid 1px black; 
} 
.leftline1, .leftline2, .leftline3, .leftline4, .leftline5, .leftline6, .leftline7, .leftline8, .leftline9, .leftline10, .leftline11, .leftline12 { 
    float:left; 
    width:618px; 
    height:20px; 
    border:solid 1px black; 
}

だから、少しクリーナーです。しかし、あなたはそれらの権利と左翼のすべてを統合したいと思うように思えます。だから、これは良いだろう：

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     body { 
      width:1240px; 
      border:solid 1px black 
     } 

     .rightline, .leftline { 
      width:618px; 
      height:20px; 
      border:solid 1px black; 
     } 

     .rightline { 
      float:right; 
     } 
     .leftline { 
      float:left; 
     } 
</style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
     </div> 
    </form> 
</body>

あなたはより多くののIdsのようなクラスを使用していた元のコードでは。 <div id='abc'></div>のようなものがあれば、それはidがabcのページ上の他の要素が（まったくあってはいけない）ことを意味します。 IDはユニークです。

クラスは、要素のグループを識別するために使用されます。したがって、それぞれにユニークなクラスを与える代わりに、それらに似たクラスを与えるべきです。私の最後の例では、.rightlineと.leftline共有スタイルを与えました。フロートの方向を除き、同じです。それから私はちょうどそれぞれ独自のフロート方向を与えます。

EDIT私は適切なインデントを持っている最後の例を更新しました:)

出典

2012-03-09 19:11:12 Marshall

CSSと親/子、継承された属性の構文と可能性

答えて

関連する問題