logo标签列表

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

htmlcss
7
我正在为我的CS 205课程建立一个网站项目。我使用notepad++编写html文件和notepad编写css文件。我的网站有一个主页/index.html页面以及其他5个内容页面。我使用notepad++创建了每个页面，每个页面都有自己的css文件。
我遇到的问题是必须有一个css文件来维护整个网站的统一外观/或将所有页面链接到同一个外部css文件。我不确定这两个是否意味着相同的事情，所以我列出了它们两个。
我已经在每个html页面中有一个样式表，它链接到其css文件。但我必须为整个网站准备一个css文件。我能否只将每个css文件复制并粘贴到一个文件中，而不改变每个页面的外观？如果有人能解释如何做到这一点，我将不胜感激，而且不会破坏我已经为每个页面设置的布局。
你能否将所有CSS文件的内容合并为一个文件，或者你认为在多个CSS文件中存在相似的CSS选择器但具有不同的样式？ - prasun
你觉得在主文件中使用@import链接所有的CSS文件怎么样？https://dev59.com/3Gkw5IYBdhLWcg3wPIF7 - Sandeep Nayak
你应该检查CSS文件路径或者你的CSS扩展名，它应该保存为.css。 - Mukul Kant
8个回答
7
在整个网站中，所有的样式都是一致的最理想的。为了实现这一点，您需要一个单独的样式表，并使用标签中的标签将所有页面链接到它上面。
重用尽可能多的CSS是一个好习惯，这会在未来节省时间，这也是样式表与内联样式之间的目标。
回答您的问题，是的，您可以将所有样式表合并成一个样式表，前提是您没有任何重复的类名。请注意，在我的示例中，我有一个在index.html中使用但不在page.html中使用的.class-for-index以及相似的.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>
1
tl;dr <link href="styles.css" rel="stylesheet"> - Klesun
3
我假设你根本不使用PHP。 如果正确操作，保持所有网页的一致外观非常容易。
基本上你有两个选择：
1. 将所有CSS块放入一个文件中，并将其链接到所有页面
例如：在所有HTML页面中添加这个，这个单独的style.css文件包含了所有HTML页面的规则以及整体布局。
<head>
  <link href="style.css" rel="stylesheet">
</head>

这个 style.css 文件如果你有很多 HTML 页面的话，可能会变得混乱而庞大。
2. 将与整体设计相关的 CSS 块放在一个文件中；将各个页面特定的 CSS 规则添加到新文件中，并将其链接到相应的页面。
例如：将此代码添加到登录页面，main.css 文件将提供整体布局，如 body 的 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（仅被单个页面使用的样式）。这样可以使文件更易读。

2
您学到了DRY原则的重要课程-不要重复自己。维护许多CSS文件会增加开销-例如，您想定义/更改H1的样式的位置有多少个？这就是为什么要求您只有一个文件的原因。
我建议您选择最大的css文件并将其作为主文件。对于其他文件中缺失的元素，请添加到主文件中。这很繁琐，但这就是您所创建的问题 ;)
您可以将每个文件复制并粘贴到单个主文件中，它将起作用（这是css，最后一个定义将获胜），但这是一种不良实践，并且在查找您正在使用的实际定义时会遇到问题。
其他人已经解释了如何从多个页面链接到单个CSS文件。
感谢您的评论并且直言不讳。 - Greg
0

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

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

在谷歌上搜索“创建外部样式表”，可以找到很多相关资源！

我已经在每个HTML页面中有一个链接到其CSS文件的样式表。但是我必须为整个站点使用一个CSS文件。我能否将每个CSS文件复制并粘贴到一个文件中？ - Greg
是的，所有的CSS都可以合并到一个公共的CSS文件中，但你必须小心重复使用或常见的类和ID。 - Brian John
0

这是创建外部 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一样放置CSS文件，以此类推。

注意：最新的html版本中，创建外部css文件时无需添加type="text/css"。

0

在一个网站中为所有页面使用1个CSS文件并不是一个好的实践，特别是如果您要针对每个页面不同地设置h1、a、p等选择器的样式。

但是，allejo有一个很棒、简单的方法来解决这个问题。

由于该项目需要使用1个CSS文件，只需确保不覆盖您想要以不同方式设置样式的页面上元素的样式。如果这意味着添加一些额外的div来包含多个页面上的标签以避免失分，那就去做吧。

例如：

.about_page h1{
     ...}

.home_page p{
     ...}

等等...

0
我认为应该创建一个单独的CSS文件并将其链接到所有页面。你也可以创建多个CSS文件，但一个CSS文件更容易维护，一旦你的index.html加载了CSS文件，它就会被缓存在浏览器中。
0

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

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接