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

Question

作为初学者 Web 开发项目，我一直在做一个作品集，但是，我在 linking 我的 CSS 时遇到了一个问题。

该页面按照 GitHub 页面上的指示显示，但是当运行在本地任何浏览器上，缓存清空或 nor 时，它根本不会显示。

这是 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%);
}

需要说明的是，显示了 none 的效果，甚至连字体都没有。这些文件位于同一文件夹中，这就是 link 元素没有相对路径的原因。非常感谢您的帮助。

Answer 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 全部在一个文件夹中

Answer 2

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

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

条件 2：有一个包含 html 文件的文件夹，例如“CssStyles”，该文件夹中有另一个文件夹，例如“css”，该文件夹中是您的 css 文件。现在<做这个：

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

Answer 3

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

Answer 4

问题出在你的 URL link 它应该像你的文件夹名称。

例如，我的文件夹名称是 CSS，我的 URL link 中有，因为它在仔细检查后不起作用，我发现我的 css 不是大写，所以我将其更改为现在它适用于所有样式。

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

CSS not linking with HTML locally but works in Github Pages

html

css

bootstrap-4

web-deployment-project