Question

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

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

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

Answer 1

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

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

要回答您的问题，是的，您可以将所有样式表合并到一个样式表中，前提是不具有任何重复的类名。请注意，在我的示例中，我.class-for-index中使用了index.html但page.html中没有.class-for-page，body { background-color: cyan; } .class-for-index { color: red; } .class-for-page { color: blue; }也是如此。

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

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

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

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

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

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

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

{{1}}

Answer 2

你已经学到了干燥原则的一个重要教训 - 不要重复自己。维护许多CSS文件会产生开销 - 例如，您想要为H1定义/更改样式的位置数量是多少？这就是为什么你被要求拥有一个文件。

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

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

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

Answer 3

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

Answer 4

您可以创建一个单独的CSS文件，并将所有＆＃34;普通＆＃34; CSS就是这样，称之为main.css。这是用于在整个网站上设置字体和边距等标签（如p，h1，h2，ul，li等）的CSS，因为它们不应该在不同页面之间真正改变。

您可以在所有网页上添加该文件。

然后在该文件下方，您可以包含仅针对该页面的CSS页面特定的CSS文件。那将是CSS，用于特定页面的布局，如背景图像等。

Answer 5

这是创建外部css文件：

在 Index.html ：

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

其他页面，

网页-1.HTML：

放入相同的css文件，

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

与页面2.html的put css文件相同，同样..

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

Answer 6

对于网站中的所有页面都有1个CSS文件并不是一种奇妙的做法，特别是如果你正在设置像h1，a，p等选择器......那么每页都会有不同的选择。

但是，allejo有一个很好的，简单的方法。

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

IE：

.about_page h1{
     ...}

.home_page p{
     ...}

等...

Answer 7

我假设您根本不使用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（仅作为单页使用的样式）。这使文件更具可读性。

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

7 个答案: