简单的CSS使用举例

/*--使用的时候只要在input标签中声明这个属性：class="dataintable"即可 --*/
/* ----------------------------------- 表格 ----------------------------------- */
table.dataintable {
margin-top:10px;
border-collapse:collapse;
border:1px solid #efefef;/*border-style  border-style border-color*/
width:50%;
}
table.dataintable th {
vertical-align:baseline;
padding:3px 0px 3px 0px;/*上右下左内边框像素大小*/
background-color:#d5d5d5;
border:1px solid #FFFFFF;
text-align:right;
}
table.dataintable td {
vertical-align:text-top;
padding:3px 0px 3px 3px;/*上右下左内边框像素大小*/
background-color:#efefef;
border:1px solid #FFFFFF;
text-align:left;
}


以上为css文件中的定义，在html中使用方法如下：

<link rel="stylesheet" type="text/css" href="cssTest.css"><!--用的是链接式-->
 <form action="creatUserDm.jsp" method="post">
    <table class="dataintable" align="center">
    <tr>
    <th style="width:25%;">学号:</th>
    <td style="width:75%;"><input type="text" name="userID"/></td>
    </tr>
    <tr>
    <th style="width:25%;">姓名:</th>
    <td style="width:75%;"><input type="text" name="realname"/></td>
    </tr>
    <tr>
    <th style="width:25%;">年级:</th>
    <td style="width:75%;"><input type="text" name="gradeid"/></td>
    </tr>
    <tr>
    <th style="width:25%;">班级:</th>
    <td style="width:75%;"><input type="text" name="classid"/></td>
    </tr>
    <tr>
    <th style="width:25%;">性别:</th>
    <td style="width:75%;"><input type="radio" name="sex" value="male"/>男<input type="radio" name="sex" value="female"/>女</td>
    </tr>
    <tr>
    <th style="width:25%;">用户名:</th>
    <td style="width:75%;"><input type="text" name="userName"/></td>
    </tr>
    <tr>
    <th style="width:25%;">密码:</th>
    <td style="width:75%;"><input type="text" name="password"/></td>
    </tr>
    <tr>
    <th style="width:25%;">用户类型:</th>
    <td style="width:75%;">
    <select name="usertype">
<option value="1">普通用户</option>
<option value="2">管理员</option>
</select>
</td>
    </tr>
</table>
<input type="submit" value="提交"/>
</form>

所得效果如下：