HTML CSS Farbe innerhalb der Grenze

Question

Ich versuche, ein kleines gelbes Quadrat von 300x300 Pixel machen wir sagen, mit einem schwarzen Rand. Ich benutze:

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

Aber das gibt die ganze Seite gelb und nicht nur das Quadrat ... Wie kann ich das beheben? Ty

Answer 1

Sie benötigen die Stile zu einem div anzuwenden und nicht auf den ganzen Körper ...

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

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

Answer 2

Der body Tag wählt den gesamten Körper des HTML-Dokuments. Sie müssen Ihrer Box eine id oder class geben und dann das CSS darauf anwenden.

Zum Beispiel:

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

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

Answer 3

nicht "Körper", verwenden Sie "div" verwenden

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

Fiddle: https://jsfiddle.net/Lrgqp2ud/

Answer 4

Sie angewendet haben für den Körper bedeutet das im Grunde die ganze Seite. Legen Sie ein DIV auf den Körper.

HTML

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

CSS

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

Answer 5

Wenn Sie nur ein Quadrat von 300x300 möchten Sie ein div machen müssen, dass für

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


**CSS** 

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

Jetzt sind Sie deinen Stil auf t anwenden er Körper (ganze Seite). Deshalb ist Ihr ganzes Fenster gelb statt 300x300