课题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

文档评论(0)

1亿VIP精品文档

相关文档