Question

为什么我的style.css不对index.html进行更改？两个文件都完美验证。
文件夹设置：网站＆gt; index.html，style.css。

的index.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>

的style.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;
}

Answer 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突出显示，并且指定的样式正在应用。至少，我希望你能看到这一点。如果你没有看到这个，那么你的环境就会出现问题，或者你没有准确地解释这种情况。

CSS不导入。

1 个答案: