Question

我的网站我的字体很小，但颜色不同，填充和边距不同。

例如

    h5 {
         color: #ED1B34;
         font-size: 1.1em;
         font-weight: bold;
         margin-bottom: 0.6em; 
}

我想编写与边距和填充无关的标记。

声明填充和边距的最佳做法是什么。就这个

H5

标签在网站上可能有10种不同的保证金设置。

Answer 1

使用css类。

即：在外部样式表中设置这些（或在您需要的任何地方......）

.BigHeading {font-size:2em; margin:1em;}
.MediumHeading {font-size:1em; margin:0.5em;}

然后在html标记中使用它：

<h5 class="BigHeading">This is a big heading!</h5>

Answer 2

最佳做法是为H5定义非保证金属性：

h5 {
     color: #ED1B34;
     font-size: 1.1em;
     font-weight: bold;
}

然后在每次使用h5时提供不同的包装器，例如：

<div class="title-page">
  <h5>My Title</h5>
</div>

和

<div class="other-page">
  <h5>My Title 2</h5>
</div>

并相应地设置边距：

.title-page h5 {
     margin: 10px;
}
.other-page h5 {
     margin: 20px;
     padding-bottom: 5px;
}

Answer 3

虽然我不知道网站的结构，但您可能需要再次查看设计，以确保h5元素不会有太大差异。

您可以为每个不同的边距设置使用一个类。

Answer 4

使用不同的设置使用不同的h1，h2，h3，h4，h5，h6等，或将它们分成几类：

h5 {
  background: #ff0000; /* All h5 inherits this and any properties in here. */
}

h5.small_padding {
  padding: 5px;
}

h5.big_padding {
  padding: 20px;
}

<h5 class="small_padding">Title</h5>
<h5 class="big_padding">Blah</h5>

Answer 5

您应首先向DOM添加类或ID，例如：

<h5 id="style1">title</h5>
<h5 class="style2">title</h5>

然后使用css来定位这些DOM：

h5#style1 { margin: 5px; }
h5.style2 { margin: 10px; }

注意：＃是id，和。是为了上课。有关更多信息，请访问this tutorial。

Answer 6

使用类：

<h5 class="title">Foo</h5>
<h5 class="title margined">Bar<h5/>
<h5 class="brightTitle">Other</h5>

h5 {
    text-decoration: underline;
}
h5.title {
    color: Blue;
    font-weight: bold;
}
h5.margined {
    margin-bottom: 0.6em; 
}
h5.brightTitle {
    color:Red;
}

Foo会变成蓝色，粗体和下划线。

栏会是蓝色，粗体，带下划线，并且有余量。

其他会是红色并加下划线。

See it in action

需要CSS样式帮助

6 个答案: