CSS背景颜色问题

CSS background-color problems

本文关键字：问题 颜色 背景 CSS      更新时间：2023-09-26

我正在尝试重构我的CSS，组合多余的元素并修剪不必要的代码（我正在学习一门移动应用程序课程，重点是创建基于web的混合应用程序；使用HTML5、CSS和JavaScript。因此，必须重构代码）。我最初拥有的是：

body
{
    width: 400px;
    border: solid;
}
header, footer
{
    background-color: #ADDFFF;
}
.buttons
{
    width: 400px;
    text-align: center;
    background-color: #ADDFFF;
}

它将使用这样的HTML结构：

<BODY>
   <header>
   </header>
   <div class="buttons">
   </div>
   <footer>
   </footer>
</BODY>

我尝试将 background-color: #ADDFF; 添加到正文CSS中，并删除所有其余的 background-color 引用。当我这样做的时候，整个页面就会变成我设置的颜色；这是我有点预料到的。在不重复使用CSS元素的情况下，是否可以将正文的背景设置为只包含页面显示的区域？

简单/TL；DR版本：

我正在努力使页面的整个背景颜色相同。目前，仅仅设置 标签的样式就会使整个背景（也在我的页面之外）着色。

您可以为html元素设置不同的bakground-color。这将强制正文只影响其内容，而不影响整个页面。。

html
{
    background-color: #ffffff;
}
body
{
    width: 400px;
    border: solid;
    background-color: #ADDFFF;
}
.buttons
{
    width: 400px;
    text-align: center;
}

以及上的工作演示http://jsfiddle.net/gaby/SsFsS/

您可以将EVERYTHING包围在包含页眉、内容和页脚的div中。使其成为您希望页面的宽度，内容应填充页面的高度。然后把它的背景做成你想要的颜色。

<BODY>
    <div id="container">
       <header>
       </header>
       <div class="buttons">
       </div>
       <footer>
       </footer>
    </div>
</BODY>

所以容器不会是页面的整个宽度。它只会和内容一样宽。

这是一个例子http://jsfiddle.net/pRwMn/1/

因此，您可以设置默认背景，然后根据需要更改所有其他元素的背景。

怎么样

body > * { background-color: #ADDFFF; }

<header> and <footer>只是指导原则，与<body> 没有相同的效果

你需要做的是做如下的事情。

body
{
    width: 400px;
    border: solid;
}
header, footer
{
    background-color: /* change here as necessary */;
}
.buttons
{
    width: 400px;
    text-align: center;
    background-color: /* change here as necessary */;
}
#container 
{
    background-color: #addfff;
}

然后你的html文档应该读起来像这个

<BODY>
   <header>
   </header>
   <div id="container">
      <div class="buttons">
      </div>
   </div>
   <footer>
   </footer>
</BODY>
相关文章：