什么'；这两种将html页面链接到css文件的方法有什么区别？

我已经阅读了一些关于css的教程，我看到了两种不同的方式来说明应该使用哪个css文件来设置页面样式：

<style type="text/css">@import url("style.css");</style>

导入url（“style.css”）； 及

---

他们之间有什么区别？我应该使用哪一个？

事实上，第一个是指另一个文件的嵌入式CSS；第二个是从HTML直接引用到CSS

---

我想不出使用第一个规则的理由。

导入规则主要是一种黑客行为。 所有现代浏览器都理解@import规则，而早期浏览器则不理解。 因此，如果您的站点在早期浏览器上由于css规则而崩溃（这不是常见的事情，但还…），您可以为旧版本（在链接元素中）提供一个简单的css，他们将理解并解析该css，并将其置于@import规则之上

编辑：由于@import规则在缓存方面产生了一些问题（正如其他人已经提到的），您可以@import（styles.php）并在styles.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");

---

如前所述，第一种是嵌入的样式表（也可以在外部样式表中完成），这可以在外部使用时产生更好的组织样式表，但请记住，当嵌入样式表时，浏览器不会历史性地缓存它，我相信第一个经常被用来阻止Netscape 4模仿你的风格（尽管我可能错了；当Netscape 4仍然是一个问题时，我不太了解跨浏览器编码，所以这是一个非常模糊的记忆）

现在，人们有时会使用

从网页中包含一个样式表，然后使用@import从该样式表中获取其他样式表。这允许您将样式分为layout.css、typography.css等，如果您喜欢这样做的话

---

正如Tungle所提到的，缓存成为@import的一个问题，但仅适用于IE。

除非您使用的是非常的旧浏览器（netscape 4.x和IE 3.x）。你可以读到每一个词的全部含义

从标准的角度来看，链接到外部样式表与导入外部样式表之间没有区别。无论哪种方法都是正确的，并且无论哪种方法都同样有效（在大多数情况下）

据了解，使用@include的行为类似于在Internet Explorer中将

---

在页面末尾加载CSS会导致页面重新呈现。这意味着，页面首先显示时不使用CSS，然后使用CSS重新绘制。这会使页面加载速度减慢一点。

这是关于优先级的问题。如果您

@import

foo.css，css规则的行为就好像您将foo.css的内容直接放入该

块一样。这意味着它们的优先级高于在中插入的css文件

因此，如果您要@import一个设置为

font size:12pt的文件，并链接一个设置为
font size:14pt
的文件，您将得到12pt的文本。
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" />

“externalStyles.css”中的规则如下：

它将采用externalStyles版本

注意：内联样式的值是1000，所以它胜过所有东西，除了！重要的标签是10000

CSS特异性参考

!！重要=10000
内联样式=1000
规则中的每个#id=100
-例如，这是200：

#内容#页脚{颜色：红色；}/*200*/

每班=10

每个html元素=1


因此，有一些例子：

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 */

所以。。。级联反应仅适用于具有相同特异性的元素。在应用特定性规则之后应用级联。
所以，这意味着我应该同时使用这两种方法？不，我认为最好使用链接。如果您的目标是高性能，只链接到一个外部css，HTTP请求越少越好，但请永远不要在生产服务器上使用它。它告诉浏览器每次在每个页面上重新请求此文件，并拒绝脱机使用。这严重损害了网站的响应能力（就像多个@import规则一样），这是不使用它的一个很好的理由，但这不是它存在的原因。这只是一个潜在有用功能的典型错误IE实现。从我到目前为止看到的情况来看，似乎是首选方法。继承性的差异在今天仍然存在。该页面只讨论非常旧的浏览器，因为它是一个非常旧的页面：）
<span style="color: red;">I am DEFINITELY RED</span>

<div class="error">I am an error message</div>

.error { color: blue; } /* specificity = 10 */

div.error { color: red; } /* specificity = 11 */

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 */