CSS文件未链接到HTML文件，路径和顺序似乎正确_Html_Css

CSS文件未链接到HTML文件，路径和顺序似乎正确

html css

CSS文件未链接到HTML文件，路径和顺序似乎正确,html,css,Html,Css,我的layout.html文件在“templates”目录下，styles.css文件在“static”目录下。它们都在我名为“books-cs50w”的项目文件夹中。但这不起作用。我可能已经阅读了所有关于绝对路径和相对路径的google-able帖子，但由于某些原因，我的css没有应用到我的layout.html。我把它放在引导样式表的底部和顶部，以确保它不会被覆盖。为了测试实际的CSS，我将代码直接粘贴到layout.html文件中的-tags中-它可以工作。但不管我在外部做什么，它都不会读

我的layout.html文件在“templates”目录下，styles.css文件在“static”目录下。它们都在我名为“books-cs50w”的项目文件夹中。但这不起作用。我可能已经阅读了所有关于绝对路径和相对路径的google-able帖子，但由于某些原因，我的css没有应用到我的layout.html。我把它放在引导样式表的底部和顶部，以确保它不会被覆盖。为了测试实际的CSS，我将代码直接粘贴到layout.html文件中的-tags中-它可以工作。但不管我在外部做什么，它都不会读

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/sign-in/">

<!-- Bootstrap core CSS -->
<link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384- Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" rel="stylesheet">
<link href="/static/styles.css" rel="stylesheet" >
</head>

您需要从当前的

templates

文件夹向上一级添加

。/

到css路径，现在您已经向上一级添加，并且当前位于主

books-cs50w

项目文件夹中，您只需导航到

static

文件夹并访问css文件

更改此行：

<link href="/static/styles.css" rel="stylesheet" >

为此：

<link href="../static/styles.css" rel="stylesheet" >

在浏览器中打开页面，按f12键，然后在控制台面板中查看文件是否加载正确？==$0---我猜这意味着不。我知道这不是因为当我将样式标签中的css代码直接粘贴到html中时，它就起作用了。我尝试过：（我还将styles.css移动到同一个文件夹中，并通过“styles.css”重新查看它）。不起作用。@Anna您使用的是哪种代码编辑器？大多数代码编辑器的左侧都有一个分支，显示文件结构。您能截图显示该分支并将其与您的问题一起发布吗？当然可以。我使用Atom。刚刚上传了上面的图像。@AndrewL64

<link href="../static/styles.css" rel="stylesheet" >