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

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

html css

Html 如何将所有页面链接到同一个css外部文件？,html,css,Html,Css,我正在做一个项目，为我的CS 205课程建立一个网站。我使用notepad++编写html文件，使用notepad++编写css文件。我的网站有一个home/index.html页面以及5个其他内容页面。我所做的是在notepad++中创建每个页面，每个页面都有自己的css文件我遇到的问题是，它必须有一个css文件，可以在整个站点中保持一致的外观/或将所有页面链接到同一个css外部文件。我不完全确定这两个词的意思是否相同，这就是为什么我把它们都列出来的原因我已经在每个html页面中都有一个样

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

我遇到的问题是，它必须有一个css文件，可以在整个站点中保持一致的外观/或将所有页面链接到同一个css外部文件。我不完全确定这两个词的意思是否相同，这就是为什么我把它们都列出来的原因

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

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

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

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

谷歌“创建外部样式表”上的许多资源

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

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

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

让您的所有风格在整个网站上保持一致是理想的选择。要实现这一点，您需要一个样式表，并使用

中的

标记将所有页面链接到该样式表

尽可能多地重用CSS是一个很好的实践，它将在将来为您节省时间，这也是样式表与内联样式的目标

为了回答您的问题，您可以将所有样式表组合到一个样式表中，前提是您没有任何重复的类名。请注意，在我的示例中，我有一个用于索引的

.class

，它在

index.html

中使用，但不在

page.html

中使用，类似地，在

中也有用于page

的.class

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

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


第1页

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


第2页

这是创建外部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，无需放置

type=“text/css”

来创建外部css文件。

一个站点中所有页面都有一个css文件并不是一个很好的做法，特别是如果您正在设置h1、a、p等选择器的样式。。。每页都有很大不同

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

由于项目需要1，所以请确保不要覆盖页面上的元素样式。如果这意味着添加一些额外的div来包含多个页面上的标签，以避免失去分数，那么就这样做吧

即：

等等。

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

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

您可以将每个文件复制并粘贴到一个主文件中，这样做是可行的（这是css，最后一个定义将获胜），但这是一个糟糕的做法，当您必须找到您正在使用的实际定义时，您将无法编辑它

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

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

基本上你有两个选择：

1。将所有CSS块放在一个文件中，并将其链接到所有页面

例如：将其添加到所有HTML页面，这个单一的

style.css

文件对所有HTML页面以及整体布局都有规则

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

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

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

您可以将所有css文件的内容合并到一个css文件中，或者您认为在多个css文件中存在具有不同样式的类似css选择器吗？使用@import链接主文件中的所有css文件如何？您应该检查css文件路径或css扩展名，它应该以.cssI保存，每个html页面中都有一个链接到css文件的样式表。但我必须有一个css文件为整个网站。我可以复制并通过每个css文件吗

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

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

.about_page h1{
     ...}

.home_page p{
     ...}

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

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