课题3网页美化.ppt

课题三 网页美化 CSS样式应用 CSS+DIV网页布局 层的应用 JavaScript的应用 主要内容 课题三（1） CSS样式概述 CSS基本设置 课题三（2） CSS设置超链接与导航菜单 表格、表单的美化 课题三（3） 盒子 CSS页面布局 CSS +DIV布局方法 课题三（4） 网页特效 层的使用 JavaScript基本应用 3.1 CSS样式概述 (X)HTML的发展（P140） HTML与XHTML的区别 标记与属性小写 标记要严格嵌套 标记要封闭 属性要完整并为字符串 (X)HTML与CSS 什么是W3C？DOCTYPE？ 3.1.2 CSS样式种类 类 定义的样式适用于任何网页元素 标签 定义的样式只适用于所选的特定标签 ID 定义的样式适用于特定ID号的网页元素 **复合内容（稍后） 用于标签，类，ID号的组合 类 .newfont { font-family: 华文彩云; } .bt1 { background-color: #F9F; letter-spacing: 10px; border-right-style: dotted; border-bottom-style: solid; border-left-style: dotted; } 标签 p { font-family: 黑体; font-size: 24px; font-weight: normal; word-spacing: 2em; text-decoration: underline; } h1 { color: #F00; } ID #id2 { color: #F3F; text-decoration: blink; background-color: #9CC; line-height: 100px; } #id1 { background-color: #963; letter-spacing: 5px; border:#FF0; border-bottom :dashed; } 3.1.3 CSS定义格式与方法 可以在head /head之间定义 style type= “text/css” !--- 选择器名{ 属性1：属性值； 属性2：属性值； } /style 3.1.4 CSS样式的属性 3.1.4 CSS样式的属性 3.1.4 CSS样式的属性 3.1.5 CSS样式应用的注意点 1 样式种类选择与样式名称设置 2 定义的范围 3 样式的应用 1 样式类型选择与名称设置 类 以字母或者字母与数字的组合。样式名开头是点，点之后第一个字符不能用数字，样式名不能是标签名。 标签 名称必须是确实存在的HTML标签。名称前面不能用点。 ID 用#号开头,仅用于一个HTML元素 复合内容 2 样式定义的范围 新建样式表 样式定义在一个特点的文档中，此文档可以被链接到其他文档，那些其他文档就可以用这些样式。 仅对该文档 样式只在当前文档中起作用 3 样式的应用 类 必须选中要套用样式的网页元素，然后进行样式的套用。 标签 必须明确网页中有那些被重定义样式的标签 高级 网页中需要对一些需改变样式的网页元素命名。 3.2 HTML中使用CSS 使用方式 行内式（不推荐） 内嵌式（前述） 链接式（常用） 导入式 优先级 （最近原则） 行内式 内嵌式 链接式/导入式 链接式（常用） 将CSS样式定义放在一个文件（style1.css）中 在head /head之间定义 link href= style1.css type=text/css rel=stylesheet / rel 属性 -- 定义了文档与链接的关系 Body 中正常使用各种选择器 问题 CSS设置中，基本选择器有哪三种？ Html中使用css样式有哪四种方式？如何使用？ CSS应用于 文本 图像 超链接特效 表格 导航菜单 图像(见 “互联网起源.html”) 图像格式设置： 例如： img{ margin: 20px;（外边距） padding: 15px;（内边距） border: 3px solid #F00; float: left; } 图像填充 X方向填充： body{ background-image: url(bg1.JPG); background-repeat: repeat-x; color: #003; background-color: #FF9; } 固定背景图片位置： body{ background-image:url(cup.gif); background-repeat: no-repeat; bac