时间戳

首页 > 解决方案 > 主体和主体之间的 CSS 继承。正文中的 CSS 样式未出现在 html 中

html - 主体和主体之间的 CSS 继承。正文中的 CSS 样式未出现在 html 中

问题描述

在下面的代码中，无论我对“body”进行什么更改，html 中都没有任何变化。我的目标是创建一张灰卡，其中包含由黑色边框包围的主要内容。所以基本上从黑页开始，然后将灰卡与“顶部”的内容分层。我想为字体等设置全局样式，但不确定为什么“body”样式不起作用。

此代码在 codepen 中，因此请忽略下面的布局。这是笔的链接： https ://codepen.io/andyzam/pen/abdPzpd

<style>

body {
  margin: 0px;
  font-family: monospace;
  color: black;
  background-color: black;
}

main {
  background-color: lightgrey;
  padding: 20px;
  margin: 20px;
}

h1 {
  color: black;
  text-align: center;
}

p {
  max-width: 500px;
  text-align: justify;
  align: center;
}

.maintext {
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    font-size: 20px;
}

.mainimage {
    display: block;
    margin-left: auto;
    margin-right: auto
}

</style>


<html>
  <body>
    <main>
      <h1>Tribute to Warren Buffett</h1>
      <div class="maintext">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div>
      <img class="mainimage" src="">
      </div>
      </main>
  </body>
</html>

标签： htmlcss

解决方案

使用 CodePen 时，您不需要<style>CSS 框内的标签。只需将您的 CSS 代码直接放在那里。

像这样：https ://codepen.io/brunomont/pen/JjGwoNR

推荐阅读