0

当我将 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/

4

3 回答 3

2

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

添加外部样式表的步骤。

1）<link href="style.css" rel="stylesheet" type="text/css">在您的 head 标签中添加代码。

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

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

于 2013-08-28T08:51:03.363 回答
1

我希望你的 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">（包含在 head 标签中）

于 2013-08-28T08:39:47.390 回答
0

"it does not work as it did when inline." is a little vague. If this is your only use of CSS, then it should resolve the same. If there are other stylesheets, you have to remember that, given equal specificity, the last rule applied "wins", with inline rules generally being evaluated as most specific.

You also have to remember that URLs, like your image references, will resolve relative to the stylesheet. So, given that you said your stylesheet was in a Styles folder, the URL MyImages/MenuLine.jpg will resolve as Styles/MyImages/MenuLine.jpg.

于 2013-08-28T09:09:21.417 回答