Kann man diesen Code verkürzen?

[ohrflieger]

Hallo,

ist es möglich folgenden CSS-Code noch zu verkürzen, z.B. mit Vererbung?
Hab dazu jetzt nichts gefunden.

<style type="text/css">
.naviende1{text-decoration:none;background-color:#00B000;display:block;color:#000000;margin-top:1px;margin-bottom:1px;width:150px;text-align:left;}
.naviende2{text-decoration:none;background-color:#00C000;display:block;color:#000000;margin-top:1px;margin-bottom:1px;width:150px;text-align:left;}
.naviende3{text-decoration:none;background-color:#00D000;display:block;color:#000000;margin-top:1px;margin-bottom:1px;width:150px;text-align:left;}
.naviende4{text-decoration:none;background-color:#00E000;display:block;color:#000000;margin-top:1px;margin-bottom:1px;width:150px;text-align:left;}
.naviende5{text-decoration:none;background-color:#00F000;display:block;color:#000000;margin-top:1px;width:150px;text-align:left;}
</style>

 

[philipp]

Du kannst Klassen, Ids und Elemente per Kommata trennen, um ihnen die selbe Formatierung zuzuweisen.

also zum Beispiel:
.naviende2, .naviende3, #specialnavi {...}

oder auch so:
.navicontainer div {...}

Dann werden nur alle Divs um Navicontainer so formatiert.

 

[ohrflieger]

also kann ich so verkürzen:

<style type="text/css">
.naviende1, .naviende2, .naviende3, .naviende4, .naviende5 {text-decoration:none;background-color:#00B000;display:block;color:#000000;margin-top:1px;margin-bottom:1px;width:150px;text-align:left;}
.naviende2{background-color:#00C000;}
.naviende3{background-color:#00D000;}
.naviende4{background-color:#00E000;}
.naviende5{background-color:#00F000;}
</style>

Wobei bei .naviende5 der untere Rand zusätzlich ist.

 

[Frank]

ich würde das sogar noch weiter verkürzen.
Angenommen alle elemente der die zur Navigation gehören liegen in einem Div mit der id "navi"

#navi a{
text-decoration:none;
display:block;
color:#000000;
margin-top:1px;
margin-bottom:1px;
width:150px;
text-align:left;
}
.naviende1{background-color:#00B000;}
.naviende2{background-color:#00C000;}
.naviende3{background-color:#00D000;}
.naviende4{background-color:#00E000;}
.naviende5{background-color:#00F000;}