Question

我有两个标题，一个标题为class="mainHeader"，另一个标题为class="subHeader"。我试图通过事先使用<div class="header">来包含另一个类中的两个（当然还有</div>）。但是在我链接的CSS文件中，当我尝试.header { /* styling */ }时，无论我放在哪里，当我打开HTML文件时都没有任何变化。

以下是我的文件：

<!DOCTYPE css>

.header {
  font-family: Roboto, serif;
  text-align: center;
  color: Black;
}

.mainHeader {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.5em;
  padding-top: 20px;
}

.subHeader {
  font-size: 14px;
  line-height: 0em;
  word-spacing: 0.25em;
  padding-bottom: 100px;
}

<!DOCTYPE html>

<html>

  <head>
    <link href="WSDS-css.css" rel="stylesheet" type="text/css">
	<link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
    <title>Temp title</title>
  </head>
  
  <body>
    <div class="header">
	  <h1 class="mainHeader">Temp main heading</h1>
	  <h2 class="subHeader">Temp sub-heading</h2>
	</div>
  </body>
  
</html>

正如您在运行时所看到的那样，未使用“.header”中的样式。我还是很陌生，所以请理解这是否很容易解决！

Answer 1

您没有为CSS文件定义文档类型，请删除<!DOCTYPE css>。

.header {
  font-family: Roboto, serif;
  text-align: center;
  color: Black;
}

.mainHeader {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.5em;
  padding-top: 20px;
}

.subHeader {
  font-size: 14px;
  line-height: 0em;
  word-spacing: 0.25em;
  padding-bottom: 100px;
}

<!DOCTYPE html>
<html>

<head>
  <link href="WSDS-css.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
  <title>Temp title</title>
</head>

<body>
  <div class="header">
    <h1 class="mainHeader">Temp main heading</h1>
    <h2 class="subHeader">Temp sub-heading</h2>
  </div>
</body>

</html>

Answer 2

DOCTYPE声明适用于基于HTML的文档。从您的css文件中删除<!DOCTYPE css>。
确保css文件的文件路径正确无误。

Answer 3

从您的css文件中删除<!DOCTYPE css>。 DOCTYPE声明适用于基于HTML的文档。

我的一个CSS类没有任何效果

3 个答案: