Html 将页面CSS移动到外部文件

当我把CSS放在下面的HTML文档的头部分，看起来一切都很好。但是，当我将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>

.红色#石板{
位置：相对位置；
显示：块；
高度：42px；
字体大小：15px；
字体大小：粗体；
背景：透明url（MyImages/MenuLine.jpg）重复-x左上角；
字体系列：Calibri；
}
.red#slatenav ul{
边际：0px；
填充：0；
列表样式类型：无；
宽度：自动；
}
雷德·斯莱特·乌尔·李先生{
显示：块；
浮动：左；
边距：0 1px 0；
}
.红色#slatenav ul li a{
显示：块；
浮动：左；
颜色：#fff；
文字装饰：无；
填充：12px28px28px；
高度：28px；
边框：1px#606060实心；
}

我的菜单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:

我希望你的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;}

---

也就是说，没有

标记，在您的HTML中，样式表将像这样链接

（包含在head标记中）

我希望您的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;}

也就是说，没有

标记，在HTML中，样式表将像这样链接

（包含在head标记中）

从外部样式表中删除

和

添加外部样式表的步骤。

1） 在头标签中添加代码

2） 创建一个名为style.css的文件，并将您的样式粘贴到该文件中。请记住，您从外部样式表中排除了部分

和

3） style.css和HTML文件应位于同一位置。

从外部样式表中删除

和

添加外部样式表的步骤。

1） 在头标签中添加代码

2） 创建一个名为style.css的文件，并将您的样式粘贴到该文件中。请记住，您从外部样式表中排除了部分

和

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

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

您还必须记住，URL（如图像引用）将相对于样式表进行解析。因此，假设您说您的样式表位于

Styles

文件夹中，那么URL

MyImages/MenuLine.jpg

将解析为

Styles/MyImages/MenuLine.jpg

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

---

---

您还必须记住，URL（如图像引用）将相对于样式表进行解析。因此，如果您说您的样式表位于

Styles

文件夹中，那么URL

MyImages/MenuLine.jpg

将在外部css中解析为

Styles/MyImages/MenuLine.jpg

，您是否省略了样式标记？你可能想发布你的目录结构和用于导入样式表的链接标记。你是否在HTML中包含了对样式表的引用？链接是styles文件夹，没有问题。这就是为什么要半途而废的原因再次感谢…我为你创建了一个JSFIDLE。按照链接，然后让我们知道我们应该看到什么，而不是什么（除了图像，显然）。感谢Tieson编辑我的问题，在外部css中非常清楚，你是否省略了样式标记？你可能想发布你的目录结构和用于导入样式表的链接标记。你是否在HTML中包含了对样式表的引用？链接是styles文件夹，没有问题。这就是为什么要半途而废的原因再次感谢…我为你创建了一个JSFIDLE。按照链接，然后让我们知道我们应该看到哪些我们没有看到的（当然除了图片）。感谢Tieson将我的问题编辑为非常清晰的No leo…我只使用了那样的内容…但工作方式不同head@user2715284我已经编辑了我的答案，按照步骤看它是否有效，我只是这样使用…但不是像同一个表头一样工作。你能再次检查吗？…你能至少提供你的项目文件夹结构吗？您的HTML页面使用的全部代码？Site.css中的Styles文件夹可用…图像中的MyImages文件夹可用。。谢谢，利奥…不，利奥…我只是这样用…但不是像同一张纸一样工作head@user2715284我已经编辑了我的答案，按照步骤进行操作，看看它是否有效。是的，leo，我只使用了这样的答案…但没有使用相同的页眉。请您再次检查一下？…您至少可以提供项目的文件夹结构吗？您的HTML页面使用的全部代码？Site.css中的Styles文件夹可用…图像中的MyImages文件夹可用。。谢谢利奥…给你的网页链接，这样我们就可以检查了。你是说不，把链接贴到网页上。以便