CSS实例教程.ppt

常用的样式属性 要实现下图细边框的效果，该如何编写样式规则？ 文本框宽度为1px,边框样式为solid 使用border-width和border-style属性 * 常用的样式属性 STYLE type=text/css .textBorder{ border-width:1px; border-style:solid; } /STYLE …… FORM name=form1 method=post action= P名字： INPUT name=fname type=text class=textBorder /P P密码： INPUT name=pass type=password class=textBorder size=21/P /FORM …… 查看源代码 文本框为实线边框 边框宽度为1像素 看看没有设置样式的文本框的效果 * 常用的样式属性 特殊样式（超连接） a:link {color: #FF0000} /* 未被访问的链接 红色 */ a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */ STYLE type=text/css A { color: blue; text-decoration: none; } A:hover{ color: red; } /STYLE …… TR TDA href=#诺基亚/A | A href=#摩托罗拉/A/TD TDA href=#联想/A | A href=#戴尔/A/TD /TR…… 查看源代码 超链接文本的样式 鼠标在超链接上悬停时，超链接文本变为红色 如何编写此超链接样式？ * 常用的样式属性 要实现下图图片按钮的效果，该如何编写样式规则？ 按钮的边界、边框、填充值均为0px 使用background-image、 margin、 border、padding、height、width和font-size属性 按钮背景图像与按钮宽度、高度大小一样 字体大小14px 综合例子：制作图片按钮 * 常用的样式属性 查看源代码 .picButton{ background-image: url(images/back.jpg); border:0 px; margin: 0px; padding: 0px; height: 23px; width: 82px; font-size: 14px; } …… INPUT name=Rt1 type=reset class=picButton value= 重填 INPUT name=Bt1 type=submit class=picButton value= 提交 ……. 背景图像为images文件夹下的back.jpg 按钮的边界、边框、填充均为0像素 设定按钮宽度、高度和图片大小一样 设置按钮上的字体大小为14像素 * 样式表的三类应用方式 内嵌样式表 内嵌样式表使用格式如下： 行内（嵌入）样式表 外部样式表文件 HEAD STYLE type=text/css 样式规则 / STYLE /HEAD 如果希望本网页内的所有同类标签都采用统一样式，这时应采用内嵌样式。 * 内嵌样式表 STYLE type=text/css P { font-family:隶书; font-size:18px; color:#FF0000; } /STYLE /HEAD …… P床前明月光，/P P疑是地上霜。/P P我是郭德刚，/P P低头思故乡。/P …… 查看源代码 样式规则 所有的段落都采用 P 样式，保证样式统一 选择符 样式表 * 行内（嵌入）样式表 如果希望某段文字和其他段落文字显示风格不一样， 该如何解决？ 使用行内（嵌入）样式表可以解决 * 行内（嵌入）样式表 HTML HEAD TITLE设置属性/TITLE /HEAD BODY P style = color:red;font-size:30px;font-family:隶书; 这个段落应用了样式 P 这个段落按默认样式显示 /BODY /HTML 为标签p指定样式 查看源代码 本段P标签采用了行内样式 * 行内（嵌入）样式表 BODY sty