Question

我在styles.css中实现了CSS样式，并在ExternalCSSStyles.html中使用了该文件。文件内容如下： styles.css的

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color:fuchsia;
    font-family:verdana;
    font-size:300%;

}
p  {
    color:maroon;
    font-family:courier;
    font-size:160%;
}
</style>
</head>
</html>

ExternalCSSStyles.html如下：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

显示的输出如下：这是一个标题（黑色）

这是一个段落。（栗色）

但如果我修改ExternalCSSStyles.hmtl以使其成为内部CSS样式，如下所示：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color:fuchsia;
    font-family:verdana;
    font-size:300%;

}
p  {
    color:maroon;
    font-family:courier;
    font-size:160%;
}
</style>
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

然后输出如下：这是一个标题（颜色的fushia）

这是一个段落。（栗色）

我的问题是为什么标题没有按照styles.css中提供的样式生效？请帮我弄清楚这个问题。

Answer 1

您要添加styles.css，但styles.css必须不包含任何html代码，因此请从styles.css中删除所有html代码，例如

＆＃13;

h1 {
    color:fuchsia;
    font-family:verdana;
    font-size:300%;

}
p  {
    color:maroon;
    font-family:courier;
    font-size:160%;
}

＆＃13;

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

＆＃13;

并测试你的页面它会正常工作..

CSS样式不会反映在HTML中

1 个答案: