将某些内联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/