第2章 HTML与CSS样式(5学时).pptVIP

内联样式示例 学号: input type=text style=color:red; font-size:30px/ br/ 姓名: input type=text style=background-color:yellow; font-size:12pt/ br/ 年龄: input type=text style=width:40px; font-size:1.2em/ 文字颜色 背景色 文字大小 元素宽度 px：像素点，最小单位； pt：磅，一般9pt=12px。 em：百分比值(比例值) 【返回】 内部样式示例1 head style type=text/css body { background-color:silver } input { background-color:yellow; font-size: 12px } /style /head body 学号: input type=text / br/ 姓名: input type=text /br/ 年龄: input type=text /br/ /body 所有input都将使用同一样式 内部样式示例2--改动一下 head style type=text/css body { background: url(123.jpg) no-repeat; } .input1 { background-color:yellow; font-size: 12px } #input2 { background-color:red; font-size: 16px } /style /head body 学号: input type=text class=input1/br/ 姓名: input type=text id=input2/br/ 年龄: input type=text /br/ /body 背景图 class属性调用 #号前缀 点号前缀 id属性调用 【返回】 body { background: url(123.jpg) no-repeat; } .input1 { background-color:yellow; font-size: 12px} #input2 { background-color:red; font-size: 16px} 外部样式示例 head link rel=stylesheet type=text/css href=mystyle.css /head body 学号: input type=text class=input1/br/ 姓名: input type=text id=input2/br/ 年龄: input type=text /br/ /body mystyle.css 便于修改和维护 引用外部css css示例 √ 【完】 * table border=1 width=600 height=100 caption学生名单/caption　 tr !--定义行-- th学号/th !--定义表头-- th姓名/th th院系/th /tr tr td2004001/td !--定义数据-- td张无忌/td td计算机学院/td /tr tr td2004002/td !--定义数据-- td令狐冲/td td计算机学院/td /tr /table 颜色属性 bordercolor ：边框颜色 bgcolor：背景色 例如： table border=1 bordercolor=red bgcolor=#E8FFFF 整个表格背景色 tr bgcolor=silver td2004001/td td bgcolor=yellow张无忌/td td计算机学院/td /tr 对齐属性 align：水平对齐－left / center / right valign：垂直对齐－top / middle / bottom 例如： tr align=center td2004001/td td张无忌/td td va