Question

我需要将哪些样式添加到标题类中，以使任何元素的行为类似于标题标记...

.h1, .h2, .h3, .h4, .h5, .h6 {
  // make akin to h tags
}

我可能会在div或span或li等处使用它们......因此需要相当强大的重置功能。我在想display: block;之类的东西，但并不知道确定的所需规则是什么。

编辑：澄清

虽然已经为我回答了 - 我想我会澄清我的用例，因为我似乎没有好好表达它。

我需要在一个大型网站上将h1，h2等标记更改为div或span或li标记。＃39; t控制所有HTML。我想要新标签，无论它是什么，都要像它是标题标签时那样行事。它必须跨浏览器工作，我希望有一个明确的，一个规则适合所有易于维护的解决方案，并且没有明显的陷阱（在SEO和可访问性等方面......）。

Answer 1

每个浏览器的标准CSS规则都不同。

本回答中的更多信息：

Browsers' default CSS for HTML elements

Answer 2

正如 Bert Vermeire 所说，每个浏览器都有所不同。

这就是为什么最好创建一些重启/重置css文件，其中包含span.h1到h6，p.h1到h6，... （如对于div，不确定你打算如何使用取消所有边距，填充，行高， font-weights ，等等。

以下是我的一个项目的示例：

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.1;
  color: inherit;
  margin-bottom: 0.5rem !important;
  margin-top: 0 !important; }

h1,
.h1 {
  font-size: 2.5rem; }

h2,
.h2 {
  font-size: 2rem; }

h3,
.h3 {
  font-size: 1.75rem; }

h4,
.h4 {
  font-size: 1.5rem; }

h5,
.h5 {
  font-size: 1.25rem; }

h6,
.h6 {
  font-size: 1rem; }

但要小心，因为每个浏览器都不支持rem尺寸。使用em，px，...代替

Answer 3

属性可以是：

.h1, .h2, .h3, .h4, .h5, .h6 {
  display: block;
  font-size: 25px;
  font-weight: bold;
  margin: 10px 0 15px; /*the heading tag gets it by default but not the other tags*/
  color: #333333;
  border-bottom: 1px solid #848484; /*if your heading includes a bottom line*/
  padding: 0 0 0 30px; /*if your heading includes any icon on its left side*/
  text-align: center; /*if heading text needs to be center*/
  background-color: #ffffff;
}

样式`.h1`类就像`h1`标签

3 个答案: