將某些內聯CSS轉換爲單獨的表格

Question

<table border="1" style="background-color:yellow;border:1px dotted black;width:80%;border-collapse:collapse;"> 
<tr style="background-color:orange;color:white;"> 
<th style="padding:3px;">Table header</th><th style="padding:3px;">Table header</th> 
</tr> 
<tr> 
<td style="padding:3px;">Table cell 1</td><td style="padding:3px;">Table cell 2</td> 
</tr> 
<tr> 
<td style="padding:3px;">Table cell 3</td><td style="padding:3px;">Table cell 4</td> 
</tr> 
</table> 

我的問題是，如何將此html示例中的內聯CSS轉換爲外部樣式表？

css會是這樣嗎？

tr {background-color:orange;color:white;} 
table {background-color:yellow;border:1px dotted black;width:80%;border-collapse:collapse;} 
td, th {padding:3px;} 

Answer 1

使用table tr:first-child而不是tr因爲只有第一行有內嵌樣式：

table { 
background-color: yellow; 
border: 1px dotted black; 
border-collapse: collapse; 
width: 80%; 
} 

table th, table td { 
padding: 3px; 
} 

table tr:first-child { 
background-color: orange; 
color: white; 
} 

http://jsfiddle.net/URBMh/2/