CSS多個class樣式使用實踐-多用組合,少用繼承
阿新 • • 發佈:2018-12-26
先用繼承實現一個效果,程式碼如下:
<style type="text/css">
.numberList1, .numberList2, .numberList3, .numberList4{ border:1px solid #ccc;padding:10px; } .numberList1 li, .numberList2 li,.numberList3 li,.numberList4 li{ height:20px;line-height:20px; font-size:12px; } .numberList2 li, .numberList4 li{ font-size:16px;} .numberList3 li, .numberList4 li{ color:red}
</style>
<ul class="numberList1"> <li>aaaaaaaaaaaaaa</li> <li>bbbbbbbbbbbbbb</li> </ul> <ul class="numberList2"> <li>aaaaaaaaaaaaaa</li> <li>bbbbbbbbbbbbbb</li> </ul> <ul class="numberList3"> <li>aaaaaaaaaaaaaa</li> <li>bbbbbbbbbbbbbb</li> </ul> <ul class="numberList4"> <li>aaaaaaaaaaaaaa</li> <li>bbbbbbbbbbbbbb</li> </ul>
分析: 在上面的三個ul中, 主要是文字的大寫與顏色部分將來會是變化的, 而對每一行的高度,邊框,行間距等都是一樣的。
這樣我們可以採用面向物件程式設計中的思想-組合, 將變化的樣式單獨地寫成類樣式(f12, f16, red), 而將相同的穩定的部分寫成numberList類,
在要用的時候,組合起來,以達到最好的靈活性。 (在這裡,主要是利用了html標籤的class屬性可以掛多個這個特點,而id只能掛一個).
使用組合,程式碼實現如下:
<style type="text/css">.f12{font-size:12px;} .f16{font-size:16px;} .red{color:red;} .numberList{border:1px solid #ccc;padding:10px;} .numberList li{height:20px;line-height:20px;} </style> <ul class="numberList f12">
<li>aaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbb</li>
</ul>
<ul class="numberList f16">
<li>aaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbb</li>
</ul>
<ul class="numberList f12 red">
<li>aaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbb</li>
</ul>
<ul class="numberList f16 red">
<li>aaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbb</li>
</ul>
<style type="text/css">
.numberList1, .numberList2, .numberList3, .numberList4{ border:1px solid #ccc;padding:10px; } .numberList1 li, .numberList2 li,.numberList3 li,.numberList4 li{ height:20px;line-height:20px; font-size:12px; } .numberList2 li, .numberList4 li{ font-size:16px;} .numberList3 li, .numberList4 li{ color:red}
</style>
<ul class="numberList1"> <li>aaaaaaaaaaaaaa</li> <li>bbbbbbbbbbbbbb</li> </ul> <ul class="numberList2"> <li>aaaaaaaaaaaaaa</li> <li>bbbbbbbbbbbbbb</li> </ul> <ul class="numberList3"> <li>aaaaaaaaaaaaaa</li> <li>bbbbbbbbbbbbbb</li> </ul> <ul class="numberList4"> <li>aaaaaaaaaaaaaa</li> <li>bbbbbbbbbbbbbb</li> </ul>
使用組合,程式碼實現如下:
<style type="text/css">.f12{font-size:12px;} .f16{font-size:16px;} .red{color:red;} .numberList{border:1px solid #ccc;padding:10px;} .numberList li{height:20px;line-height:20px;}