HTML文件不会读取外部CSS？答案

【问题标题】：HTML document will not read external CSS?HTML文件不会读取外部CSS？
【发布时间】：2015-03-27 17:23:34
【问题描述】：

我尝试了很多方法，但无法让这两个文档一起工作。我确信 CSS 文件与正确的文件名正确链接。在观看了下面有关编写博客的 YouTube 视频教程后，我正在尝试此操作。 https://www.youtube.com/watch?v=24QmGjcqIiw

这是 HTML：

<!doctype html>
    <html>
            <head>
                <title>Test</title>
                    <link rel="stylesheet" href="new 1.css" type="text/css" media="screen" />
            </head>
            <body>
                    <div id="wrapper">
                    <div id="header">
                    </div>

    <div id="content">
    <div class="post">
    <h1>Post Title</h1>
    <p>Testing Testing 123...</p>
                </div>

                <div class="post">
    <h1>Post Title</h1>
    <p>Testing Testing 123...</p>
                </div>

                <div class="post">
    <h1>Post Title</h1>
    <p>Testing Testing 123...</p>
                </div>

                <div class="post">
    <h1>Post Title</h1>
    <p>Testing Testing 123...</p>
                </div>

                <div class="post">
    <h1>Post Title</h1>
    <p>Testing Testing 123...</p>
                </div>

            </div>          
        </div>
    </body>
    </html>

现在是 CSS：

*{

    margin:0px;
    padding:0px;
}
body{
        background-color: #f0f0f0;
        font-size:14px;
        color:#000000;
    }
    wrapper{
            width: 80px;
            margin-left:auto;
            margin-right:auto;
    }
    #header 

    {
        background-color:#cZazqqcccccaccccc;
        height:800px;
        width: 100%;
        margin-bottom:10px;
    }


    #.post
    {
        background-color:#ffffff;
        padding: 5px;
        border: 1px solid #cccccc;
        margin-bottom:5px;
    }

【问题讨论】：

尝试new1.css 而不是new 1.css。两个文件（.html 和 .css）需要在同一个文件夹中。
是的......空间肯定会把它扔掉。
除了 CSS 文件相对于您的 HTML 文件的位置之外，您的某些 CSS 是可疑的。例如，#.post 无效。 #cZazqqcccccaccccc 的标题背景颜色是一个奇怪的值....
谢谢，修正了错误。我注意到它在我编写的mac上完美运行，但是当我将它移到Windows机器上时，问题就出现了。文件位置和名称绝对正确。

标签： html css youtube blogs

【解决方案1】：

我会尝试 2 个最常见的罪魁祸首：

文件名不正确
文件位置不正确

如果您的文件名绝对正确，请直接转到 2。避免空格被认为是最佳做法，即使浏览器应该能够读取它们，正如 @zzzzBov 指出的那样。

您可以通过 3 种主要方式引用文件：

文件的直接链接，无需指定路径
一个相对链接，它指向您的文件相对到请求它的文件所在的位置
绝对链接，指定域或硬盘驱动器的完整文件路径

如果你的文件结构（你如何组织所有东西）看起来像这样：

public_html
    L css
        L myStyles.css
    L index.html
    L aboutMySite.html

index.html 和 aboutMySite.html 中的链接如下所示：

直接链接：/css/myStyles.css（第一个 / 代表根目录，或您网站所在的最高级别文件夹）
相关链接：../css/myStyles.css
绝对链接：www.mysite.com/css/myStyles.css

【讨论】：

【解决方案2】：

避免在文件名中使用空格字符。

将 new 1.css 重命名为 new1.css（确保引用和实际文件名匹配）并确保所有 CSS 文件与您的 HTML 文件位于同一文件夹中，因为您没有指定任何路径。

如果您真的希望使用空格字符（URI 的无效字符），请使用 %20 对其进行编码，但避免使用它们要简单得多。

【讨论】：

空格不是问题，尽管它们应该在[href] 属性中正确编码为new%201.css。
因此使用“避免”措辞来保持简单。
如果您没有正确转义空格字符，浏览器仍然可以正常工作。