html - 将页内 CSS 移动到外部文件

Question

当我将 CSS 放在 HTML 文档的 head 部分内联时，一切似乎都正常。但是，当我将 CSS 移动到外部文件时，它无法像内联时那样工作。

我的问题是，当我将 CSS 代码移动到外部文件时，是否需要更改任何内容？为什么它的工作方式与在 HTML 头部时的工作方式不同？

对我有什么建议吗？感谢所有的帮助...

我的菜单 CSS:

<style type="text/css">
    .red #slatenav {
        position:relative;
        display:block;
        height:42px;
        font-size:15px;
        font-weight:bold;
        background:transparent url(MyImages/MenuLine.jpg) repeat-x top left;
        font-family: Calibri;
    }
    .red #slatenav ul {
        margin:0px;
        padding:0;
        list-style-type:none;
        width:auto;
    }
    .red #slatenav ul li {
        display:block;
        float:left;
        margin:0 1px 0 0;
    }
    .red #slatenav ul li a {
        display:block;
        float:left;
        color:#fff;
        text-decoration:none;
        padding:12px 28px 0 28px;
        height:28px;
        border: 1px #606060 solid;
    }
</style>

我的菜单 HTML

<div class="red">
    <div id="slatenav">
        <ul>
            <li id="Home"><a href="#" title="css menus"></a>
            </li>
            <li><a href="#" title="css menus">About Us</a>
            </li>
            <li><a href="#" title="css menus">Solutions</a>
            </li>
            <li><a href="#" title="css menus">Services</a>
            </li>
            <li><a href="#" title="css menus">Technical Support</a>
            </li>
        </ul>
    </div>
</div>

谢谢

jsFiddle:http://jsfiddle.net/3wJfx/

Answer 1

删除 <style type="text/css">和 </style>来自您的外部样式表。

添加外部样式表的步骤。

1) 添加代码<link href="style.css" rel="stylesheet" type="text/css">在你的头标签内。

2) 创建一个名为 style.css 的文件并将您的样式粘贴到该文件中。请记住，您排除了部分 <style type="text/css">和 </style>来自您的外部样式表。

3) style.css 和 HTML 文件应该在同一位置。