第03讲.层叠样式表.ppt

层叠样式表层叠样式表姚小浪2009-8-10目标q掌握样式表的语法规则q样式表的分类：q行内样式表q内嵌样式表q外部样式表q掌握常用的样式q了解层和标签2DHTML 简介DHTML=HTML脚本语言脚本语言JavaScript+层叠样式表层叠样式表CSS指定一个网页的元素决定元素的大小颜色和位置操纵网页的元素DHTML 是制作是制作动态动态 HTML 页面的技术！页面的技术！3DHTML 的功能设计人员可以随着与用户的交互操作而改设计人员可以随着与用户的交互操作而改变文本的颜色、字体和大小变文本的颜色、字体和大小设计人员可以随用户的输入或事件（如单击鼠标）而更改页面的内容设计人员可以用设计人员可以用 x 座标和座标和 y 座标来指定网页元素的座标来指定网页元素的确切位置（绝对位置或相对位置）确切位置（绝对位置或相对位置）设计人员可以将网页中的表格绑定到数据库设计人员可以将网页中的表格绑定到数据库设计人员可以将选择的字体和网页一起封装设计人员可以将选择的字体和网页一起封装Web 程序员可以编写脚本以更改网页的样式和内容程序员可以编写脚本以更改网页的样式和内容在在 DHTML 中，每个元素都被视为一个对象。可以独中，每个元素都被视为一个对象。可以独立地对每个对象进行访问和编程立地对每个对象进行访问和编程动态样式动态样式动态内容动态内容定位定位数据绑定数据绑定可下载字体可下载字体脚本脚本对象结构对象结构4DHTML 示例闪烁文本移动文本消隐文本5设置属性这个段落应用了样式这个段落按默认样式显示什么是样式？指定显示样式样式规则6常用的样式属性属 性CSS名称说说 明明颜色 color文本属性font-size字体大小font-family字体text-align文本对齐边框属性(用于表单元素)border-style边框样式border-width边框宽度 border-color边框颜色 定位属性(position)top顶部边距（上边距）left左边距width宽度height高度z-indexz 轴索引号，用于层7根据样式代码的位置，分为三类：q行内样式q内嵌样式q外部样式样式的分类 在最后一个声明后面加上一个分号在最后一个声明后面加上一个分号(;)是一个好习惯是一个好习惯8行内样式您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。/*关键代码-*/剩余时间：成交结束 新旧程度：全新 所 在 地：北京 宝贝数量：5 件 浏 览 量：220 次 另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以9应用样式 P font-size:20px;color:blue;text-align:center 我是段落 1我是段落 2我是段落 3我们的样式绝对统一内嵌样式-1样式表样式规则所有的段落都采用 P 样式，保证样式统一行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。选择器用分号隔开10内嵌样式-2 选择器根据选择器的不同，内嵌样式又分为：qHTML 选择器qCLASS 类选择器qID 选择器 11/*-关键代码-*/P /*设置样式：字体和背景色*/font-family:System;font-size:18px;color:#3333CC;H2 background-color:#CCFF33;text-align:center;品种特征方面：1、蛋鱼：蛋鱼.。2、龙睛：龙睛.。3、高头：高头.。内嵌样式-3 HTML选择器HTML选择器应用H2样式应用P样式12内嵌样式-4 class类选择器.myinput border:1px solid;border-color:#D4BFFF;color:#2A00FF;用户名密 码 CLASS类选择器应用类选择器：class”类名“类选择器的定义格式为：.类名 样式规则;13#fire color:red;font-size:24px;我是二级标题，火是这样的我是二级标题，火是这样的我是段落，火是这样的我是段落，火是这样的内嵌样式-5 ID选择器ID选择器ID选择器的定义格式为：ID名 样式规则;应用ID选择器：ID”ID名“14 A /*设置超链接不带下划线设置超链接不带下划线*/color:blue;text-decoration:none;/*文本修饰：无文本修饰：无*/A:hover/*鼠标在超链接上方停留时，带下划线鼠标在超链接上方停留时，带下划线*/color:red;text-decoration:underline;/*文本修饰：下划线文本修饰：下划线*/A:visitedcolor:green;text-decoration:none;A:active color:green;text-decoration:none;HEAD 俺是超链接，移过来我就显示下划线俺是超链接，移过来我就显示下划线 内嵌样式-6 特殊的选择器HTML选择器特殊的伪类：A代表超链接，hover代表鼠标悬停 15外部样式q 根据样式文件与网页的关联方式又分为：q链接（LINK）外部样式表q导入（import）外部样式表样式文件P.网页2网页3网页116链接外部样式表使用LINK（链接）标签，语法：第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页关联样式文件：样式文件：newstyle.css P.Onel.htmanother.htm 第三步：浏览查看各网页演示演示：链接样式表示例样式表示例17导入外部样式表使用import导入，语法：import 样式表文件.css;操作步骤同链接样式表 18外部样式文件外部样式文件样式的混合使用行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：q有关整个网站统一风格的样式代码，放置在独立的样式文件*.cssq某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式q某张网页内，部分内容”与众不同“，采用行内样式对于某个HTML标签：1）如果有多种样式，如果规定的样式没有冲突，则叠加；2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；内嵌样式内嵌样式 行内样式行内样式 某个HTML标签19 层标签关键代码 Z-index=1，我是第一层，我是容器，包含图片段落 Z-index=2，我是第二层，包含图片和段落 使用 Z index指定是哪一层是块级容器标签，可以包含图片、标题、段落、文字等 图片段落topleft20 标签所有韩款童装10元/件起拍喽是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容21CSS 的优点q改变浏览器的默认显示风格 q页面内容和显示样式分离 q可以重用样式表q方便网站维护22总结 qDHTML 是网页中 HTML、样式表和脚本的组合应用程序，增强网页的交互性q样式分为行内样式、内嵌样式、外部样式q样式表包括选择器和样式规则，选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类q和都是容器标签，是块级标签，可包含段落、标题等，是行级标签，不能包含段落、标题等，只能包含部分文字23q a标签伪类的样式（4种）q字颜色 字体 字号q段落 边框（颜色 宽度 样式）字体 字号q表格 同段落qSpan标签 div24