1

为什么我的 style.css 没有对 index.html 进行更改？这两个文件都完美验证。
文件夹设置：site > index.html, style.css。

索引.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>new site</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="js/scripts.js"></script>
</head>

<body>
<div id="container">

        <header>
            <div id="status">
                <a href="#"><img src="img/status.png" alt="Currently available for work" /></a>
            </div><!-- end status -->
            <nav>
                <ul>
                    <li><a href="#">Work</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
            <h1><a href="#"><img src="img/banner.png" alt="Return to the homepage" /></a></h1>
            <div id="blurb">
                <p>blah blah blah lorem ipsum blah blah</p>
            </div><!-- end blurb -->
        </header>

        <div class="services">
            <ul>
                <li><h2>Design 1</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
                <li><h2>Design 2</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
                <li><h2>Design 3</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
                <li><h2>Design 4</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
            </ul>
        </div><!-- end services -->

        <div class="recent">
            <div id="recent-work">

            </div><!-- end recent-work -->
            <div id="recent-blog">

            </div><!-- end recent-blog -->
        </div><!-- end recent -->



    </div><!-- end container -->
</body>
</html>

样式.css

/* Reset */

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, code, img,
small, strong, dl, dt, dd, ol, ul, li
fieldset, form, label {
    background: transparent;
    border: 0;
    font-size: 100%;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

body {
    background: url(img/background.png) repeat;
    font-family: alexandriaflf-bold-webfont, 
                 Constantia,
                 "Lucida Bright",
                 "Bitstream Vera Serif",
                 "Liberation Serif",
                 serif;
}

ol, ul {
    list-style-type: none;
}

/* Type */

@font-face {
    font-family: alexandriaflf-bold-webfont;
    src: url('type/alexandriaflf-bold-webfont.eot');
    src: url('type/alexandriaflf-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('type/alexandriaflf-bold-webfont.woff') format('woff'),
         url('type/alexandriaflf-bold-webfont.ttf') format('truetype'),
         url('type/alexandriaflf-bold-webfont.svg#') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: alexandriaflf-bolditalic-webfont;
    src: url('type/alexandriaflf-bolditalic-webfont.eot');
    src: url('type/alexandriaflf-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('type/alexandriaflf-bolditalic-webfont.woff') format('woff'),
         url('type/alexandriaflf-bolditalic-webfont.ttf') format('truetype'),
         url('type/alexandriaflf-bolditalic-webfont.svg#') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: nevis-webfont;
    src: url('type/nevis-webfont.eot');
    src: url('type/nevis-webfont.eot?#iefix') format('embedded-opentype'),
         url('type/nevis-webfont.woff') format('woff'),
         url('type/nevis-webfont.ttf') format('truetype'),
         url('type/nevis-webfont.svg#') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: nevis-webfont;
    font-size: 160%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

h2 {
    font-size: 80%;
    font-weight: normal;
}

h3 {
    font-size: 80%;
    font-weight: bold;
}


p {
    font-size: 80%;
}

a {
    color: #202020;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}
4

1 回答 1

1

根据您的标记和 CSS，您正在开发的文件夹中应该包含这些文件夹和文件。可以？

index.html
style.css
js/
    scripts.js
img/
    status.png
    banner.png
    background.png
type/
    alexandriaflf-bold-webfont.eot
    alexandriaflf-bold-webfont.woff
    alexandriaflf-bold-webfont.ttf
    alexandriaflf-bold-webfont.svg

如果您的样式表没有被应用，要么是您错误地调用它（不，您的链接标签很好），要么 CSS 语法不好（不，看起来不错），或者文件不在您声明它应该在的位置（坏小路）。更罕见的情况可能是：您禁用了样式表并忘记重新启用；一个或两个文件有某种编码错误或杂散的坏字符，使其损坏。

编辑

我已经按照您的描述安排了您的 index.html 和 style.css，这就是我所看到的。样式适用。在 Chrome 开发人员工具中，您会看到h2突出显示并且正在应用指定的样式。至少，我希望你能看到这一点。如果您没有看到这一点，那么您的环境要么非常错误，要么您没有准确地解释情况。

调试这个的截图

于 2012-06-17T15:11:48.387 回答