Question

我有以下CSS来制作一个H1，它在背景中有一条直线并且居中。我必须在span标记之间使用h1元素才能生效。

CSS

h1 {
    font-size: 28px;
    font-family:'Palatino';
    font-style: italic;
    font-weight:600;
    color: #2D6A97;
    margin-bottom:60px;
    position:relative;
    text-align:center;
}

h1 span {
    background:#FDFCF8;
    padding: 0 15px;
    position: relative;
    z-index: 1;
}

h1:before {
    background:#E5DEC6;
    content: "";
    display:block;
    height: 1px;
    position:absolute;
    top:50%;
    width:100%;
}

h1:before {
    left: 0;
}

在其他页面上，我只想要一个普通的H1（没有任何CSS）。

我怎样才能改变我所拥有的东西，以便没有样式的H1看起来仍然正常？

理想情况下，我希望能够做到这样的事情：

   <h1 class="withborder"><span>Here's my H1</span></h1>

Answer 1

你已经回答：

您需要为h1

但是如果你想让你的h1非样式，那么你必须将样式应用于类而不是h1，否则它将适用到你项目中的所有h1。

.class {
  font-size: 28px;
  font-family: 'Palatino';
  font-style: italic;
  font-weight: 600;
  color: #2D6A97;
  margin-bottom: 60px;
  position: relative;
  text-align: center;
}
.class span {
  background: #FDFCF8;
  padding: 0 15px;
  position: relative;
  z-index: 1;
}
.class::before {
  background: #E5DEC6;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  top: 50%;
  width: 100%;
  left: 0
}

<h1><span>Here's my H1 non-styled</span></h1>
<h1 class="class"><span>Here's my H1 styled</span></h1>

Answer 2

有许多不同的方式.. 我可能不会为每个h1标签添加类在我希望为h1标签设置样式的页面的主体上使用一个类，然后在css中定位h1＆＃39;

例如

<body class="styleThisPage">

并在css中

 body.styleThisPage h1 {
        font-size: 28px;
        font-family:'Palatino';
        font-style: italic;
        font-weight:600;
        color: #2D6A97;
        margin-bottom:60px;
        position:relative;
        text-align:center;
    }

body.styleThisPage h1 span {
    background:#FDFCF8;
    padding: 0 15px;
    position: relative;
    z-index: 1;
}

body.styleThisPage h1:before {
    background:#E5DEC6;
    content: "";
    display:block;
    height: 1px;
    position:absolute;
    top:50%;
    width:100%;
}



  body.styleThisPage h1:before {
        left: 0;
    }

但这只是个人偏好，取决于网站。

Answer 3

如果您希望一个页面的样式为H1而其他页面没有它，您也可以在文件中编写此样式并将此文件包含在需要它的页面中。或者如前所述，您可以使用类来标记H1 - 然后您需要为类编写样式。

我如何拥有基本标题和自定义标题？

3 个答案: