CSS href 与内联样式表的区别答案

【问题标题】：CSS href vs inline stylesheet differenceCSS href 与内联样式表的区别
【发布时间】：2010-10-10 14:23:02
【问题描述】：

我有一个包含内容的小 CSS 文件：

<style type="text/css">

li {
padding: 10px;
font-family:  Arial;
}

</style>

应该在列表元素之间留一些空间并更改字体。现在，如果我在 HTML 中包含这个 CSS 文件，如下所示：

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

它不起作用:(。

但是，如果我在 html“head”块中包含实际的 CSS 代码，它就可以工作。

我真的更喜欢采购 CSS（这样不同的文件可以共享代码）。知道有什么问题以及如何解决吗？

问候， JP

【问题讨论】：

标签： html css href

【解决方案1】：

你应该省略

<style type="text/css">

和

</style>

.css 文件中的标签，因为这些标签仅在 HTML 中用于表示 CSS 样式（如果您将它们包含在页面 <head> 中）。如果您包含它们，浏览器将尝试将它们视为 CSS 代码，但事实并非如此，这会导致您的样式表无法正常工作。

【讨论】：

【解决方案2】：

你不应该在你的 css 文件中使用script 标签。只需li {..} 就足够了。

此外，检查路径 (./css/lists.css) 可能会有所帮助。如果有错误，则不包含任何内容。

【讨论】：

路径正确（一个很好的检查方法是在浏览器中查看源代码，然后单击 css href 链接查看它是否损坏）。但是，正如您所指出的，问题在于额外的脚本标签。删除它，脚本现在可以工作了:)