IDの取得時にCSSスタイルを適用するにはどうすればよいですか？

Question

私はHTMLコーディングの初心者です、と私は、次のHTML要素を持っている：

<div id="map_canvas" style="width: 500px; height: 370px; border: 1px solid #ccc; float: left"></div> 

が、私はそれのために「左」CSSスタイルを適用したいです。あなたが見ることができるようmap_canvasはすでに私の要素のidですので、どのように私はそれのためのID leftとCSS要素を適用することができます。しかし、

<div id="left" > 
    <input type=button .... 
</div> 

：私が使用している他の項目のことをやってきましたか？

Answer 1

#map_canvas { 
    width: 500px; 
    height: 370px; 
    border: 1px solid #ccc; 
} 

.left { 
    float: left; 
    border: 1px solid blue; 
} 

<div class="left">Not #map_canvas</div> 
<div id="map_canvas" class="left">This is #map_canvas .left</div> 

http://jsfiddle.net/94dwn/3/

「次」の要素は、「クリア」されていない場合、要素はよりディスプレイに狭いので、もし要素の幅は、次の「行」へのそれのフロートを支配することに注意してください以前はfloat ed要素でしたが、その要素の右/左に移動することができました。その場合はclearを使用してください。

<div class="left">Not #map_canvas</div> 
<div id="map_canvas" class="left">This is #map_canvas .left</div> 
<div class="cleared">Clear</div> 

#map_canvas { 
    width: 500px; 
    height: 370px; 
    border: 1px solid #ccc; 
} 
.left { 
    float: left; 
    border: 1px solid blue; 
} 
.cleared { 
    clear: both; 
    background: green; 
    border: 1px solid blue; 
    color: white; 
} 

http://jsfiddle.net/94dwn/4/

Answer 2

すべてのIDは一意である必要があります。クラスを使用しますが、複数の要素にスタイルを適用したい場合は

#unique { font-size: 200px; } 

<div id="unique">My Unique one of a kind element</div> 

：IDによるユニークな要素にスタイルを適用するために、あなたのCSSでハッシュを使用し

.BoldRed { font-weight: bold; color: red; } 

<div class="BoldRed">This is important</div> 
<div class="BoldRed">So is this</div> 

あなたはまた、クラスを組み合わせることができます。

.ReallyImportant { text-decoration: underline; } 

<div class="BoldRed ReallyImportant">This is the most important</div>