在每個頁面中保留相同的樣式，但有時會有稍微不同的元素

Question

我有一種情況，即在我的網站的某些頁面上使用圖像列表。假設我有一個列表在一個頁面中水平顯示，但我希望同一個列表在另一個頁面中垂直顯示，我是否必須創建一個全新的div，以便一個列表水平顯示，另一個垂直顯示，如下所示：

#imagevertical { 
} 

#imagehorizontal { 
} 

這看起來並不是那麼糟糕，但是如果你有很多很多的網頁，你希望你的圖像列表在每個圖像上顯示稍微不同，那麼它可能相當混亂。

有沒有其他方法可以做到這一點？

謝謝你們

Answer 1

您不需要更改每個頁面上div的名稱，只是應用它的樣式，所以使用名爲「imagelist」的div並將所有常用樣式應用於樣式表中，然後將額外樣式應用於頁面本身。

在CSS：

#imagelist { common styles...} 

在一個HTML頁面：

<style type="text/css"> 
    #imagelist { something that makes it vertical... } 
</style> 

在其他HTML頁面：

<style type="text/css"> 
    #imagelist { something that makes it horizontal... } 
</style> 

中，頁面樣式將覆蓋從進口外部樣式表，則不需要更改div的名稱，並重新指定兩者之間的所有常用樣式。

或者，你可以爲此創建水平和垂直類：

CSS：

#imagelist { common styles... } 
.horizontal { something that makes it horizontal... } 
.vertical { something that makes it vertical... } 

HTML的水平頁：

<div id="imagelist" class="horizontal">content...</div> 

HTML垂直頁：

<div id="imagelist" class="vertical">content...</div> 

我認爲這可能是比第一種更好的解決方案。

Answer 2

讓外部樣式表，把風格每一頁，而且您透過CSS天意的略有不同。

external < internal < inline 

您也可以使用!important。

如果您在樣式中創建衝突，則樣式不同。