I've been reading through a few tutorials about css, and I saw two different ways to state which css file should be used to style the page:
我已经阅读了一些关于css的教程，我看到了两种不同的方式来说明应该使用哪个css文件来样式化页面:
<style type="text/css">@import url("style.css");</style>
and
和
<link rel="stylesheet" type="text/css" href="style.css" />
What's the difference between them? Which one should I use?
它们之间有什么区别?我应该用哪个?
8 个解决方案
#1
4
There isn't much difference unless you are using very old browsers (netscape 4.x and ie 3.x). You can read a complete lowdown on what each means here.
除非你使用的是非常旧的浏览器(netscape 4)，否则没有什么区别。和ie 3. x)。你可以完整地了解每个词在这里的含义。
From a standards viewpoint, there is no difference between linking to an external style sheet or importing it. Either way is correct, and either way will work equally well (in most cases).
从标准的观点来看，链接到外部样式表或导入外部样式表之间没有区别。任何一种方法都是正确的，而且两种方法都同样有效(在大多数情况下)。
#2
13
According to Yahoo's "Best Practices for Speeding Up Your Web Site" using @include behaves like putting the <link> at the bottom of the page in Internet Explorer.
根据雅虎的“加速你的网站的最佳实践”，使用@include就像在Internet Explorer页面底部放置 一样。
Having the CSS load at the end of the page causes the page to be rerendered. That means, that the page is first shown without CSS and then redrawn with CSS. That slows the loading of the page a bit down.
在页面末尾加载CSS会导致页面重新运行。这意味着，页面首先在没有CSS的情况下显示，然后用CSS重新绘制。这就降低了页面的加载速度。
#3
8
The CSS Cascade and why you should care
It comes down to CSS Specificity and CSS Cascading. Tread carefully and know what you're doing and CSS Specificity can be your friend.
这取决于CSS的特性和CSS级联。小心行事，知道自己在做什么，CSS特性可以成为你的朋友。
// bring CSS into the Page
<style type="text/css">@import url("importedStyles.css");</style>
/// Link to CSS Style Sheet
<link rel="stylesheet" type="text/css" href="linkedStyles.css" />
Since @import brings the style into that page, those rules will override External or "linked" stylesheets. In-Line CSS trumps either because of a higher CSS specificity:
由于@import将样式引入页面，这些规则将覆盖外部或“链接”样式表。内嵌CSS的优势不是因为更高的CSS特性:
<span style="color: red;">I am DEFINITELY RED</span>
However, this only works when the rules are the same specificity
然而，这只有在规则具有相同的特异性时才有效
Take the following:
采取以下:
<div class="error">I am an error message</div>
If I have a rule in the importedStyles.css of so:
如果我在输入样式中有一个规则。css的:
.error { color: blue; } /* specificity = 10 */
And a rule in "externalStyles.css" like so:
以及“外部样式”中的一条规则。css”一样:
div.error { color: red; } /* specificity = 11 */
It will take the externalStyles version
它将采用externalStyles版本
Note: CSS specificity of inline style is 1000, so it trumps all things, except the !important tag which is 10000. Another CSS Specificity Article
注意:内嵌样式的CSS特性是1000，所以它胜过一切，除了!重要的标记是10000。CSS特异性的另一篇文章
CSS Specificity Reference
- !important = 10,000
- 重要! = 10000
- inline style = 1000
- 内联风格= 1000
-
each #id in the rule = 100 -eg, this is 200:
规则中的每个#id = 100 -例如，这是200:
#content #footer { color: red; } /* 200 */
{颜色:红色;} / * 200 * /
-
each class = 10
每个类= 10
-
each html element = 1
每个html元素= 1
So, some examples:
所以,一些例子:
body .selected { color: red; } /* 11 */
ul li { color: red; } /* 2 */
ul li.selected { color: blue; } /* 12 */
#content ul li.selected a { color: red; } /* 113 */
/* Careful, can't override this, ever */
a { color: blue; !important } /* 10,000 - Override everything */
So... the Cascade applies to element of the same Specificity only. Cascades are applied AFTER specificity rules are applied.
所以…级联仅适用于相同特性的元素。应用特异性规则后，应用级联。
#4
1
As said the first is an imbedded style sheet (which can be also be done in external stylesheets) This can lead to better organised stylesheets when used externally but bear in mind the when a stylesheet is imbedded the browser will not cache it
如前所述，第一个样式表是嵌入的样式表(也可以在外部样式表中执行)，这可以在外部使用时导致组织更好的样式表，但请记住，当样式表被嵌入时，浏览器不会缓存它
#5
1
Historically, I believe the first was often used to prevent Netscape 4 from picking up on your styles (I could be wrong, though; when Netscape 4 was still an issue, I wasn't very aware of cross-browser coding so this is a very fuzzy memory).
从历史上看，我认为第一个常被用来阻止Netscape 4选择你的风格(尽管我可能错了;当Netscape 4还是一个问题的时候，我还没有意识到跨浏览器编码，所以这是一个非常模糊的内存)。
These days, people will sometimes use <link> to include a single stylesheet from the webpage, and then @import to grab a bunch of others from that single sheet. This allows you to separate your styles out into layout.css, typography.css, etc. if that's the way you like to roll.
现在，人们有时会使用 从网页中包含一个样式表，然后使用@import从这个单表中获取许多其他样式表。这允许您将样式分离到布局中。css,排版。css等等，如果你喜欢的话。
As Tungle mentioned, caching becomes an issue with @import, but only for IE.
正如Tungle提到的，缓存对于@import是一个问题，但仅对IE是如此。
#6
1
the @import rule is mainly a hack. All modern browsers understand the @import rule whereas early browsers don't. So, if your site crashes on early browsers due to a css rule (not a common thing to happen but yet...) you can have a simple css for the older versions (in a link element) that they will understand and parse and place it above the @import rule
@import规则主要是一个hack。所有现代浏览器都理解@import规则，而早期浏览器则不理解。因此，如果您的站点由于css规则而在早期的浏览器上崩溃(虽然还不是常见的事情，但是…)，您可以为旧版本(在链接元素中)提供一个简单的css，它们将理解并解析它，并将其置于@import规则之上
EDIT: Since the @import rule creates a few issues with caching (as mentioned already from others) you could @import(styles.php) and in the styles.php do something like
编辑:由于@import规则创建了一些缓存问题(正如前面提到的)，所以可以使用@import(styles.php)和样式。php做类似
ob_start ("ob_gzhandler");
header("Content-type: text/css");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT";
header($ExpStr);
echo ("@import url(style1.css);\r");
echo ("@import url(style2.css);\r");
echo ("@import url(style3.css);\r");
#7
1
It's about precedence. if you @import foo.css, the CSS rules behave as if you had put the contents of foo.css directly into that <style> block. This means that they have a higher priority than a css file that is <link>ed in.
它是关于优先。如果你@ import foo。css, css规则的行为就好像你放了foo的内容一样。css直接插入到
So if you were to @import a file that set font-size: 12pt AND link a file that set font-size: 14pt you would end up with 12pt text.
因此，如果您要@import一个设置字体大小:12pt的文件，并链接一个设置字体大小:14pt的文件，那么您将得到12pt文本。
#8
0
the first one is, in fact, an embedded CSS that refers to another file; while the second one is a direct refer from HTML to CSS.
第一个是，实际上是一个嵌入的CSS，它引用另一个文件;而第二个则是HTML到CSS的直接引用。
i can't think of a reason to use the first one.
我想不出为什么要用第一个。
#1
4
There isn't much difference unless you are using very old browsers (netscape 4.x and ie 3.x). You can read a complete lowdown on what each means here.
除非你使用的是非常旧的浏览器(netscape 4)，否则没有什么区别。和ie 3. x)。你可以完整地了解每个词在这里的含义。
From a standards viewpoint, there is no difference between linking to an external style sheet or importing it. Either way is correct, and either way will work equally well (in most cases).
从标准的观点来看，链接到外部样式表或导入外部样式表之间没有区别。任何一种方法都是正确的，而且两种方法都同样有效(在大多数情况下)。
#2
13
According to Yahoo's "Best Practices for Speeding Up Your Web Site" using @include behaves like putting the <link> at the bottom of the page in Internet Explorer.
根据雅虎的“加速你的网站的最佳实践”，使用@include就像在Internet Explorer页面底部放置 一样。
Having the CSS load at the end of the page causes the page to be rerendered. That means, that the page is first shown without CSS and then redrawn with CSS. That slows the loading of the page a bit down.
在页面末尾加载CSS会导致页面重新运行。这意味着，页面首先在没有CSS的情况下显示，然后用CSS重新绘制。这就降低了页面的加载速度。
#3
8
The CSS Cascade and why you should care
It comes down to CSS Specificity and CSS Cascading. Tread carefully and know what you're doing and CSS Specificity can be your friend.
这取决于CSS的特性和CSS级联。小心行事，知道自己在做什么，CSS特性可以成为你的朋友。
// bring CSS into the Page
<style type="text/css">@import url("importedStyles.css");</style>
/// Link to CSS Style Sheet
<link rel="stylesheet" type="text/css" href="linkedStyles.css" />
Since @import brings the style into that page, those rules will override External or "linked" stylesheets. In-Line CSS trumps either because of a higher CSS specificity:
由于@import将样式引入页面，这些规则将覆盖外部或“链接”样式表。内嵌CSS的优势不是因为更高的CSS特性:
<span style="color: red;">I am DEFINITELY RED</span>
However, this only works when the rules are the same specificity
然而，这只有在规则具有相同的特异性时才有效
Take the following:
采取以下:
<div class="error">I am an error message</div>
If I have a rule in the importedStyles.css of so:
如果我在输入样式中有一个规则。css的:
.error { color: blue; } /* specificity = 10 */
And a rule in "externalStyles.css" like so:
以及“外部样式”中的一条规则。css”一样:
div.error { color: red; } /* specificity = 11 */
It will take the externalStyles version
它将采用externalStyles版本
Note: CSS specificity of inline style is 1000, so it trumps all things, except the !important tag which is 10000. Another CSS Specificity Article
注意:内嵌样式的CSS特性是1000，所以它胜过一切，除了!重要的标记是10000。CSS特异性的另一篇文章
CSS Specificity Reference
- !important = 10,000
- 重要! = 10000
- inline style = 1000
- 内联风格= 1000
-
each #id in the rule = 100 -eg, this is 200:
规则中的每个#id = 100 -例如，这是200:
#content #footer { color: red; } /* 200 */
{颜色:红色;} / * 200 * /
-
each class = 10
每个类= 10
-
each html element = 1
每个html元素= 1
So, some examples:
所以,一些例子:
body .selected { color: red; } /* 11 */
ul li { color: red; } /* 2 */
ul li.selected { color: blue; } /* 12 */
#content ul li.selected a { color: red; } /* 113 */
/* Careful, can't override this, ever */
a { color: blue; !important } /* 10,000 - Override everything */
So... the Cascade applies to element of the same Specificity only. Cascades are applied AFTER specificity rules are applied.
所以…级联仅适用于相同特性的元素。应用特异性规则后，应用级联。
#4
1
As said the first is an imbedded style sheet (which can be also be done in external stylesheets) This can lead to better organised stylesheets when used externally but bear in mind the when a stylesheet is imbedded the browser will not cache it
如前所述，第一个样式表是嵌入的样式表(也可以在外部样式表中执行)，这可以在外部使用时导致组织更好的样式表，但请记住，当样式表被嵌入时，浏览器不会缓存它
#5
1
Historically, I believe the first was often used to prevent Netscape 4 from picking up on your styles (I could be wrong, though; when Netscape 4 was still an issue, I wasn't very aware of cross-browser coding so this is a very fuzzy memory).
从历史上看，我认为第一个常被用来阻止Netscape 4选择你的风格(尽管我可能错了;当Netscape 4还是一个问题的时候，我还没有意识到跨浏览器编码，所以这是一个非常模糊的内存)。
These days, people will sometimes use <link> to include a single stylesheet from the webpage, and then @import to grab a bunch of others from that single sheet. This allows you to separate your styles out into layout.css, typography.css, etc. if that's the way you like to roll.
现在，人们有时会使用 从网页中包含一个样式表，然后使用@import从这个单表中获取许多其他样式表。这允许您将样式分离到布局中。css,排版。css等等，如果你喜欢的话。
As Tungle mentioned, caching becomes an issue with @import, but only for IE.
正如Tungle提到的，缓存对于@import是一个问题，但仅对IE是如此。
#6
1
the @import rule is mainly a hack. All modern browsers understand the @import rule whereas early browsers don't. So, if your site crashes on early browsers due to a css rule (not a common thing to happen but yet...) you can have a simple css for the older versions (in a link element) that they will understand and parse and place it above the @import rule
@import规则主要是一个hack。所有现代浏览器都理解@import规则，而早期浏览器则不理解。因此，如果您的站点由于css规则而在早期的浏览器上崩溃(虽然还不是常见的事情，但是…)，您可以为旧版本(在链接元素中)提供一个简单的css，它们将理解并解析它，并将其置于@import规则之上
EDIT: Since the @import rule creates a few issues with caching (as mentioned already from others) you could @import(styles.php) and in the styles.php do something like
编辑:由于@import规则创建了一些缓存问题(正如前面提到的)，所以可以使用@import(styles.php)和样式。php做类似
ob_start ("ob_gzhandler");
header("Content-type: text/css");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT";
header($ExpStr);
echo ("@import url(style1.css);\r");
echo ("@import url(style2.css);\r");
echo ("@import url(style3.css);\r");
#7
1
It's about precedence. if you @import foo.css, the CSS rules behave as if you had put the contents of foo.css directly into that <style> block. This means that they have a higher priority than a css file that is <link>ed in.
它是关于优先。如果你@ import foo。css, css规则的行为就好像你放了foo的内容一样。css直接插入到
So if you were to @import a file that set font-size: 12pt AND link a file that set font-size: 14pt you would end up with 12pt text.
因此，如果您要@import一个设置字体大小:12pt的文件，并链接一个设置字体大小:14pt的文件，那么您将得到12pt文本。
#8
0
the first one is, in fact, an embedded CSS that refers to another file; while the second one is a direct refer from HTML to CSS.
第一个是，实际上是一个嵌入的CSS，它引用另一个文件;而第二个则是HTML到CSS的直接引用。
i can't think of a reason to use the first one.
我想不出为什么要用第一个。