Download presentation
Presentation is loading. Please wait.
1
第五单元课1-3 层叠样式表
2
目标 掌握样式表的语法规则 样式表的分类： 掌握常用的样式 了解层<DIV>和<SPAN>标签 行内样式表
内嵌样式表 外部样式表 掌握常用的样式 了解层<DIV>和<SPAN>标签
3
DHTML 是制作动态 HTML 页面的技术！
层叠样式表 CSS 脚本语言 JavaScript = + + 讲解要点： 引入话题：如果一个城市的天气气候每天一成不变，都是夏天或冬天，这样好吗？ 引导：学生可能会说四季如春，当然好啊，引导：天气气候应该动态变化，“四季分明”， 这才适合自然界生物的生长，我们的网页也是如此，样式不能一成不变，应给人一种鲜活的动态感受，吸引浏览者。 1.使用DHTML的目的是实现动态网页，使网页产生一些动态效果， 演示动态效果：参见TG6-Source文件夹中“超链接变色”和“超链接背景切换” 用例 1）超链接变色：鼠标移过去超链接会变色。 2 )超链接背景切换：上机我们将做此练习，鼠标移过去，背景切换。 2.DHTML包括三部分内容： HTML、层叠样式表、脚本语言 指定一个网页的元素 决定元素的大小 颜色和位置 操纵网页的元素
4
DHTML 的功能 在 DHTML 中，每个元素都被视为一个对象。可以独立地对每个对象进行访问和编程
动态样式 动态内容 定 位 数据绑定 在 DHTML 中，每个元素都被视为一个对象。可以独立地对每个对象进行访问和编程 设计人员可以用 x 座标和 y 座标来指定网页元素的确切位置（绝对位置或相对位置） 设计人员可以随用户的输入或事件（如单击鼠标）而更改页面的内容 设计人员可以随着与用户的交互操作而改变文本的颜色、字体和大小 设计人员可以将选择的字体和网页一起封装 Web 程序员可以编写脚本以更改网页的样式和内容 设计人员可以将网页中的表格绑定到数据库 后面一页幻灯片演示效果 可下载字体 脚 本 对象结构
5
DHTML 示例 闪烁文本 移动文本 消隐文本 还可以演示：动态脚本效果，参见参见TG6-Source文件夹中“动态脚本” 用例
告诉学员：这就是依靠JavaScript实现的动态效果， JavaScript 我们后面会讲解。
6
什么是样式？ <HTML> <HEAD> <TITLE>设置属性</TITLE>
<BODY> <P style = "color:red;font-size:30px;font-family:隶书;"> 这个段落应用了样式 <P>这个段落按默认样式显示 </BODY> </HTML> 指定显示样式 样式规则 提问：我们以前学习的<P>标段落标签显示时是什么颜色？ 回答：毫无疑问，黑色。 告诉学员： 1）如果把网页内容比喻为一个女孩的话，样式就好比这位女孩穿的衣服。 女孩喜欢用漂亮的衣装来打扮自己，同样，我们的网页也需要华丽的样式来包装。 2）<P><H1>等标签都是默认为黑色白底，如果希望改变这些默认效果，就必须自定义新的样式。 演示：参考TG6-Source文件夹中的”什么是样式“用例。
7
常用的样式属性 属 性 CSS名称 说 明 颜色 color 文本属性 font-size 字体大小 font-family 字体
text-align 文本对齐 边框属性 (用于表 单元素) border-style 边框样式 border-width 边框宽度 border-color 边框颜色 定位属性(position) top 顶部边距（上边距） left 左边距 width 宽度 height 高度 z-index z 轴索引号，用于层 重点提一下：文本属性、边框属性（后面的幻灯片讲”细边框样式时“会用到）。
8
在最后一个声明后面加上一个分号 (;) 是一个好习惯
样式的分类 根据样式代码的位置，分为三类： 行内样式 内嵌样式 外部样式 在最后一个声明后面加上一个分号 (;) 是一个好习惯
9
您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。
/*－－关键代码--*/ <p>剩余时间：成交结束<BR> 新旧程度：全新 <BR> 所 在 地：北京 <BR> 宝贝数量：5 件 <BR> 浏 览 量：220 次</p> <p style=“color:#FF00FF; font-family:隶书; font- weight:bold; font-size:24px"> 另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以 </p> 讲解要点： 1）强调什么场合用：希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。 2）强调如何用：在HTML标签后面直接加上 ”style“属性即可，除了<P>以外，其他标签用法也是如此。 演示：参考TG6-Source文件夹中的”行内样式“用例。
10
行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。
内嵌样式-1 <HTML> <HEAD> <TITLE>应用样式</TITLE> <STYLE TYPE="text/css" > P { font-size:20px; color:blue; text-align:center } </STYLE> </HEAD> <BODY> <P>我是段落 1</P> <P>我是段落 2</P> <P>我是段落 3</P> <P>我们的样式绝对统一</P> </BODY> </HTML> 行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。 样式表 选择器 样式规则 用分号隔开 提问：我们刚才的行内样式表可以让个别段落与众不同，但是有缺陷： 如果我们希望所有的段落都采用统一的样式呢？ 引导：在每个<P>标签后都加上相同的样式代码，太麻烦了。怎么办？ 很简单，把统一的样式放在<HEAD>标签内，让本网页的所有段落<P>标签共享同一样式。 这就是我们要讲的内嵌样式表。 告诉学员： 1）选择器：表明此样式作用于哪个HTML标签。 2）样式规则之间用分号分割开 3）定好样式后，它将对本网页内所有的同类标签（如<P>）起作用。 演示：参考TG6-Source文件夹中的”什么是内嵌样式“用例。 所有的段落都采用 P 样式，保证样式统一
11
内嵌样式-2 选择器 根据选择器的不同，内嵌样式又分为： HTML 选择器 CLASS 类选择器 ID 选择器
12
内嵌样式-3 HTML选择器 HTML选择器 应用H2样式 应用P样式 /*--关键代码--*/ <HEAD>
<STYLE type="text/css"> P { /*设置样式：字体和背景色*/ font-family: System; font-size: 18px; color: #3333CC; } H2 { background-color: #CCFF33; text-align: center; </STYLE> </HEAD> <BODY> <H2>品种特征方面：</H2> <P> 1、蛋鱼：蛋鱼…….。</P> <P> 2、龙睛：龙睛……..。</P> <P> 3、高头：高头….。</P> HTML选择器 讲解要点： 1）先演示：参考TG6-Source文件夹中的”HTML选择器“用例。 2）指出： 品种特征－<H2> 下面的三段都是段落<P>， 3）提问：我们应该采用哪些标签的样式呢？ 4）回答：显然是<H2>和<P>标签。 5）讲解关键代码，也可以打开源文件讲解。 应用H2样式 应用P样式
13
内嵌样式-4 class类选择器 .myinput CLASS类选择器 应用类选择器： class＝”类名“ <HEAD>
<STYLE type="text/css"> .myinput { border: 1px solid; border-color:#D4BFFF; color:#2A00FF } </STYLE> </HEAD> <BODY> <FORM > <P>用户名 <INPUT name="textfield" type="text" class="myinput"></P> <P>密 码 <INPUT name="textfield" type="password" class="myinput"> </P> <P> <INPUT type="submit" name="Submit" value=" 重 填 "> <INPUT type="submit" name="Submit" value=" 提 交 "> CLASS类选择器 类选择器的定义格式为： .类名 { …样式规则; } 应用类选择器： class＝”类名“ 提问： 1）实现如图所示的细边框效果，我们想想能不能用HTML选择器。 文本框和密码框对应的标签都是<INPUT>标签。 2）引导：确实是可以的，但是我们的按钮对应的HTML标签也是<INPUT>， 这样按钮也会变成细边框了，所以不行，怎么办，采用类样式，引出类样式。 3) 提问：哪我们一起看看，应该涉及到哪些样式呢？ 4）引导：前面我们讲过的边框样式，边框颜色，字体的颜色就可以了，然后给出源代码。 讲解要点： 1）类选择器的定义格式，border: 1px solid; 表示边框为实线，粗细为1 px 2）如何应用 3）类选择器可以让网页设计者选择性的应用，大家注意：两个按钮没有应用类样式， 所以没受影响，从而实现了我们的要求。 4）演示：参考TG6-Source文件夹中的”类选择器“用例。
14
内嵌样式-5 ID选择器 <HEAD> <STYLE TYPE="text/css"> #fire {
color:red; font-size: 24px; } </STYLE> </HEAD> <BODY> <H2 ID="fire">我是二级标题，火是这样的</H2> <P ID ="fire">我是段落，火是这样的</P> </BODY> ID选择器 ID选择器的定义格式为： ＃ID名 { …样式规则; } 告诉学员： 由于ID选择器的功能与CLASS选择器一样，并且有时容易与HTML标签的“ID“属性相冲突，所以一般不推荐使用。 应用ID选择器：ID＝”ID名“
15
特殊的伪类：A代表超链接，hover代表鼠标悬停
内嵌样式-6 特殊的选择器 <HEAD> <STYLE type="text/css"> A { /*设置超链接不带下划线*/ color: blue; text-decoration: none; /*文本修饰：无*/ } A:hover {/*鼠标在超链接上方停留时，带下划线 */ color: red; text-decoration:underline; /*文本修饰：下划线*/ </STYLE> HEAD> <BODY> <A href=“a.htm" >俺是超链接，移过来我就显示下划线</A> </BODY> </HTML> HTML选择器 特殊的伪类：A代表超链接，hover代表鼠标悬停 讲解要点： 1）伪类的定义格式，HTML标签：某个动作 { 样式 }，如本例，A:hover{ … } 2）当对应的HTML标签发生了这个动作，样式就会起作用。 如本例：当鼠标停留在超链接的上方时，指定的样式起作用，所以颜色变红，并带下划线，该例将会在后续章节使用。 3）告诉学员，这些伪类选择器只需了解，都是一些固定的用法，可以从网上查找别的一些用法。 4）演示：参考TG6-Source文件夹中的”伪类选择器“用例。
16
外部样式 根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（import）外部样式表 样式文件 P { ….. }
提问学员： 1）行内样式表什么场合用？ 2）内嵌样式表什么场合用？有什么好处？ 3）既然内嵌样式可以使一张网页内的同类标签共享同一样式， 如果希望网站的所有网页都共享同一样式呢？怎么办？ 4）引导：模仿我们的C语言中的头文件，我们可以把样式单独提取来，放在一个单独的文件， 然后和每张网页关联不就可以了吗 。引出外部样式表。 网页1 网页2 网页3
17
链接外部样式表 演示：链接样式表示例 使用LINK（链接）标签 ，语法： <HEAD>
<LINK rel = “stylesheet” type = ”text/css” href = ”样式表文件.css” > </HEAD> 第一步：创建样式表文件newstyle.css 样式文件： newstyle.css P { ….. } 第二步：把样式文件和网页关联 第三步：浏览查看各网页 讲解要点： 1)先讲解链接外部样式表的语法 2）然后讲解步骤 3）按上述步骤演示：参考TG6-Source文件夹中的”链接样式表“用例。 Onel.htm another.htm 演示：链接样式表示例
18
导入外部样式表 使用@import导入 ，语法： <HEAD> <STYLE TYPE="text/css">
@ import 样式表文件.css; </STYLE> </HEAD> 操作步骤同链接样式表 告诉学员： 1 ) 操作步骤同链接样式表。 2) 导入和链接两种方式功能一样，没什么大的区别，掌握其中一种就行。
19
样式的混合使用 外部样式文件 内嵌样式 行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常 需要混合使用：
有关整个网站统一风格的样式代码，放置在独立的样式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式 某张网页内，部分内容”与众不同“，采用行内样式 外部样式文件 对于某个HTML标签： 1）如果有多种样式，如果规定的样式没有冲突，则叠加； 2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示； 内嵌样式 行内样式 告诉学员： 对于某个HTML标签： 1）如果有多种样式，如果规定的样式没有冲突，则叠加。 例如，行内样式指定字体，而内嵌样式指定颜色，外部样式指定大小，则三种样式综合即可。 2）如果有冲突（例如都指定字体大小），则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示， 如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示。 3)演示示例：参考TG6-Source文件夹中的”样式混合使用“用例，同时使用了外部样式和行内样式。 某个HTML标签
20
<DIV>是块级容器标签，可以包含图片、标题、段落、文字等
…关键代码… <DIV id="Layer1" style="position:absolute; left:149px; top:110px; width:357px; height:87px; z-index:1; " > <IMG src="talk.gif" width="91" height="76"> <P>Z-index=1，我是第一层，我是容器，包含图片段落</P> </DIV> <DIV id="Layer2" style=“….; z-index:2; …."> <IMG src="bbs_logo.gif" width="101" height="43"> <P>Z-index=2，我是第二层，包含图片和段落 </P> </DIV>… 图片 段落 top left 使用 Z － index指定是哪一层 讲解要点： 1）<DIV>也称为层标签，表示一层区域。语法为： <DIV id=“层编号” style=“postion:…指定层所在的位置…；z-index=n (指定在Z轴方向的编号)” > ….包含的内容 </DIV> 2）<DIV>是容器标签，它可以包括（容纳）段落<P>、标题<H1>、图片<IMG>、文字等内容，如图所示。 所以还称为块级容器标签。 3)告诉学员，层的位置了解，因为实际设计页面时需要DreamWeaver插入层(可演示如何插入)，强调z-index的含义 <DIV>是块级容器标签，可以包含图片、标题、段落、文字等
21
<SPAN>是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容
<HTML> <BODY> <H2>所有韩款童装<SPAN style=“color:#FF66FF; font- size:50px;”>10</SPAN>元/件起拍喽 </H2> <IMG src="show.gif" width="360" height="195"><BR> </BODY> </HTML> <SPAN>是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容 讲解要点： 1）<SPAN>是一个行内元素，它不能包含段落、标题、表格等，显示时也不会引起换行。 最常见的使用方式是嵌入在某个标签中，突出显示某部分文本，甚至某个字符。 例如，文本内容“<H2>所有韩款童装10元/件起拍<H2>”中， 我们希望突出显示客户关心的价格数字“10”，就可以<H2>标签中插入<SPAN>，单独修饰”10”。 2）告诉学员：关于SPAN的样式只需了解，一般也通过DreamWeaver来辅助设计。
22
CSS 的优点 改变浏览器的默认显示风格 页面内容和显示样式分离 可以重用样式表 方便网站维护
23
总结 DHTML 是网页中 HTML、样式表和脚本的组合应用程序，增强网页的交互性 样式分为行内样式、内嵌样式、外部样式
样式表包括选择器和样式规则，选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类 <DIV>和<SPAN>都是容器标签，<DIV>是块级标签，可包含段落、标题等，<SPAN>是行级标签，不能包含段落、标题等，只能包含部分文字
Similar presentations
