3

私はhtmlとcssにまったく慣れていないので、私の質問は非常に基本的なものかもしれませんが、皆さんが私を助けてくれることを願っています.

次のCSSコードを使用しています

    body
    {
        background-color:Olive;
        width:550px;           
        font-family:Verdana;
    }

幅を 550px に設定しているため、すべての段落が 550px に縮小されますが、背景は 550px を超えてもページ全体に適用されます

継承のため、子要素が body から width プロパティを継承することは理解していますが、body の width プロパティを 550px に設定すると、背景はページ全体ではなく 550px の広い領域に表示されるはずだと考えていました。

ここでロジックがわかりません..

4

6 に答える 6

2

たとえば、html に色を適用すると、html { background-color: yellow; }まったくそうではないことがわかります。この<body>タグは、HTML ページのコンテンツ全体を包含するように意図されているという点で特別です。背景を適用すると、背景が別の方法で設定されていない限り、デフォルトで背景ページ全体がペイントhtmlされます。

このjsfiddle の例を参照してください。上記の他のポスターと同様に、<div>要素を使用してコンテンツをラップ、サイズ変更、および色付けすることを強くお勧めします.

これは、CSS2 仕様で次のように説明されています。

ルート要素の背景はキャンバスの背景になり、キャンバス全体を覆い、('background-position' のために) ルート要素自体に対してのみペイントされた場合と同じ位置に固定されます。ルート要素は、この背景を再び描画しません。

于 2012-07-30T12:37:33.530 に答える
1

コンテンツを div でラップして、プロパティをそれに設定してみませんか?

<body>
<div class="content">
 ... content here
</div>
</body>

同じクラスをdivに適用します

.content
    {
        background-color:Olive;
        width:550px;           
        font-family:Verdana;
    }
于 2012-07-30T12:30:40.020 に答える
0

これはあなたが探しているものです。

<html>
    <head>
        <title>
            Your title goes here.
        </title>
    </head>
<style type="text/css">
#test
{
    background-color:Olive;
    width:550px;           
    font-family:Verdana;
}
</style>
<body>
    <div id='test'>
    Hello
    </div>
</body>

別の答えは次のとおりです。

<html>
<head>
    <title>
        Your title goes here.
    </title>
</head>
<style type="text/css">
    html
    {
        background-color:white;
    }
    body
    {
        background-color:Olive;
        width:550px;
        font-family:Verdana;
    }
</style>
<body>
    Hello
</body>
</html>
于 2012-07-30T12:44:41.423 に答える
0

divページ全体をラップし、「偽物」のように機能するコンテナを使用できますbody。次に、これらのスタイルをこれに適用するdivと、問題は解決されます。

于 2012-07-30T12:30:45.053 に答える
0

CSS 

#wrapper {
    width: 550px;
    margin: 0 auto;
    text-align: left;
}

HTML:

<body>
    <div id="wrapper">
        Piece of text inside a 550px width div centered on the page
    </div>
</body>
于 2012-07-30T12:31:03.807 に答える
0

これを試してみてくださいhttp://jsfiddle.net/ajaypatel_aj/8tfKc/ HTML

<div id="wrapper">Test me!</div>​

CSS

*{  
   margin:0;  
   padding:0;  
}  

body{  
   text-align:center; /*For IE6 Shenanigans*/  
    font-family:Verdana;
}  

#wrapper{  
   width:550px;  
   margin:0 auto;  
   text-align:left;  
    background-color:Olive;
} 
​

答えは簡単です適用されたボディカラーはページ全体に設定され、 div を使用する必要があります。

于 2012-07-30T12:36:27.703 に答える