0

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

但这不起作用。

4

4 回答 4

0

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

于 2013-06-29T08:00:17.527 回答
0

链接标签进入 HEAD 标签，所以你需要

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

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

于 2013-06-29T08:00:55.160 回答
0

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

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

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

于 2013-06-29T11:40:40.090 回答
-1

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

于 2013-06-30T07:08:19.437 回答