Question

以下是我的代码示例：

<!doctype HTML>
<html>
    <head>
        <title>Homepage</title>
        <link rel="stylesheet" type="text/css" href="C:/Users/OneDrive/Programming/HTML/css/test.css">
    </head>
    <body>
        <h1>This is a heading.</h1>
        <p1>This is a paragraph.</p1>

        <ul>
            <li>This is the first element of a list</li>
            <li>This is the second one.</li>
        </ul>

    <button type="button" onclick="alert('That tickles...')">Press me!</button><br>
    <button type="button" onclick="">I do nothing. :-(</button>

    </body>
</html>

我的CSS文件是什么情况......

p {
    font-family: Courier New;
    color: white;
    background-color: lightblue;
}

...位于以下方式：

HTML/
..../home.html
..../css/
......../test.css

我试图通过href="css/test.css"访问css，但无济于事。我做错了什么？

P.S。对我的代码有任何优化吗？

Answer 1

这是正确的：

<link rel="stylesheet" type="text/css" href="css/test.css">

但在您的代码中，任何 p 标记都不是 p1 。所以替换这个：

p {
    font-family: Courier New;
    color: white;
    background-color: lightblue;
}

有了这个：

p1 {
    font-family: Courier New;
    color: white;
    background-color: lightblue;
}

（对不起我的英语。我来自捷克共和国）

Answer 2

当您访问本地文件时，您必须指定文件URI方案（file:///）：

<link rel="stylesheet" href="file:///C:/Users/OneDrive/Programming/HTML/css/test.css">

或使用相对路径：

<link rel="stylesheet" href="css/test.css">

Answer 3

<link rel="stylesheet" type="text/css" href="/css/test.css">

Answer 4

我想说检查你的实际css文件的文件名的拼写。确保它实际上是test.css而不是tst.css或tesy.css或其他一些错字。也请检查拼写错误的文件夹名称。

如果您的css文件位于项目文件夹中的某个位置，就像您的HMTL文件一样，我猜测错字必须成为问题。例如，如果您的项目结构如下所示

yourProjectFolder
||
||_ index.html
|
|__ stylesFolder
      |
      |_ test.css

您的脚本必须如下所示

<link rel="stylesheet" type="text/css" href="stylesFolder/test.css">

如果这确实是您定位文件的方式而且您遇到错误，那么您必须在整个过程中拼写错误。

无法从HTML文本访问CSS文件

4 个答案: