chapter7 CSS特效制作(一).ppt

第七章　 CSS特效制作(一) 本章目标 掌握常用的样式 使用DOM来动态改变元素的样式 样式在页面中的应用 复习学习过的样式 行内样式 元素 style= 一个或多个样式值 内嵌样式 HTML选择器 使用HTML标签名称作为选择器。 Class 选择器 使用“.类名”作为选择器。 ID选择器 使用“#ID 名”作为选择器。 外部样式表 链接外部样式表：link rel= stylesheet type =text/css href= 样式文件.css。 导入外部样式表：style type =text/css@import样式文件.css /style 样式的综合应用-搜狐通行证 html head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title搜狐通行证/title style type=text/css td{ font-family:宋体 ; font-size:14px; height:20px;} .in{ border-style:solid; border-width:1px; border-color: #FFFF33; width:180px;height:20px; } .btn{ border-style:solid; border-width:1px; border-color: #FFFF33; width:80px; height:20px; text-align:center; background-color:#FFFF99; } a{ text-decoration:none; } span{ font-family:黑体; font-size:16px; } .div1{ width:290px; height:170px;border-style:solid; border-width:1px; border-color:#FFFF33 } /style /head body div class=div1 span搜狐/spanspan style=color:#FF0000通行证/span span style= color:#666666 看奥运，上搜狐/spanimg src=images/pic002.gif table bgcolor=#FFFFCC width=290 height=170 tr td colspan=3nbsp;/td /tr tr td align=right用户名/tdtd colspan=2 input type=text class=in//td /tr tr td align=right密 码/td td colspan=2 input type=password class=in //td /tr tr td /tdtd colspan=2input type=checkbox /记住密码nbsp;nbsp; input type=button value=登 录 class=btn/td /tr tr td colspan=3 align=centera href=#注册新用户/anbsp;nbsp; a href=#忘记密码/anbsp;nbsp;a href=#帮助中心/anbsp;nbsp;/td /tr /table/div/body/html 背景和字体样式 常用的样式 位置、边框和可见性样式 组合样式 样式名字 说明 background-color 设置背景颜色 background-image 设置背景图片，使用url(图片路径) background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-repeat 设置背景图片是否重复repeat | repeat-x | repeat-y | no-repeat font-family 设置字体的类型，宋体，隶书 font-size 设置字体大小，单位px font-style 设置字体的风格，normal | italic | oblique border-style 设置边框的风格， none | hidden | dotted | dashed | solid | color 设置文本的颜色 text-align 设置文本的对齐方式 cursor 设置光标的形状auto | default | pointer | progress | move 样式名字 说明 position 设置位置absolute| relative|fixted top, left, bottom, right 设置元素距上、左、下