HTML 中的 CSS 类引用答案

【问题标题】：CSS Class Referencing in HTMLHTML 中的 CSS 类引用
【发布时间】：2013-06-30 15:08:19
【问题描述】：

我有以下 HTML 代码：

<div id="navigation">            
   <ul class="top-level">
       <li><a href="./Default.aspx">Home</a></li>
   </ul>
</div>

我正在使用下面的 CSS 类：

<style type="text/css">
#navigation { font-size:0.75em; width:150px; }
#navigation ul { margin:0px; padding:0px; }
#navigation li { list-style: none; }

ul.top-level { background:#666; }
}
</style>

如何将 CSS 代码移动到单独的 .css 文件中并在 HTML 中引用它？我尝试使用：

<div id="navigation">
                <link rel="stylesheet" href="CSS/Styles.css"/>
                <ul class="top-level">
                ...

但这不起作用。

【问题讨论】：

请注意：HTML 中的链接元素没有右斜线。
@Rob: 不正确——if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/).——它毫无意义且可选，但它确实存在。
@Quentin 这证明了我的观点。我知道那张纸条，但考虑到我不想太技术化……我想我应该说“没有必要……”

标签： html asp.net css

【解决方案1】：

将<link rel="stylesheet" href="CSS/Styles.css"/> 移动到头部或<div id="navigation"> 之前。像这样：

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

或者：

<link rel="stylesheet" href="CSS/Styles.css"/>
<div id="navigation">
         <ul class="top-level">

但最好将它移到头部，因为它更易于管理。还要检查CSS/Styles.css的路径是否正确。

【讨论】：

我尝试将链接标签放在我的标题中。我注意到 head 标签中已经有一个 link 标签，所以现在我的 head 标签看起来像这样：但它不起作用。是否与 Styles.css 文件中的其他 CSS 类有关？
确保您的 css 文件的路径有效。此外，在 cmets 中，您可以通过将代码放在两个 ` 字符 like so 之间来显示代码。
@user2261573：如果它已经存在，则不应复制它。删除代码中的多余项。并检查CSS/Styles.css 的路径是否正确（指向您服务器上的文件）。
@user2261573：要检查的另一件事是您是否对自己的风格有很多定义。例如：检查#navigation是否同时在CSS/Styles.css和StyleSheet.css中
我知道路径是正确的。现在我将 CSS 代码放在 StyleSheet.css 文件中以保持简单。但是它仍然无法正常工作。到目前为止，这是我在 site.master 中的代码：<head id="Head1" runat="server"> <title></title> <link rel="Stylesheet" type="text/css" href="StyleSheet.css" /> </head> ... <table cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 150px; background-color: #CCFFFF"> <div id="navigation"> <ul class="top-level"> <li><a href="./Default.aspx">Home</a></li>

【解决方案2】：

链接标签在 HEAD 标签中，所以你需要

<html>
    <head>
        <link rel="stylesheet" href="CSS/Styles.css"/>
    </head>
    <body>
    ...

当然要确保您使用的相对路径与 html 文档位于同一文件夹中

【讨论】：

StyleSheet.css 是否与您的 html 文件位于同一目录中？如果不是，您需要 StyleSheet.css 的相对路径，或者它的绝对路径。
搞定了！我的错误是我将不同的类放在一个 css 文件中，我使用了一个单独的文件并将一个类放在那里，它工作正常。

【解决方案3】：

对于有 SEO 意识的人来说，如果可能的话，将 CSS 文件与 html 放在同一个文件夹中实际上是最佳做法。所以理想情况下，你会想要：

<html>
<head>
    <link rel="stylesheet" href="styles.css"/>
</head>
<body>

这将帮助您保持更扁平的文件结构，因为浏览器在加载您的页面时需要抓取的子文件夹更少。

【讨论】：

您在谈论目录（“文件夹”），但引用了文档中元素的结构。目录/文件夹位于服务器上并包含文件。您所说的元素是所服务文档中的标记。

【解决方案4】：

搞定了！我的错误是我将不同的类放在一个 css 文件中，我使用了一个单独的文件并将一个类放在那里，它工作正常。

【讨论】：