CSS 未在本地与 HTML 链接，但在 Github 页面中有效答案

【问题标题】：CSS not linking with HTML locally but works in Github PagesCSS 未在本地与 HTML 链接，但在 Github 页面中有效
【发布时间】：2021-05-07 20:29:52
【问题描述】：

我一直在作为一个初学者 Web 开发项目从事投资组合，但是，我在链接我的 CSS 时遇到了问题。

该页面按照 GitHub 页面上的说明显示，但是当在任何浏览器上本地运行时，无论是否清空缓存，它都不会显示。

这是 HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
        <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
        <link href='styles.css' rel='stylesheet' type='text/css' />
        <title>Mohsen Bakhit</title>
        <script src="script.js" ></script>
    </head>
    <body>
        <div class='header'>
            <h1>Mohsen Bakhit</h1>
            <h2>Developer For Hire</h2>
            
        </div>
    </body>
</html>

还有 CSS 文件：

html {
    font-family: 'Montserrat', 'Open Sans', monospace;
    font-size: 16px;
}

.header {
    position: relative;
    text-align: center;
    color: black;
    background-image: url('/resources/vancouver.jpg');
}

.header h1{
    color: white;
    font-size: 2rem;
    position: absolute;
    top: 50%;
    bottom: 50%;
    transform: translate(-50%, -50%);
    
}

.header h2{
    font-size: 1.25rem;
    color: white;
    position: absolute;
    top: 50%;
    bottom: 50%;
    transform: translate(-50%, -50%);
}

需要明确的是，没有任何效果出现，甚至字体也没有。这些文件位于同一个文件夹中，这就是为什么没有链接元素的相对路径。非常感谢您的帮助。

【问题讨论】：

你的脚本工作了吗？

标签： html css bootstrap-4 web-deployment-project

【解决方案1】：

您缺少文件的相对路径。基本上你必须这样做

<link href='./styles.css' rel='stylesheet' type='text/css' />
 <script src="./script.js" ></script>

代替

<link href='styles.css' rel='stylesheet' type='text/css' />
<script src="script.js" ></script>

我假设您将 script.js Style.css 和 Index.html 都放在一个文件夹中

【讨论】：

是的，它们在同一个路径中，但是，使用相对路径并没有帮助。
可以粘贴整个HTML文件的代码吗
暂时就是这样。一旦出现这个问题，我就尝试修复它，然后再继续。我的js文件目前也是空的。
确保 Script.js 和 Style.css 中没有大写 S .. 在这种情况下，您只需更新 html 中的文件名或更改大写到小写的文件名应该是“style.css”和“script.js”而不是“Script.js”或“Styles.css”

【解决方案2】：

这里有几个步骤可以解决你的问题：
首先，检查css文件名是否相同用你写在href的名字。 您的 css 文件名称应与您在 href="styles.css" 中的代码中编写的名称相同。表示您的 css 文件应命名为样式。
其次，如果您的 css 文件与您的 html 文件位于同一文件夹中；它应该工作。 这意味着您的 css 文件在另一个文件夹中（而不是在 html 文件所在的文件夹中）。
如果您的 css 文件在另一个文件夹中 em>, 按照以下步骤操作：
条件一：在您的 html 文件中，有一个名为“CssStyles”的文件夹，您的 css 文件就在其中。现在，更改 html 中的一些代码：

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

条件 2：有一个名为“CssStyles”的 html 文件的文件夹，在该文件夹中还有另一个名为“css”的文件夹，在该文件夹中是您的 css 文件。现在

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

【讨论】：

【解决方案3】：

有趣的是，我将文件命名为“styles.css”。一旦我将其更改为 style.css 并更改相对 URL，问题就得到解决，一切都开始正常工作。

【讨论】：

【解决方案4】：

问题在于您的 URL 链接应该像您的文件夹名称。

例如，我的文件夹名称是 CSS，我的 URL 链接在仔细检查后无法正常工作，我发现我的 css 没有大写，所以我将其更改为，现在它适用于所有样式。?

【讨论】：