html - 有哪些方法可以在 CSS 中使用不同的背景颜色？

Question

假设我有 5 个网页，并且在每个网页上我希望背景颜色不同。我只使用 1 个 css 文件。每个网页的访问方式如下：domain.com/page1

我是简单地使用 5 个不同的 CSS 文件并更改正文中的背景颜色，还是有更简单的方法来实现这一点？

score 1 · Accepted Answer

在每个站点上添加不同class的<body>内容，然后使用该类来获得正确的背景颜色。

当然，您不必增加代码，这对所有站点都是通用的。

score 1 · Accepted Answer

像这样在每个页面的 body 标签中添加一个简单的内联样式怎么样？

第01页

    <body style="background-color:#111;">

第02页

    <body style="background-color:#222;">

第 03 页

    <body style="background-color:#333;">

请记住，在设计方面，这种提议的配色方案变化通常是一个坏主意。你的想法背后可能有一些有意义的功能，但否则我会推荐极简主义，并在整个设计过程中保持一致性。

score 1 · Accepted Answer

例如：

在“第 1 页”上：

<body id="page1">

在“第 2 页”上：

<body id="page2">

你的 CSS：

body#page1 {
    background: red;
}

body#page2 {
    background: blue;
}

score 1 · Accepted Answer

好吧，如果所有页面都使用相同的 css 文件，那么所有页面都将使用相同的背景...

一种简单的方法是否决正文中现有的背景颜色。所以如果你有一个包含以下内容的css文件：

body
{
   background-color: aqua;
}

然后在它下面（在实现 css 文件之后）并且在页面上你需要一个新的颜色，你可以用以下命令否决它：

<style type="test/css">
body
{
    background-color: blue;
}
</style>

4 回答 4