所以我是编程的新手，我一直在通过Odin项目自学。我一直在做的第一个项目是对Google搜索网站的再创造。我得到了一些基本的HTML布局，但我的css没有被应用，我最初是在codepin上开始这个项目的，所有的东西都起作用了。当我切换到VSCODE时...什么都没有。以下是我目前所掌握的HTML内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
<style>
@import url('https://fonts.googleapis.com/css2? family=Noto+Sans+JP&display=swap');
</style>
</head>
<body>
<div class ='flex-container'>
<!-- Try using 'span' instead of a div for 'Google'.-->
<div class='flex-item'>
<span id='G'>G</span>
<span id='o'>o</span>
<span id='o1'>o</span>
<span id='g'>g</span>
<span id='l'>l</span>
<span id='e'>e</span>
</div>
<input type="Search">
</div>
<footer class='foot'>
<span id='ad'>Advertising</span>
<span>Business</span>
<span>How search works</span>
</footer>
</body>
</html>
我的CSS...
.flex-container {
height: 100vh;
border: 3px solid blue;
display: flex;
justify-content: center; /* x-axis */
align-items: center; /* y-axis */
}
.flex-item {
font-size: 90px;
font-family: 'Noto Sans JP', sans-serif;
#G {
color: #4885ed;
}
#o {
color: #db3236;
}
#o1 {
color: #f4c20d;
}
#g {
color: #4885ed;
}
#l {
color: #3cba54;
}
#e {
color: #db3236;
}
.foot {
background-color: #A5A6A1;
height: 2em;
}
.ad {
color: blue;
}
这是我的第一篇文章，希望这是一个好问题。感谢任何帮助。谢谢！
看CSS代码，它似乎是在不同的文件。因此，在这种情况下，您必须将CSS链接到HTML文件，您可以通过在head标记中使用来实现这一点。
您忘记了将css文件链接到html文件。在head标记的末尾添加一个link标记，如果html文件和css文件在同一个目录中，并且css文件的名称是styles，则可以这样做：
<head>
...
<link rel="stylesheet" href="styles.css">
</head>
它在Codepen上工作的原因是因为它们为您做链接工作，所以html、js和css文件会自动相互连接
