问题描述
作为初学者的 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%);
}
需要明确的是，没有任何效果显示出来，甚至字体也不显示。 这些文件位于同一文件夹中，这就是链接元素没有相对路径的原因。 非常感谢您的帮助。
解决方法
您缺少文件的相对路径。 基本上你必须做
<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 都放在一个文件夹中
,以下是解决问题的几个步骤：
首先，检查css文件名是否和你在href中写的名字一样。 您的 css 文件的名称应该与您在 href="styles.css" 中的代码中编写的名称相同。意味着你的 css 文件应该命名为 style.
其次，如果您的 css 文件在您的 html 文件所在的文件夹中；它应该工作。 这意味着您的 css 文件在另一个文件夹中（而不是在 html 文件所在的文件夹中）。
如果您的 css 文件在另一个文件夹中，请按照以下步骤：
条件 1：
对于您的 html 文件，您的 css 文件所在的位置有一个名为“CssStyles”的文件夹。现在，更改 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">
这个问题很有趣，因为我将文件命名为“styles.css”。一旦我将其更改为 style.css 并更改了相对 URL，问题就得到了解决，一切开始正常运行。
,问题在于您的 URL 链接，它应该与您的文件夹名称一样。
例如我的文件夹名称是 CSS 并且我在我的 URL 链接中有我的 URL 链接，因为它在仔细检查后不起作用我发现我的 css 没有大写，所以我将其更改为现在它适用于所有样式。?>