如何使用CSS给所有td下的文本框定义样式?

html-css08

如何使用CSS给所有td下的文本框定义样式?,第1张

直接使用css的标签选择器就可以实现

td input[type='text'] {.../*设置需要的样式*/}

举个例子:

创建Html元素

<table>

<tr>

<td>name</td>

<td><input type="text"></td>

<td>sex</td>

<td><input type="radio" name="sex" checked>男<input type="radio" name="sex">女</td>

</tr>

<tr>

<td>tel.</td>

<td><input type="text"></td>

<td>addr.</td>

<td><input type="text"></td>

</tr>

</table

设置css样式

table{border-collapse: collapse}

td{border:1px solid #cccpadding:5px}

/*设置单元格中文本框的样式*/

td input[type='text']{border:1px solid greenborder-radius:3pxheight:30px}

观察显示效果

以下是定义行高代码,数字越大,行与行之间距离越大

.td{

line-height: 12px

}

或者用百分比也行

.td{

line-height: 150%

}

调用时先在<head></head>之间放入

<link href="css.css" rel="stylesheet" type="text/css" />

注意href="css.css"是路径自己定义

调用时用class="td"就行了

例:

<table width="50" >

<tr>

<td class="td">121312313131</td>

</tr>

</table>