境界内のCSS CSSカラー

Question

黒い枠線で300x300ピクセルの小さな黄色の四角形を作成しようとしています。私は以下を使用します：

<style> 
body { 
    background-color: yellow; 
    border: 1px solid #000000; 
    width: 300px; 
    height: 300px; 
} 
</style> 

しかし、これはページ全体が黄色で、正方形だけではありません。どうすればこの問題を解決できますか？ Tyの

Answer 1

あなたはdiv要素にではなく体全体にスタイルを適用する必要が

...

.square { 
 
    background-color: yellow; 
 
    border: 1px solid #000000; 
 
    width: 300px; 
 
    height: 300px; 
 
}

<div class="square"></div>

Answer 2

bodyタグは、HTMLドキュメントのボディ全体を選択します。あなたのボックスにidまたはclassを与えてからCSSを適用する必要があります。例えば

：

#box { 
 
    background-color: yellow; 
 
    border: 1px solid #000000; 
 
    width: 300px; 
 
    height: 300px; 
 
}

<div id="box"></div>

Answer 3

"DIV"

div { 
    background-color: yellow; 
    border: 1px solid #000000; 
    width: 300px; 
    height: 300px; 
} 

フィドル使用し、 "体" を使用しないでください：あなたが適用したhttps://jsfiddle.net/Lrgqp2ud/

Answer 4

を基本的にページ全体を意味します。 本文にDIVを挿入します。

HTML

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

CSS

.div-class{ 
    background-color: yellow; 
    border: 1px solid #000000; 
    width: 300px; 
    height: 300px; 
} 

Answer 5

あなただけの300×300の正方形はあなたが今、あなたがその

**HTML:** 
<div class='square'></div> 


**CSS** 

.square { 
background-color: yellow; 
border: 1px solid #000000; 
width: 300px; 
height: 300px; 
} 

のためのdivを作成する必要がある場合あなたのスタイルをtに適用する彼の体（全ページ）。そのため、あなたの体全体をスタイリングしているため、ウィンドウ全体が300x300ではなく黄色に表示されます。