Question

我有一个非常简单的文件 index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <title>We're learning selectors!</title>
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
  <h1 id="yay">Yay</h1>
<body>
</html>

虽然样式表是 style.css

h1 {
    .color: blue;
    .font-style: italic;
}

这两个文件都在同一个目录中，但它仍然无法正常工作。尝试过所有浏览器。但是当我用chrome打开dev-tools时，我可以在“样式部分”下将颜色更改为蓝色

h1 {
color: rgb(0, 15, 173);
}

但是为什么style.css不会被加载，而我使用与上面相同的正确代码。已经提到CSS not working in stylesheet也没有帮助

Answer 1

只需删除“。”来自你的风格style.css即

h1 {
    color: blue;
    font-style: italic;
}

Answer 2

您将css属性定义为类名。

Ur代码：

h1 {
    .color: blue;
    .font-style: italic;
}

应该如何：

h1{
    color:blue;
    font-style: italic;
}

你在css属性前面使用的dott只是用于类名。例如：

HTML：

<div class="ClassName"></div>
<div id="ClassName"></div>

CSS：

.ClassName{
    font-size:12px;
}

#ClassName{
    font-size:12px;
}

<!-- #className = div id -->   
<!-- .className = div class -->

Answer 3

我将提示如何划分和征服这样的问题：

首先，您需要验证脚本是否已加载。相信我，如果你要做JavaScript，你需要缩小可能的错误范围。缩小范围的一个很好的工具可能是Chrome的开发人员点击，并检查控制台。它会告诉我，如果没有加载文件（如果路径不正确或相似）。

其次，验证您的CSS！如果您知道加载了样式表，请验证是否正确键入了CSS。您可以使用CSSlint等工具。

并且..就是这样 - 现在你知道你已经加载了CSS并且输入正确。正确显示是另一个我不会在这里触及的问题。

简单的html文件没有加载css：尝试了一切

3 个答案: