asp.net标题加粗，加颜色，怎么不对啊
asp.net标题加粗，加颜色，怎么不对啊，始终只有最后一条和最前面一条
写下详细代码

<style>
.font{font-weight:700; color:#FF0000;}
.font{font-weight:700; color:#000000;}
.font{font-weight:700; color:#16851A;}
.font{font-weight:700; color:#E703E1;}
.font{font-weight:700; color:#032FC2;}

</style>

<script>
function Test()
{
if(document.getElementById("CID").value == "True"){
document.getElementById("<%=TextValue.ClientID %>").className="font";
}else
{
document.getElementById("<%=TextValue.ClientID %>").className="";
}
}
 window.onload = function() {Test();}
</script>



<%--<input id="TextValue" type="text" />--%>
  <asp:TextBox ID="TextValue" runat="server"></asp:TextBox>

<select id="CID" onchange="Test();">
<option value="false">不加粗</option>
<option value="True">加粗/红色</option>
<option value="True">加粗/黑色</option>
<option value="True">加粗/绿色</option>
<option value="True">加粗/粉红</option>
<option value="True">加粗/蓝色</option>



</select>

------解决方案--------------------
<style>
.font1{font-weight:700; color:#FF0000;}
.font2{font-weight:700; color:#000000;}
.font3{font-weight:700; color:#16851A;}
.font4{font-weight:700; color:#E703E1;}
.font5{font-weight:700; color:#032FC2;}

</style>
<script>
function Test()
{
if(document.getElementById("CID").value != ""){
document.getElementById("<%=TextValue.ClientID %>").className=document.getElementById("CID").value;
}else
{
document.getElementById("<%=TextValue.ClientID %>").className="";
}
}
 window.onload = function() {Test();}
</script>
<select id="CID" onchange="Test();">
<option value="">不加粗</option>
<option value="font1">加粗/红色</option>
<option value="font2">加粗/黑色</option>
<option value="font3">加粗/绿色</option>
<option value="font4">加粗/粉红</option>
<option value="font5">加粗/蓝色</option>