Question

所以我在设置styles.css文件并将其附加到我的index.html文件时遇到了问题。

由于某种原因，css文件中的正文覆盖了h1 css。

这里是代码，如果有任何明显的错误，对不起。我是这个东西的新手。

h1 {
font-style: Georgia;
font-size: 48px;
color: red:
}
body {
    font-style: Georgia;
    font-size: 14px;

}

和我的html索引

<!DOCTYPE html>

<html>

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

<head>
    <title>rdhamill's personal github page. </title>
</head>

<h1> Github.io page for Rdhamill </h1>  


<body>  
     This is where I plan on adding a list of projects, accomplishments, contact info and career goals. So stay tuned, and thanks for all the fish. 
</body> 

</html>

编辑：感谢您的帮助，并对显而易见的问题表示抱歉！

Answer 1

首先，您的h1标记位于正文之外，将其置于其中。

除此之外，还将link标记放在head标记内。

除此之外，还会删除:样式中颜色属性末尾的h1。

Answer 2

您的所有元素都必须位于head或body标记内。请参阅下面的代码段，了解您的元素所属的位置。 p标签内的文字只是为了清理它。

编辑：根据Dude Coder的above comment修复了CSS声明。确保它们总是以冒号而不是冒号结束。

还将font-style更改为font-family，只需要在正文上设置（在这种情况下，所有后代都将继承它，直到在其他地方更改为止）。

h1 {
	font-size: 48px;
	color: red;
}

body {
	font-family: Georgia;
	font-size: 14px;
}

<!DOCTYPE html>
<html>
<head>
	<title>rdhamill's personal github page. </title>
	<link rel="stylesheet" href="styles.css"> 
</head>
<body>  
	<h1> Github.io page for Rdhamill </h1> 
	<p>This is where I plan on adding a list of projects, accomplishments, contact info and career goals. So stay tuned, and thanks for all the fish.</p>
</body> 
</html>

Answer 3

您的HTML太复杂，旧浏览器无法正确理解和呈现。 <h1>应放在<body>内。 <link>应放在<head>内。您的CSS也有打字错误。将color: red中的最终冒号删除或键入分号;冒号不起作用。

回到主题：

浏览器（现代浏览器）会自动将<h1>放在<body>内，<link>放在<head>内。根据W3C，当您为元素及其子元素定义相同的样式时，为子元素定义的样式优先于为父元素定义的样式。因此，您的body规则不会覆盖h1。问题是排版：您输入了:而不是;

＆＃13;

h1 {
  font-family: Georgia;
  font-size:   48px;
  color:       red;
}

body {
  font-family: Georgia;
  font-size:   14px;
}

＆＃13;

<!DOCTYPE html>

<html>
<head>
  <title>rdhamill's personal github page. </title>
</head>
<body>
  <h1> Github.io page for Rdhamill </h1>
  This is where I plan on adding a list of projects, accomplishments, contact info and career goals. So stay tuned, and thanks for all the fish.
</body>

</html>

＆＃13;

一个旁注：我将font-style替换为font-family。要指定字体，请使用font-family。 font-style用于增强（斜体，下划线等）。

CSS身体骑H1风格

3 个答案: