为什么HTML代码没有与CSS代码链接？

如何解决为什么HTML代码没有与CSS代码链接？

这是我用于index.html的代码

<!DOCTYPE html>
<html>
<head>
<title>Github Hub </title>
<link rel="stylesheet" type="text/css" href="css/site.css">
</head>
<body>
<header>
    <div><img src="C:\Users\Maryam\Pictures\Saved Pictures\github.logo.jpg" width="205" height="150" /></div>
    <div>This is <i>site for Github</i> to search for interesting peojrcts.</div>
    <nav>
        <ul>
            <li> <a href="/index.html">Home</a> </li>
            <li> <a href="/contact.html">Contact</a> </li>
            <li> <a href="/abouy.html">About</a> </li>
        </ul>
    </nav>
</header>
<section id="main">
    <p>We will show you a list of <b> Github projects</b><span> and the dates</span>,(click here for more information <a href="http://github.com">Gethub</a>).</p>
    <form action="http://wilder.azurewebsites.net/echo" method="post">
        <label for="SearchPhrase">Search Phrase:</label>
        <input name="SearchPhrase" id="Searchphrase" /> <br />
        <input type="checkbox" name="UseStars" /> <label for="UseStars"> Use Stars?</label> <br />
        <label for="LangChoice">Languages:</label><br />
        <select name="langChoice" id="langChoice">
            <option selected>All</option>
            <option>JavaScript</option>
            <option>Java</option>
            <option>C#</option>
            <option>Ruby</option>
</select>
<br />
<input type="submit" value="search" />

</form>
</section>
<footer>
    &copy; 2020 Mariam Shabou LLC
</footer>

这是我用于site.css的代码我将HTML与CSS链接在一起，但是一旦运行该工作，该问题就不会出现在网络上

/*site.css*/
    header,footer {
        background: lightgrey;
        border: solid 1px black;
        /**font-family: 'Times New Roman',sans-serif,**/
    }
    footer{
        padding: 10px;
        border-radius: 3px;
    }
    body{
        font-family: Segoe UI,Arial,Helvetica,sans-serif;
        font-size: 14px;
    }
    #main{
        border: solid 1px #ccc;
        border-radius: 5px;
        margin: 20px 0;
        padding: 5px;
    }
    #main > form > label
    {
        font-weight: bold;
    }

这是我运行index.html的代码时得到的，问题是我在site.css中编写的代码未链接到index.hmtl，这意味着在site.css中修改的内容不存在。

解决方法

仔细检查您的相对路径。在其他所有内容上，您都以斜杠开头，这使我认为您可能在CSS路径之前需要一个斜杠，但是如果不查看文件系统，就无法分辨。

从您的屏幕截图来看，这可能是经典的文件路径错误。您的 index.html 似乎位于localhost/img/index.html

您的 CSS 居住在哪里？

如果它位于localhost/img/css/style.css中，则您的代码应该可以正常工作。

如果它位于localhost/css/style.css中，则需要将CSS的位置更改为以下位置；

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

../告诉href回到目录，然后进入CSS。如果没有../，您将告诉它在当前目录中查找，通过您的屏幕快照即可； localhost/img/css/style.css。

以这种方式使用文件路径时；您必须注意，它与当前文档的位置有关。

阅读这些与文件路径有关的文章；

https://www.w3schools.com/html/html_filepaths.asp

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files

https://css-tricks.com/quick-reminder-about-file-paths/

最好共享当前项目的文件夹结构。

但是，在您的代码中似乎很少有常见错误，例如从绝对文件目录（C:\）加载某些内容，这使我相信您仅使用静态文件，完全不建议使用。

如果这些前端代码是较大项目的一部分（例如，使用c＃，php等），则可以轻松使用base_url概念并通过可公开访问的绝对URL（例如，{{1}）加载文件}或http://localhost/yourproject/site.css。

在任何情况下，就像我们许多人试图指出的那样，它与您拥有的CSS文件的相对路径有关。那应该可以立即解决您的问题，并且即使您移动服务器也可以保证正常工作。

为什么HTML代码没有与CSS代码链接？

如何解决为什么HTML代码没有与CSS代码链接？

解决方法

相关推荐