标题无法居中，改为h1标签后消失的问题求助

嘿，我来帮你排查下这两个问题——标题居中失效和换成h1后消失的原因：

问题1：自定义<storytitle>标签的样式问题 #

你当前的CSS里有个明显的错误：font-color是无效属性，控制文字颜色的正确属性是color，这会导致你设置的红色文字规则不生效。另外，自定义HTML标签（比如<storytitle>、<ree>）默认是行内元素，text-align的居中效果可能不会像块级元素那样稳定，建议给它们加上display: block，让标签独占一行，样式更可控。

问题2：换成<h1>后标题消失的原因 #

当你把<storytitle>改成<h1>时，你的CSS里没有针对<h1>的样式规则。浏览器默认的<h1>文字颜色是黑色，而你的body背景也是黑色，两者颜色重合，看起来就像是“消失”了。另外，<h1>本身是块级元素，不需要额外加<br>标签。

修正后的完整代码示例 #

方案1：继续使用自定义<storytitle>标签

/* 修正自定义标签的样式 */
storytitle {
  background-color: black;
  color: #ff0000; /* 替换错误的font-color */
  font-size: 150%;
  text-align: center;
  display: block; /* 设为块级元素，确保居中生效 */
}

ree {
  background-color: black;
  color: #0000ff;
  font-size: 100%;
  text-align: right;
  display: block; /* 同样设为块级元素，右对齐更稳定 */
}

body {
  background-color: black;
}

对应的HTML：

<!DOCTYPE html>
<html>
<head>
  <title>Story2</title>
  <style>
    /* 也可以把CSS直接写在这里，避免文件引入问题 */
    storytitle {
      background-color: black;
      color: #ff0000;
      font-size: 150%;
      text-align: center;
      display: block;
    }
    ree {
      background-color: black;
      color: #0000ff;
      font-size: 100%;
      text-align: right;
      display: block;
    }
    body {
      background-color: black;
    }
  </style>
</head>
<body>
  <storytitle>THiS IS A TEST TITLE</storytitle>
  <ree>this is a test body</ree>
</body>
</html>

方案2：换成<h1>标签

只需要给<h1>添加对应的样式即可：

h1 {
  background-color: black;
  color: #ff0000;
  font-size: 150%;
  text-align: center;
  margin: 0; /* 可选：去掉h1默认的上下外边距，避免多余空白 */
}

ree {
  background-color: black;
  color: #0000ff;
  font-size: 100%;
  text-align: right;
  display: block;
}

body {
  background-color: black;
}

对应的HTML：

<!DOCTYPE html>
<html>
<head>
  <title>Story2</title>
  <style>
    /* 嵌入CSS样式 */
    h1 {
      background-color: black;
      color: #ff0000;
      font-size: 150%;
      text-align: center;
      margin: 0;
    }
    ree {
      background-color: black;
      color: #0000ff;
      font-size: 100%;
      text-align: right;
      display: block;
    }
    body {
      background-color: black;
    }
  </style>
</head>
<body>
  <h1>THiS IS A TEST TITLE</h1>
  <ree>this is a test body</ree>
</body>
</html>

额外提醒：如果是外部引入CSS文件，一定要确保文件路径正确，否则样式不会生效。现在主流浏览器对自定义标签的兼容性很好，不用太担心兼容问题~

内容的提问来源于stack exchange，提问作者White Dove