Question

我有以下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">
                ...

但这不起作用。

Answer 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是否正确。

Answer 2

链接标记位于HEAD标记中，因此您需要

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

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

Answer 3

对于具有SEO意识的人来说，如果可能的话，最好将CSS文件放在与html相同的文件夹中。理想情况下，你会想要：

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

这将帮助您保持更平坦的文件结构，因为浏览器在加载页面时只有一个子文件夹可以抓取。

Answer 4

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

HTML中的CSS类引用

4 个答案: