如何将所有页面链接到同一个 css 外部文件？答案

【问题标题】：How do I link all pages to the same css external file?如何将所有页面链接到同一个 css 外部文件？
【发布时间】：2020-08-30 23:54:17
【问题描述】：

我正在做一个项目，为我的 CS 205 课程建立一个网站。我已经使用记事本++ 编写了 html 文件，使用记事本编写了 css 文件。我的网站有一个 home/index.html 页面以及 5 个其他内容页面。我所做的是在 notepad++ 中创建每个页面，每个页面都有自己的 css 文件。

我遇到的问题是它必须有 1 个 css 文件，该文件必须在您的网站上保持一致的外观/或将所有页面链接到同一个 css 外部文件。我不完全确定这两个意思是否相同，这就是我列出它们的原因。

我已经在每个 html 页面中都有一个样式表，链接到它的 css 文件。但是我必须为整个站点创建一个 css 文件。我可以将每个 css 文件复制并粘贴到一个文件中而不改变每个页面的外观吗？如果有人能解释我是如何做到这一点的，而不会弄乱我对每个页面的设置，我将不胜感激。

【问题讨论】：

能否将所有css文件的内容合并为一个，或者您认为在多个css文件中有不同样式的相似css选择器？
使用@import 链接主文件中的所有css 文件怎么样？ stackoverflow.com/questions/10036977/…
你应该检查css文件路径或你的css扩展名，它应该用.css保存

标签： html css

【解决方案1】：

让您的所有样式在整个网站上保持一致是理想的。为此，您有一个样式表，并使用<head> 中的<link> 标记将所有页面链接到它。

尽可能多地重用 CSS 是一种很好的做法，它将为您节省未来的时间，这也是样式表与内联样式的目标。

要回答您的问题，是的，您可以将我们所有的样式表组合成一个样式表，前提是您没有有任何重复的类名。请注意，在我的示例中，我有一个 .class-for-index，它在 index.html 中使用，但在 page.html 中没有使用，.class-for-page 也是如此。

styles.css（包含所有类的单个样式表）

body {
    background-color: cyan;
}

.class-for-index {
    color: red;
}

.class-for-page {
    color: blue;
}

index.html（链接到单个样式表）

<html>
    <head>
        <link href="styles.css" rel="stylesheet">
    </head>

    <body class="class-for-index">
        Page 1
    </body>
</html>

page.html（链接到单个样式表）

<html>
    <head>
        <link href="styles.css" rel="stylesheet">
    </head>

    <body class="class-for-page">
        Page 2
    </body>
</html>

【讨论】：

tl;dr <link href="styles.css" rel="stylesheet">

【解决方案2】：

您学到了 DRY 原则的重要一课 - 不要重复自己。维护许多 CSS 文件会产生开销 - 例如，您想要定义/更改 H1 样式的多少地方？这就是为什么要求您拥有一个文件的原因。

我建议您使用最大的 css 文件并将其作为主文件。对于其他每个文件，添加主文件中缺少的那些元素。这很乏味，但这是您创建的问题；）

您可以将每个文件复制并粘贴到一个主文件中，它会起作用（这是 css，最后一个定义会胜出），但这是不好的做法，当您必须找到时编辑它会遇到问题您正在使用的实际定义。

其他人已经解释了如何从多个页面链接到单个 css 文件。

【讨论】：

感谢您的评论和直截了当。

【解决方案3】：

我假设您根本没有使用 PHP。如果操作正确，在所有网页上保持一致的外观非常容易。

基本上你有两种选择：

1.将所有 CSS 块放入单个文件并将其链接到所有页面

例如：将这个添加到所有 HTML 页面，这个单个 style.css 文件具有所有 HTML 页面以及整体布局的规则。

<head>
  <link href="style.css" rel="stylesheet">
</head>

如果您有很多 HTML 页面，这个 style.css 文件可能会变得凌乱而大。

2。将与整体设计相关的 CSS 块放在一个文件中；将各个页面特定的 CSS 规则添加到新文件中，并将这些规则链接到各自的页面

例如：将此添加到登录页面，main.css 文件将给出整体布局，如正文 background-color、font-family、font-size 等，而 login.css 是专门为login.html 页面。

<head>
  <link href="css/main.css" rel="stylesheet">
  <link href="css/login.css" rel="stylesheet">
</head>

我个人更喜欢第二种方法，因为它更易于维护，而且我可以更好地控制我的 CSS 而不会破坏其他样式。

但是，如果您决定采用第一种技术，建议通过注释行严格分隔特定于页面的 CSS（仅作为单个页面使用的样式）。这使文件更具可读性。

【讨论】：

【解决方案4】：

我认为要创建一个 css 文件并将其链接到所有页面。您也可以创建多个 css 文件，但一个 css 文件将易于维护，并且一旦您的 index.html 加载， css 文件将被缓存在浏览器中。

【讨论】：

【解决方案5】：

解决方案中的每个文件只需要通过文档头部的链接标签链接到一个统一的外部样式表：

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

Google 为这方面的许多资源“创建外部样式表”！

【讨论】：

我已经在每个 html 页面中都有一个样式表，链接到它的 css 文件。但是我必须为整个站点创建一个 css 文件。我可以将每个 css 文件复制并粘贴到一个中吗？
是的，所有的 CSS 都可以合并到一个通用的 css 文件中，但是您必须小心重用或通用的类和 ID。

【解决方案6】：

您可以创建一个单独的 CSS 文件并将所有“通用”CSS 放入其中，例如将其命名为 main.css。这是用于 p、h1、h2、ul、li 等标签的 CSS，用于设置整个网站的字体和边距等，因为这些在不同页面之间不应该真正改变。

您可以在所有页面中包含该文件。

然后，您可以在该文件下方包含一个页面特定的 CSS 文件，该文件仅包含该页面的 CSS。这将具有用于该特定页面布局的 CSS，例如背景图像等。

【讨论】：

【解决方案7】：

这是创建外部 css 文件：

在Index.html中：

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

其他页面，

Page-1.html：

放同一个css文件，

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

与 page-2.html 的 put css 文件相同，同样......

注意：最新的html，创建外部css文件不需要输入type="text/css"。

【讨论】：

【解决方案8】：

为网站中的所有页面设置 1 个 CSS 文件并不是很好的做法，尤其是当您为 h1、a、p 等选择器设置样式时……每个页面都非常不同。

但 allejo 有一个很棒、简单的方法。

由于项目要求 1，只需确保您不要覆盖页面上您希望以不同方式设置样式的元素样式。如果这意味着添加一些额外的 div 以包含多个页面上的标签以不失分，那就去吧。

IE：

.about_page h1{
     ...}

.home_page p{
     ...}

等等……

【讨论】：