Html 如何将所有页面链接到同一个 css 外部文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29788182/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I link all pages to the same css external file?
提问by Greg
I am doing a project which is building a website for my CS 205 class. I have made it using notepad++ for the html files and notepad for the css files. My site has a home/index.html page as well as 5 other content pages. What I did was created each each page in notepad++, with each page having its own css file.
我正在做一个项目，为我的 CS 205 课程建立一个网站。我已经使用 notepad++ 制作 html 文件，使用记事本制作 css 文件。我的网站有一个 home/index.html 页面以及 5 个其他内容页面。我所做的是在 notepad++ 中创建每个页面，每个页面都有自己的 css 文件。
What I'm having trouble with is it must have 1 css file that maintains a consistent look across your site / or link all pages to the same css external file. I'm not totally sure if those two mean the same thing that's why I list both of them.
我遇到的问题是它必须有 1 个 css 文件，可以在您的网站上保持一致的外观/或将所有页面链接到同一个 css 外部文件。我不完全确定这两个意思是否相同，这就是我列出它们的原因。
I already have a style sheet in each html page that links to its css file. But I must have one css file for the entire site. Could I just copy and past each css file into one without it changing how each page looks? I would really appreciate it if someone could explain how I do this without it messing up the setup I have for each page.
我已经在每个 html 页面中都有一个链接到其 css 文件的样式表。但是我必须为整个站点创建一个 css 文件。我可以将每个 css 文件复制并粘贴到一个文件中而不改变每个页面的外观吗？如果有人能解释我是如何做到这一点而又不会弄乱我对每个页面的设置，我将不胜感激。
回答by allejo
Having all of your styles be consistent across the website is ideal. To achieve this, you have a single stylesheet and link all your pages to it using the <link>tag in the <head>.
让您的所有样式在整个网站上保持一致是理想的。要做到这一点，你有一个样式表，并使用所有网页链接到它<link>的标签<head>。
It's a good practice to reuse as much CSS as you can, it'll save you time in the future and that's kinda the goal of a stylesheet versus inline styles.
尽可能多地重用 CSS 是一个很好的做法，它会在将来节省您的时间，这有点像样式表与内联样式的目标。
To answer your question, yes you can combine all of our stylesheets together into a single stylesheet provided you do nothave any duplicate class names. Notice in my example how I have a .class-for-indexthat is used in index.htmlbut not in page.htmland similarly for .class-for-page.
要回答您的问题，是的，您可以将我们所有的样式表组合成一个样式表，前提是您没有任何重复的类名。请注意，在我的示例中，我如何将 a.class-for-index用于index.html但不page.html用于.class-for-page.
styles.css(your single stylesheet with all your classes)
style.css（包含所有类的单个样式表）
body {
background-color: cyan;
}
.class-for-index {
color: red;
}
.class-for-page {
color: blue;
}
index.html(link to the single stylesheet)
index.html（链接到单个样式表）
<html>
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body class="class-for-index">
Page 1
</body>
</html>
page.html(link to the single stylesheet)
page.html（链接到单个样式表）
<html>
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body class="class-for-page">
Page 2
</body>
</html>
回答by Romski
You've learnt an important lesson of the DRY principle - Don't Repeat Yourself. Maintaining many CSS files creates overhead - how many places do you want to define/change the styling for H1 for example? This is why you've been asked to have a single file.
您已经学到了 DRY 原则的重要一课——不要重复自己。维护许多 CSS 文件会产生开销 - 例如，您想要定义/更改 H1 样式的位置有多少？这就是为什么要求您拥有单个文件的原因。
I'd recommend taking the largest of your css files and making it the master. For each of the other files, add those elements that are missing from the master. It's tedious, but that's the problem you created ;)
我建议使用最大的 css 文件并使其成为主文件。对于其他每个文件，添加主文件中缺少的元素。这很乏味，但这就是你创造的问题;)
You could just copy and paste each file into a single master file and it would work (this is css and the last definition will win), but it's poor practice and you'll just have problems editing it when you have to find the actual definition you are using.
您可以将每个文件复制并粘贴到单个主文件中，它就可以工作（这是 css，最后一个定义将获胜），但这是一种糟糕的做法，当您必须找到实际定义时，编辑它就会遇到问题您正在使用。
Others have already explained how to link to a single css file from many pages.
其他人已经解释了如何从多个页面链接到单个 css 文件。
回答by Ashesh Kumar Singh
I am assuming you aren't using PHP at all. Maintaining consistent look across all your webpages is quite easy if done correctly.
我假设您根本没有使用 PHP。如果操作正确，在所有网页上保持一致的外观非常容易。
basically you have two options:
基本上你有两个选择：
1. Put all CSS blocks into a single file and link it to all pages
1. 将所有 CSS 块放在一个文件中并链接到所有页面
For example: add this to all HTML pages, this single style.cssfile has rules for all the HTML pages as well as the overall layout.
例如：把这个添加到所有的 HTML 页面，这个单个style.css文件有所有 HTML 页面的规则以及整体布局。
<head>
<link href="style.css" rel="stylesheet">
</head>
This style.cssfile can get messy and large if you have a lot of HTML pages.
style.css如果您有很多 HTML 页面，此文件可能会变得又大又乱。
2. Put CSS blocks that are related to overall design in one file; add individual page-specific CSS rules into new files and link these to their respective pages
2.将与整体设计相关的CSS块放在一个文件中；将特定页面的 CSS 规则添加到新文件中，并将这些规则链接到各自的页面
For example: add this to a login page, the main.cssfile will give the overall layout like body background-color, font-family, font-sizeetc. etc. while the login.cssis specifically tailored to the login.htmlpage.
例如：它添加到登录页面，该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>
I personally prefer the 2nd approach because it's more easy to maintain and I have more control over my CSS without breaking other styles.
我个人更喜欢第二种方法，因为它更容易维护，而且我可以更好地控制我的 CSS，而不会破坏其他样式。
However if you decide to follow the 1st technique, it is advisable to separate strictly page specific CSS (styles that are being only used by as single page) by comment lines. This makes the the file more readable.
但是，如果您决定遵循第一种技术，建议通过注释行严格分隔特定于页面的 CSS（仅用作单个页面的样式）。这使文件更具可读性。
回答by pcs
This is creating external css file:
这是创建外部 css 文件：
In Index.html:
在Index.html 中：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Other pages,
其他页面，
Page-1.html:
第 1.html 页：
Put the same css file,
放入相同的css文件，
<link rel="stylesheet" type="text/css" href="mystyle.css">
Same as put css file for page-2.html and likewise..
与为 page-2.html 放置 css 文件相同，同样..
Note: Latest of html, no need to put type="text/css"for create external css file.
注意：最新的 html，无需放置type="text/css"创建外部 css 文件。
回答by Jason
It isn't fantastic practice to have 1 CSS file for all pages in a site, especially if you are styling selectors like h1, a, p etc... very differently per page.
为站点中的所有页面使用 1 个 CSS 文件并不是一种很好的做法，尤其是如果您正在为 h1、a、p 等选择器设置样式……每个页面都非常不同。
But allejo has a great, simple approach to it.
但是 allejo 有一个很好的、简单的方法。
Since the project calls for 1, just make sure you don't override the styles of elements on pages you want styled differently. If it means adding some additional divs to encompass tags on multiple pages to not lose points then go for that.
由于该项目需要 1，因此请确保不要覆盖想要以不同方式设置样式的页面上的元素样式。如果这意味着添加一些额外的 div 来包含多个页面上的标签以免失分，那么就去做吧。
IE:
IE：
.about_page h1{
...}
.home_page p{
...}
etc...
等等...
回答by SM Ahmed
I think a single css file to be created and linked to all pages. You can create multiple css files too but one css file would be easy to maintain and once your index.html loads the css file would get cached in the browser.
我认为要创建一个单独的 css 文件并将其链接到所有页面。您也可以创建多个 css 文件，但是一个 css 文件很容易维护，一旦您的 index.html 加载，css 文件就会缓存在浏览器中。
回答by Brian John
Each file within your solution just needs to link to that one unified external stylesheet via a link tag in the head of the document:
解决方案中的每个文件只需要通过文档头部的链接标签链接到一个统一的外部样式表：
<link rel="stylesheet" type="text/css" href="/path-to-mystyle.css">
Google "create external stylesheet" for many resources on this!
谷歌为这方面的许多资源“创建外部样式表”！
回答by Josh
You can create a separate CSS file and put all of your "common" CSS into that, call it main.css for example. This is CSS for tags such as p, h1, h2, ul, li etc to set fonts and margins etc across the whole site since these should not really change between different pages.
您可以创建一个单独的 CSS 文件并将所有“常用”CSS 放入其中，例如将其命名为 main.css。这是用于 p、h1、h2、ul、li 等标签的 CSS，用于设置整个站点的字体和边距等，因为这些不应该在不同页面之间真正改变。
You can include that file on all of your pages.
您可以在所有页面上包含该文件。
Then beneath that file you can include a page specific CSS file with CSS for that page only. That will have CSS which is for the layout of that specific page like background-images etc.
然后在该文件下方，您可以包含一个页面特定的 CSS 文件，该文件仅包含该页面的 CSS。这将具有用于该特定页面布局的 CSS，例如背景图像等。
