2013-02-23 66 views
1

我有定義了「t_data」類來定製大多數表的外觀和感覺。css:如何繼承整個類

雖然在某些情況下我需要額外的表格專業化:比方說,我希望「customers」和「orders」的表格看起來不同。

繼承樣式默認方式是描述兩個類的CSS定義成相同的塊,這樣的事情:

table.t_data, table.t_data_order, table.t_data_customer 
{ 
    background-color: #080; 
} 

這種方式工作得很好,直到一定程度上......直到我得到太多的不同定義。

現在我已經是這樣的:

table.t_data thead tr th, table.t_data thead tr td, table.t_data tbody tr th,  table.t_data tbody tr td, table.t_data tfoot tr th, table.t_data tfoot tr td, 
table.t_group thead tr th, table.t_group thead tr td, table.t_group tbody tr th,  table.t_group tbody tr td, table.t_group tfoot tr th, table.t_group tfoot tr td 
{ 
    border: #333 1px solid; 
} 

爲了做定製T_DATA尋找t_data_customer和/或t_data_order不同我需要TRIPPLE該塊......且有高風險錯過一些元素......我也有超過10個這樣的塊不同的元素(如背景,字體等)

是否有任何CSS或甚至非CSS這樣的事情解決方案?

非常感謝!

P.S.如果你沒有任何解決方案,但只有想法,不要害羞地分享它們!有什麼想法,歡迎

+0

這在原生CSS中是不可能的,但是有一些CSS預編譯器提供了繼承等等, LESS:http://lesscss.org/ – 2013-02-23 17:23:06

+1

在多個類中使用HTML元素可能會有所幫助。 – nwellnhof 2013-02-23 17:28:06

回答

1

不幸的是,你不能用CSS來做到這一點。幸運的是,您可以使用CSS預編譯器爲您做到這一點(例如:LESS & Sass)。更確切地說,你可以使用Mixins(兩種語言都支持)。

Mixins允許您通過簡單地將類名稱包含爲其屬性之一來將類的所有屬性嵌入到另一個 類中。 這就像變量,但對於整個類。 Mixins也可以像函數一樣運行,並且帶有參數,如下面的示例 所示。

.rounded-corners (@radius: 5px) { 
    -webkit-border-radius: @radius; 
    -moz-border-radius: @radius; 
    -ms-border-radius: @radius; 
    -o-border-radius: @radius; 
    border-radius: @radius; 
} 

#header { 
    .rounded-corners; 
} 
#footer { 
    .rounded-corners(10px); 
} 

(實施例從以下)。這是你可以用你的t_data類做的事情。

+0

還沒有使用它,但很可能會繼續使用LESS - 這聽起來像一個非常好的主意。 – Budda 2013-03-08 05:14:07

1

有關添加新的通用CSS類表和目標

.common td 
.common th { 
} 

之前你添加一個類你的表,你應該確保你的表的默認樣式不夠什麼例如

td { 
    /* Sensible default for all table cells */ 
} 

下一步是找到一個類名,它對於具有交替樣式的表是「通用的」。流行的框架twitter bootstrap對帶有邊界的表使用「table-bordered」,其他人會爭辯說找到一個語義共同點比較好。但這取決於你。

這不是語義或沒有,但由於鋸有史以來尼科爾Sullivan介紹,我無法找到演示,但我可以找到它報價:由 http://css-tricks.com/semantic-class-names/

在演示文稿中Nicole Sullivan最近我在CSS峯會上看到,她呼籲一些大公司在數千次的CSS文件中聲明完全相同的顏色。

我一直在試圖找出我們正在寫出的css文件和旨在爲大公分母的含義。

+0

我是否正確理解你建議將所有常見的東西都默認爲默認格式,以便減少需要重用的t_data類的數量?這不會真正起作用,因爲我在很多場景中使用表格,並且需要確保每個類都會覆蓋默認樣式。事實上,它不僅僅是關於桌子。 – Budda 2013-02-23 19:43:04

+0

這取決於網站,但我正在尋找創建一個合理的默認例如爲了保持設計的一致性,一張桌子應該在整個場地或多或少具有相同的外觀和感覺。然後你會有幾張不同的表格,希望可以用同一個班級的一些常見的東西。 – orjan 2013-02-23 20:12:10

0

可以使用ID和類來代替定義許多類。

有了ID,您可以定義主要的CSS並使用您定義差異的類。

<table id="mainstyle" class="variation1"> ... 
+0

我通常每頁都有幾張表格,而使用ID進行格式化並沒有看到attrective – Budda 2013-02-23 17:38:01