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文件应位于同一位置。

Answer 2

我希望你的style.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 type="text/css" ></style>标记，在您的HTML中，样式表将像<link href="style.css" rel="stylesheet" type="text/css">一样链接（包含在头标记中）

Answer 3

“它不像在内联时那样工作。”有点模糊。如果这是你唯一使用的CSS，那么它应该解决相同的问题。如果还有其他样式表，则必须记住，在给定相同特异性的情况下，最后一条规则应用“获胜”，内联规则通常被评估为最具体。

您还必须记住，URL（如图像引用）将相对于样式表进行解析。因此，假设您说您的样式表位于Styles文件夹中，则网址MyImages/MenuLine.jpg将解析为Styles/MyImages/MenuLine.jpg。

将页内CSS移动到外部文件

3 个答案: