ACCP V4.0
第六章层叠样式表
ACCP V4.02
回顾 2-1
<TABLE width="200" border="1" align="center" >
<CAPTION align="bottom">我的表格 </CAPTION>
<TR bgcolor="yellow">
<TH>1</TH>
<TH>2</TH>
</TR>
<TR align="center">
<TD rowspan="2">3</TD>
<TD align="right">4</TD>
</TR>
<TR>
<TD align="right">5</TD>
</TR>
</TABLE>
代码阅读
ACCP V4.03
回顾 2-2
要求密码文本框不超过 10个字符，请补全 HTML代码。
密码 <INPUT type=“?”?=“10” >
下面有关单选按钮的 HTML代码正确吗？
<INPUT type="radio" name="radio1" value="F">
<INPUT type=“radio” name=“radio2” value=“M”>女
按钮分为哪三类，类型 (type)分别是？
下拉列表框中显示的超级女生是？
最佳超级女生是
<SELECT NAME =“myselect">
<OPTION >1号 </OPTION>
<OPTION>2号 </OPTION>
<OPTION selected>3号 </OPTION>
</SELECT>
ACCP V4.04
目标
掌握样式表的语法规则
样式表的分类：
行内样式表
内嵌样式表
外部样式表
掌握常用的样式
了解层 <DIV>和 <SPAN>标签
ACCP V4.05
DHTML 简介
DHTML = HTML 脚本语言JavaScript+ +层叠样式表 CSS
指定一个网页的元素决定元素的大小颜色和位置操纵网页的元素
DHTML 是制作 动态 HTML 页面的技术！
ACCP V4.06
DHTML 的功能设计人员可以随着与用户的交互操作而改变文本的颜色、字体和大小设计人员可以随用户的输入或事件（如单击鼠标）而更改页面的内容设计人员可以用 x 座标和 y 座标来指定网页元素的确切位置（绝对位置或相对位置）设计人员可以将网页中的表格绑定到数据库 设计人员可以将选择的字体和网页一起封装Web 程序员可以编写脚本以更改网页的样式和内容在 DHTML 中，每个元素都被视为一个对象。可以独立地对每个对象进行访问和编程动态样式 动态内容 定 位 数据绑定可下载字体 脚 本 对象结构
ACCP V4.07
DHTML 示例闪烁文本移动文本消隐文本
ACCP V4.08
<HTML>
<HEAD>
<TITLE>设置属性 </TITLE>
</HEAD>
<BODY>
<P style = "color:red;font-size:30px;font-family:隶书 ;">
这个段落应用了样式
<P>这个段落按默认样式显示
</BODY>
</HTML>
什么是样式？
指定显示样式样式规则
ACCP V4.09
常用的样式属性属 性 CSS名称 说 明颜色 color
文本属性 font-size 字体大小
font-family 字体
text-align 文本对齐边框属性
(用于表单元素 )
border-style 边框样式
border-width 边框宽度
border-color 边框颜色定位属性
(position)
top 顶部边距（上边距）
left 左边距
width 宽度
height 高度
z-index z 轴索引号，用于层
ACCP V4.010
根据样式代码的位置，分为三类：
行内样式
内嵌样式
外部样式样式的分类在最后一个声明后面加上一个分号 (;) 是一个好习惯
ACCP V4.011
行内样式您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。
/*－－关键代码 --*/
<p>剩余时间：成交结束 <BR>
新旧程度：全新 <BR>
所 在 地：北京 <BR>
宝贝数量,5 件 <BR>
浏 览 量,220 次 </p>
<p style=“color:#FF00FF; font-family:隶书 ; font-
weight:bold; font-size:24px">
另送价值 50元的充电器套装！ (一个充电器，两节充电电池 )可使用半年以
</p>
ACCP V4.012
<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>
内嵌样式 -1
样式表样式规则所有的段落都采用 P 样式，保证样式统一行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。
选择器用分号隔开
ACCP V4.013
内嵌样式 -2 选择器根据选择器的不同，内嵌样式又分为：
HTML 选择器
CLASS 类选择器
ID 选择器
ACCP V4.014
/*--关键代码 --*/
<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>
内嵌样式 -3 HTML选择器
HTML选择器应用 H2样式应用 P样式
ACCP V4.015
内嵌样式 -4 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=" 提 交 ">
</P>
CLASS类选择器应用类选择器：
class＝,类名,
类选择器的定义格式为：
.类名
{
… 样式规则 ;
}
ACCP V4.016
<HEAD>
<STYLE TYPE="text/css">
#fire
{
color:red;
font-size,24px;
}
</STYLE>
</HEAD>
<BODY>
<H2 ID="fire">我是二级标题，火是这样的 </H2>
<P ID ="fire">我是段落，火是这样的 </P>
</BODY>
内嵌样式 -5 ID选择器
ID选择器
ID选择器的定义格式为：
＃ ID名
{
… 样式规则 ;
}
应用 ID选择器,ID＝” ID名“
ACCP V4.017
<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>
内嵌样式 -6 特殊的选择器
HTML选择器特殊的伪类,A代表超链接,hover代表鼠标悬停
ACCP V4.018
外部样式
根据样式文件与网页的关联方式又分为：
链接（ LINK ）外部样式表
导入（ import）外部样式表样式文件
P
{
…..
}
网页 2 网页 3网页 1
ACCP V4.019
链接外部样式表使用 LINK（链接）标签,语法：
<HEAD>
<LINK rel =,stylesheet” type =,text/css” href=,样式表文件,css” >
</HEAD>
第一步：创建样式表文件 newstyle.css
第二步：把样式文件和网页关联样式文件：
newstyle.css
P
{
…..
}
Onel.htm another.htm
第三步：浏览查看各网页演示,链接 样式表示例
ACCP V4.020
导入外部样式表使用 @import导入,语法：
<HEAD>
<STYLE TYPE="text/css">
@ import 样式表文件,css;
</STYLE>
</HEAD>
操作步骤同链接样式表
ACCP V4.021
外部样式文件样式的混合使用行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：
有关整个网站统一风格的样式代码，放置在独立的样式文件 *.css
某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式
某张网页内，部分内容”与众不同“，采用行内样式对于某个 HTML标签：
1）如果有多种样式，如果规定的样式没有冲突，则叠加；
2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按
HTML的默认样式显示；
内嵌样式行内样式某个 HTML标签
ACCP V4.022
<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>…
使用 Z － index指定是哪一层
<DIV>是块级容器标签，可以包含图片、标题、段落、文字等图片段落
top
left
ACCP V4.023
<SPAN> 标签
<HTML>
<BODY>
<H2>所有韩款童装 <SPANstyle=“color:#FF66FF; font-
size:50px;”>10</SPAN>元 /件起拍喽
</H2>
<IMG src="show.gif" width="360" height="195"><BR>
</BODY>
</HTML>
<SPAN>是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容
ACCP V4.024
CSS 的优点
改变浏览器的默认显示风格
页面内容和显示样式分离
可以重用样式表
方便网站维护
ACCP V4.025
总结
DHTML 是网页中 HTML、样式表和脚本的组合应用程序，
增强网页的交互性
样式分为行内样式、内嵌样式、外部样式
样式表包括选择器和样式规则，选择器又分为 HTML选择器、类选择器,ID选择器以及特殊的伪类
<DIV>和 <SPAN>都是容器标签,<DIV>是块级标签，可包含段落、标题等,<SPAN>是行级标签，不能包含段落、
标题等，只能包含部分文字
第六章层叠样式表
ACCP V4.02
回顾 2-1
<TABLE width="200" border="1" align="center" >
<CAPTION align="bottom">我的表格 </CAPTION>
<TR bgcolor="yellow">
<TH>1</TH>
<TH>2</TH>
</TR>
<TR align="center">
<TD rowspan="2">3</TD>
<TD align="right">4</TD>
</TR>
<TR>
<TD align="right">5</TD>
</TR>
</TABLE>
代码阅读
ACCP V4.03
回顾 2-2
要求密码文本框不超过 10个字符，请补全 HTML代码。
密码 <INPUT type=“?”?=“10” >
下面有关单选按钮的 HTML代码正确吗？
<INPUT type="radio" name="radio1" value="F">
<INPUT type=“radio” name=“radio2” value=“M”>女
按钮分为哪三类，类型 (type)分别是？
下拉列表框中显示的超级女生是？
最佳超级女生是
<SELECT NAME =“myselect">
<OPTION >1号 </OPTION>
<OPTION>2号 </OPTION>
<OPTION selected>3号 </OPTION>
</SELECT>
ACCP V4.04
目标
掌握样式表的语法规则
样式表的分类：
行内样式表
内嵌样式表
外部样式表
掌握常用的样式
了解层 <DIV>和 <SPAN>标签
ACCP V4.05
DHTML 简介
DHTML = HTML 脚本语言JavaScript+ +层叠样式表 CSS
指定一个网页的元素决定元素的大小颜色和位置操纵网页的元素
DHTML 是制作 动态 HTML 页面的技术！
ACCP V4.06
DHTML 的功能设计人员可以随着与用户的交互操作而改变文本的颜色、字体和大小设计人员可以随用户的输入或事件（如单击鼠标）而更改页面的内容设计人员可以用 x 座标和 y 座标来指定网页元素的确切位置（绝对位置或相对位置）设计人员可以将网页中的表格绑定到数据库 设计人员可以将选择的字体和网页一起封装Web 程序员可以编写脚本以更改网页的样式和内容在 DHTML 中，每个元素都被视为一个对象。可以独立地对每个对象进行访问和编程动态样式 动态内容 定 位 数据绑定可下载字体 脚 本 对象结构
ACCP V4.07
DHTML 示例闪烁文本移动文本消隐文本
ACCP V4.08
<HTML>
<HEAD>
<TITLE>设置属性 </TITLE>
</HEAD>
<BODY>
<P style = "color:red;font-size:30px;font-family:隶书 ;">
这个段落应用了样式
<P>这个段落按默认样式显示
</BODY>
</HTML>
什么是样式？
指定显示样式样式规则
ACCP V4.09
常用的样式属性属 性 CSS名称 说 明颜色 color
文本属性 font-size 字体大小
font-family 字体
text-align 文本对齐边框属性
(用于表单元素 )
border-style 边框样式
border-width 边框宽度
border-color 边框颜色定位属性
(position)
top 顶部边距（上边距）
left 左边距
width 宽度
height 高度
z-index z 轴索引号，用于层
ACCP V4.010
根据样式代码的位置，分为三类：
行内样式
内嵌样式
外部样式样式的分类在最后一个声明后面加上一个分号 (;) 是一个好习惯
ACCP V4.011
行内样式您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。
/*－－关键代码 --*/
<p>剩余时间：成交结束 <BR>
新旧程度：全新 <BR>
所 在 地：北京 <BR>
宝贝数量,5 件 <BR>
浏 览 量,220 次 </p>
<p style=“color:#FF00FF; font-family:隶书 ; font-
weight:bold; font-size:24px">
另送价值 50元的充电器套装！ (一个充电器，两节充电电池 )可使用半年以
</p>
ACCP V4.012
<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>
内嵌样式 -1
样式表样式规则所有的段落都采用 P 样式，保证样式统一行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。
选择器用分号隔开
ACCP V4.013
内嵌样式 -2 选择器根据选择器的不同，内嵌样式又分为：
HTML 选择器
CLASS 类选择器
ID 选择器
ACCP V4.014
/*--关键代码 --*/
<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>
内嵌样式 -3 HTML选择器
HTML选择器应用 H2样式应用 P样式
ACCP V4.015
内嵌样式 -4 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=" 提 交 ">
</P>
CLASS类选择器应用类选择器：
class＝,类名,
类选择器的定义格式为：
.类名
{
… 样式规则 ;
}
ACCP V4.016
<HEAD>
<STYLE TYPE="text/css">
#fire
{
color:red;
font-size,24px;
}
</STYLE>
</HEAD>
<BODY>
<H2 ID="fire">我是二级标题，火是这样的 </H2>
<P ID ="fire">我是段落，火是这样的 </P>
</BODY>
内嵌样式 -5 ID选择器
ID选择器
ID选择器的定义格式为：
＃ ID名
{
… 样式规则 ;
}
应用 ID选择器,ID＝” ID名“
ACCP V4.017
<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>
内嵌样式 -6 特殊的选择器
HTML选择器特殊的伪类,A代表超链接,hover代表鼠标悬停
ACCP V4.018
外部样式
根据样式文件与网页的关联方式又分为：
链接（ LINK ）外部样式表
导入（ import）外部样式表样式文件
P
{
…..
}
网页 2 网页 3网页 1
ACCP V4.019
链接外部样式表使用 LINK（链接）标签,语法：
<HEAD>
<LINK rel =,stylesheet” type =,text/css” href=,样式表文件,css” >
</HEAD>
第一步：创建样式表文件 newstyle.css
第二步：把样式文件和网页关联样式文件：
newstyle.css
P
{
…..
}
Onel.htm another.htm
第三步：浏览查看各网页演示,链接 样式表示例
ACCP V4.020
导入外部样式表使用 @import导入,语法：
<HEAD>
<STYLE TYPE="text/css">
@ import 样式表文件,css;
</STYLE>
</HEAD>
操作步骤同链接样式表
ACCP V4.021
外部样式文件样式的混合使用行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：
有关整个网站统一风格的样式代码，放置在独立的样式文件 *.css
某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式
某张网页内，部分内容”与众不同“，采用行内样式对于某个 HTML标签：
1）如果有多种样式，如果规定的样式没有冲突，则叠加；
2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按
HTML的默认样式显示；
内嵌样式行内样式某个 HTML标签
ACCP V4.022
<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>…
使用 Z － index指定是哪一层
<DIV>是块级容器标签，可以包含图片、标题、段落、文字等图片段落
top
left
ACCP V4.023
<SPAN> 标签
<HTML>
<BODY>
<H2>所有韩款童装 <SPANstyle=“color:#FF66FF; font-
size:50px;”>10</SPAN>元 /件起拍喽
</H2>
<IMG src="show.gif" width="360" height="195"><BR>
</BODY>
</HTML>
<SPAN>是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容
ACCP V4.024
CSS 的优点
改变浏览器的默认显示风格
页面内容和显示样式分离
可以重用样式表
方便网站维护
ACCP V4.025
总结
DHTML 是网页中 HTML、样式表和脚本的组合应用程序，
增强网页的交互性
样式分为行内样式、内嵌样式、外部样式
样式表包括选择器和样式规则，选择器又分为 HTML选择器、类选择器,ID选择器以及特殊的伪类
<DIV>和 <SPAN>都是容器标签,<DIV>是块级标签，可包含段落、标题等,<SPAN>是行级标签，不能包含段落、
标题等，只能包含部分文字
