个人中心
gpt4 book ai didi

html - CSS 不导入。

转载 作者：行者123 更新时间：2023-11-28 18:43:13 25 4
gpt4 key购买 nike

为什么我的 style.css 没有对 index.html 进行更改？两个文件都可以完美验证。
文件夹设置:site > 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>

样式.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;
}

最佳答案

根据您的标记和 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 被突出显示并且指定的样式正在应用。至少，我希望你能看到这一点。如果您没有看到这一点，那么您的环境可能存在严重问题，或者您没有准确解释情况。

Screenshot of debugging this

关于html - CSS 不导入。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11072252/

25 4 0
文章推荐： objective-c - 如何使 BarButtonSystemItem 有边框？
文章推荐： ios - 访问 NSArray/UITableView 中的第一个对象
文章推荐： objective-c - NSArray 上的 IOS 类别导致 "instance message does not declare a method with selector"
文章推荐： ios - 有没有办法阻止 AVPlayer 的 rate 属性被重置？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com