简化标题的CSS

Question

我已经编写了一些css来覆盖Joomla模板上的默认样式，但感觉代码太多了。

我不是CSS新手，但我是新手。我听说学习并接受批评。

.scf-h2-title {
background: #34495e;
color: #fff;
font-family: 'Vollkorn', 'Helvetica', arial, serif;
font-size: 1.8em;
font-weight: normal;
line-height: 1;
padding: 6px;
}

.scf-h3-title {
background: #34495e;
color: #fff;
font-family: 'Vollkorn', 'Helvetica', arial, serif;
font-size: 1.4em;
font-weight: normal;
line-height: 1;
padding: 6px;
}

.scf-h4-title {
background: #34495e;
color: #fff;
font-family: 'Vollkorn', 'Helvetica', arial, serif;
font-size: 1.2em;
font-weight: normal;
line-height: 1;
padding: 6px;
}

.scf-h5-title {
background: #34495e;
color: #fff;
font-family: 'Vollkorn', 'Helvetica', arial, serif;
font-size: 1.0em;
font-weight: normal;
line-height: 1;
padding: 6px;
}

Answer 1

如果没有看到HTML，我只能做一些简单的缩短，但这仍然会消除很多重复：

.scf-h2-title,
.scf-h3-title,
.scf-h4-title,
.scf-h5-title
{
    background: #34495e;
    color: #fff;
    font-family: 'Vollkorn', 'Helvetica', arial, serif;
    font-size: 1.8em;
    font-weight: normal;
    line-height: 1;
    padding: 6px;
}

.scf-h3-title {
    font-size: 1.4em;
}

.scf-h4-title {
    font-size: 1.2em;
}

.scf-h5-title {
    font-size: 1.0em;
}