如何正确地继承CSS？

Question

这是我用于标题的css：

.head_red{
    background-image: url(../../Images/box_header_red.png) !important;
    background-repeat:no-repeat;
    height: 59px;
}

.head_blue{
    background-image: url(../../Images/box_header_blue.png) !important;
    background-repeat:no-repeat;
    height: 59px;
}

.head_green{
    background-image: url(../../Images/box_header_green.png) !important;
    background-repeat:no-repeat;
        height: 59px;
}

.head_yellow{
    background-image: url(../../Images/box_header_yellow.png) !important;
    background-repeat:no-repeat;
    height: 59px;
}

.head_orange{
    background-image: url(../../Images/box_header_orange.png) !important;
    background-repeat:no-repeat;
    height: 59px;
}

继承这个类的正确方法是什么，所以我只需要在每个类中放置背景图像？

Answer 1

CSS

.head { background-repeat:no-repeat; height: 59px; }
.head_red{ background-image: url(../../Images/box_header_red.png); }
.head_blue{ background-image: url(../../Images/box_header_blue.png); }
.head_green{ background-image: url(../../Images/box_header_green.png); }
.head_yellow{ background-image: url(../../Images/box_header_yellow.png); }
.head_orange{ background-image: url(../../Images/box_header_orange.png); }

示例HTML

<div class="head head_red">sample</div>
<div class="head head_blue">sample</div>
<div class="head head_yellow">sample</div>

Answer 2

试着做另一门课：

<div class="head head_green"></div>
<div class="head head_red"></div>
<div class="head head_blue"></div>

然后..。

.head {
    height: 59px;
    background-repeat: no-repeat;
}

然后从当前代码中删除这些样式。

Answer 3

分配多个类：

CSS

.head {
    background-repeat: no-repeat;
    height: 59px;
}

.head--red{
    background-image: url(../../Images/box_header_red.png) !important;
}

.head--blue{
    background-image: url(../../Images/box_header_blue.png) !important;
}
/* ... */

<div class="head head--red"></div>
<div class="head head--blue"></div>

--只是一个命名约定。