Question

我目前正在为我的大学项目建立一个网站，我希望尽可能好。我基本上想为我的网站设置几个HTML页面，但我只想使用一个CSS页面。所以基本上如果我编辑一个页面，例如我的第二页，如何在不编辑我的第一页的任何CSS的情况下改变它的外观。我已经尝试了几件事，但老实说我不知道。

任何帮助表示赞赏，并提前感谢您。

Answer 1

您需要为HTML页面创建一个模板，然后在每个页面的<head>部分中链接外部样式表，如下所示：

<link rel="stylesheet" href="mystyle.css" type="text/css">

然后，对于不属于模板的任何特殊情况，您可以链接其他样式表。简而言之，直接在元素中嵌入样式比链接多个CSS文件更难维护。

如果您被允许使用JavaScript，您可能希望使用像Handlebar.js这样的JavaScript模板引擎。

模板引擎的优点在于您可以定义部分并创建动态HTML。这可能比你想要的更复杂，但它非常酷。

Answer 2

你不能只改变CSS中每个页面的布局，CSS不知道你所在的页面是什么。

您可以通过更改整个CSS文件来更改布局。或者您尝试将该页面的CSS特殊函数放在页面元素中。

否则你不能那样做！

例如：

您可以创建一个CSS文件并将其链接为：

<link rel="stylesheet" href="site.css" type="text/css">

然后在每个页面中，您希望样式不同，您可以更改内联样式：

<element style="property: value; property_2: value_2;"></element>

喜欢这个！

Answer 3

如何在第二页上向body标签添加一个类，然后使用该类指定仅适用于该页面的样式。

第一页：

<body>
  <p>This page is boring</p>
</body>

第二页：

<body class="page-two">
  <p>That's a mighty fine body</p>
</body>

然后你的CSS可能是

p {
  background: white;
}
.page-two p {
  background: red;
}

如果您有大量额外的CSS应用于第二页，那么您可以考虑使用LESS或类似的东西来让您的生活更轻松。

Answer 4

你最好的方法是拥有一个app.css文件，它具有全局设置，如高度，宽度......然后具有特定页面文件index.css，portfolio.css ..具有特定样式的颜色。您可以在app.css中指定按钮常规样式，然后在每个页面css文件中指定更具体的样式。

app.css：

       button{
           height: 30px;
           width: 150px;
           border: 1px solid purple;
           color: purple;
      }

index.css：

      button{
          border: 1px solid black;
          color: black;
      }

将app.css添加到每个html文件，然后只将特定页面的css文件添加到每个html文件中。这样可以在将来轻松扩展。