为什么我的CSS没有被应用？对可待因有效但对VSCode无效
所以我是编程的新手，我一直在通过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;
}
这是我的第一篇文章，希望这是一个好问题。感谢任何帮助。谢谢！
共有2个答案
您忘记了将css文件链接到html文件。在head标记的末尾添加一个link标记，如果html文件和css文件在同一个目录中，并且css文件的名称是styles，则可以这样做：
<head>
...
<link rel="stylesheet" href="styles.css">
</head>
它在Codepen上工作的原因是因为它们为您做链接工作，所以html、js和css文件会自动相互连接
看CSS代码，它似乎是在不同的文件。因此，在这种情况下，您必须将CSS链接到HTML文件，您可以通过在head标记中使用
来实现这一点。
-
我正在做一个装在盒子里的计数器。我试图使这个计数器对不同的屏幕大小做出响应，但由于某些原因，我试图使用的媒体查询将无法工作。 我曾尝试将设备宽度更改为768px以下，但查询对计数器没有影响，我不确定原因。我已经包括了计数器的HTML/PHP代码以及CSS。有人知道为什么它不起作用吗 我已确保此标签包含在文档的标题中。 超文本标记语言： CSS：
-
为什么在使用TestNG时“mvn测试”对我有效，而“mvn surefire:test”对我无效？这很有趣，因为套件xml文件的位置是通过surefire插件配置的，但它只在我执行常规Maven“测试”目标时运行。当我使用“mvn surefire:test”时，就好像资源（或src/test/resources/testng.xml）文件对测试执行者不可见，而该文件似乎存在于预期位置：/tar
-
使用React，我有一个包含信息的div，其中另一个div包含项目列表。我希望第二个div（列表）可以在单击时折叠。如果我将click listener放在第一个div中，它将工作并显示项目列表。问题是它显示了所有项目的所有列表。我只希望单击项目的列表可见： 如果我在之后添加括号，我会收到以下警告： 警告：在现有状态转换期间（例如在
-
如标题所述。我花了一些时间在一个客户的网站上实现一个特定的字体。我在所有需要的css类上实现了字体。 在定义菜单链接的“A”类中，调用字体不起作用。为什么？ 参见截图1和2。 例如，在“div.powered-by”类（它也像链接一样工作）上，它可以工作，而在“a”类（它定义菜单链接）上则不行。见截图。 调用字体不起作用： Div.Powered-通过调用字体Works：
-
文件编制
-
我目前正在做一个JavaFX突围游戏，并建立了一个移动系统，该系统使用公共的userKeyInteraction方法，在我按下左右箭头键时设置蝙蝠对象的速度。这个方法看起来工作得很好，但是我也有一个keyReleased方法，当用户不再按任何一个箭头时，这个方法不仅对bat没有影响（当键被释放时它不会停止），而且根本检测不到keyReleased事件。 正如您在上面看到的，我已经使用debug.t