电子商务平台建设 (css 样式表 )
DESCRIPTION
电子商务平台建设 (CSS 样式表 ). 科技与产学合作处 黄雪峰 2011 年 8 月. 一、 DHTML 基础知识. Dhtml ：动态网页，将网页内容对象化，可用语言实现网页对象的可操作性，使网页可以与用户实现信息交互、内容更新等功能。 Dhtml 技术包括 javaScript 、 VBScript 、 CSS 、 Layers 等技术。 Dhtml 是基于 HTML 语言，通过 CSS 技术扩展了 HTML 样式定义语法和意义，使脚本程序调用或者控制游览器对象和网页对象，从而使页面具有动态效果。. 例 1. 例 2. - PowerPoint PPT PresentationTRANSCRIPT
国际职教理念 本土创新实践
电子商务平台建设(CSS 样式表 )
科技与产学合作处 黄雪峰 2011 年 8 月
一、 DHTML 基础知识
DhtmlDhtml：动态网页，将网页内容对象化，可用语言：动态网页，将网页内容对象化，可用语言实现网页对象的可操作性，使网页可以与用户实现实现网页对象的可操作性，使网页可以与用户实现信息交互、内容更新等功能。信息交互、内容更新等功能。
DhtmlDhtml技术包括技术包括 javaScriptjavaScript 、、 VBScriptVBScript 、、 CSSCSS
、、 LayersLayers等技术。等技术。DhtmlDhtml是基于是基于 HTMLHTML语言，通过语言，通过 CSSCSS技术扩展了技术扩展了
HTMLHTML样式定义语法和意义，使脚本程序调用或者样式定义语法和意义，使脚本程序调用或者控制游览器对象和网页对象，从而使页面具有动态控制游览器对象和网页对象，从而使页面具有动态效果。效果。
例例 11 例例 22
任务一 网页中文字显示样式设置
子任务子任务 11 ：将：将 demo3.htmdemo3.htm另存为另存为 lx1.htm,lx1.htm,后使后使用段落、文字属性设置，将网页用段落、文字属性设置，将网页 demo.htmdemo.htm设置设置成成 http://kc.jxvtc.net/dspt/demo/demo4.htmhttp://kc.jxvtc.net/dspt/demo/demo4.htm的显示效果。的显示效果。
子任务子任务 22 ：使用段落、文字属性设置，将网页：使用段落、文字属性设置，将网页lx1.htmlx1.htm再设置成再设置成http://kc.jxvtc.net/dspt/demo/demo5.htmhttp://kc.jxvtc.net/dspt/demo/demo5.htm的的显示效果。显示效果。
注意：设置后观察注意：设置后观察 lx1.htmlx1.htm文件的字节数。文件的字节数。总结使用总结使用 HTMLHTML属性设置和修改网页存在的缺点。属性设置和修改网页存在的缺点。
二、 CSS 基础
1.CSS1.CSS （层叠式样式表）是用于扩充（层叠式样式表）是用于扩充 HTMLHTML标识属性，增强标识属性，增强网页显示样式控制的标记性语言；网页显示样式控制的标记性语言；
2.CSS2.CSS 优点：优点： 方便网页格式修改；方便网页格式修改； 便于减少网页体积；便于减少网页体积； 能使网页元素更准确定位；能使网页元素更准确定位； 使网页风格统一。使网页风格统一。
3.CSS3.CSS特点：特点： 内容与样式分开；内容与样式分开； 共享样式设定；共享样式设定； 减少图片文件使用。减少图片文件使用。
4.CSS4.CSS 使用类型使用类型 内联式样式：设置在标识中，对所在标识起作用；内联式样式：设置在标识中，对所在标识起作用； 嵌入式样式：设置在网页头部，对所在网页相应标识起作用；嵌入式样式：设置在网页头部，对所在网页相应标识起作用； 外部样式文件：单独存放在样式表文件中，对使用样式表文件的网页外部样式文件：单独存放在样式表文件中，对使用样式表文件的网页起作用，应用于网站中网页风格的统一。起作用，应用于网站中网页风格的统一。• 样式表文件的后缀名为样式表文件的后缀名为 .css.css
5.CSS5.CSS 样式类型样式类型 HTMLHTML 标识样式：改变标识样式：改变 HTMLHTML 标识默认显示样式，标识中不需说明；标识默认显示样式，标识中不需说明； 通用样式：适用与使用该样式的所有通用样式：适用与使用该样式的所有 HTMLHTML 标识，样式设置时用标识，样式设置时用 ##引导，标识中使用引导，标识中使用 ID=“ID=“ 样式名样式名””的形式说明。的形式说明。
子样式：与通用样式类似，适用与使用该样式的所有子样式：与通用样式类似，适用与使用该样式的所有 HTMLHTML 标识，样标识，样式设置时用式设置时用 .. 引导，标识中使用引导，标识中使用 calss=“calss=“ 样式名样式名””的形式说明。的形式说明。
任务二 内联式样式设置
任务：设置标识的内联式样式，观看设任务：设置标识的内联式样式，观看设置效果，并熟悉内联式样式代码位置与置效果，并熟悉内联式样式代码位置与作用。作用。
操作：操作： 新建网页，输入“嘉兴职业技术学院”新建网页，输入“嘉兴职业技术学院”文字；文字；
选中输入的文字，然后设置段落属性（选中输入的文字，然后设置段落属性（见图）见图）
进入代码页，查看段落设置后的代码，进入代码页，查看段落设置后的代码，找到内联式样式代码段，熟悉相关属性找到内联式样式代码段，熟悉相关属性。。
三 内联式样式说明
内联式样式设置在内联式样式设置在 <body><body> 中的某一标识中，属性中的某一标识中，属性为“为“ stylestyle””，值为样式设置。，值为样式设置。
StyleStyle的样式值中样式设置格式：的样式值中样式设置格式： 样式属性样式属性 11 ：样式值：样式值 11 ；样式属性；样式属性 22 ：样式值：样式值 22 ；；…… ....
内联式样式只对所在的内联式样式只对所在的 HTMLHTML标识起作用，对其他同类标识标识起作用，对其他同类标识不起作用；不起作用；
内联式样式主要对所在标识的样式的补充设置，不具备内联式样式主要对所在标识的样式的补充设置，不具备CSS“CSS“方便网页格式修改”、“便于减少网页体积“的优方便网页格式修改”、“便于减少网页体积“的优点，应此不常用。点，应此不常用。
任务三 嵌入式样式使用
子任务子任务 11 ：标识样式设置：标识样式设置操作：操作：
打开打开 demo3.htm,demo3.htm, 另存为另存为 lx2.htmlx2.htm 打开打开 lx2.htm,lx2.htm, 通过通过 [[ 格式格式 ]] 主菜单主菜单 [[ 样式样式 ]] 命令，对照命令，对照
demo4.htmdemo4.htm 样式，在网页头部设置样式，在网页头部设置H1H1 、、 H2H2 、、 H3H3 、、 PP 标识的文字、段落样式表。标识的文字、段落样式表。
查看查看 lx2.htmlx2.htm 的显示效果。的显示效果。 查看查看 lx2.htmlx2.htm 代码，找出并熟悉嵌入式样式表的格式。代码，找出并熟悉嵌入式样式表的格式。
四 嵌入式样式说明
嵌入式样式表设置在网页头部，使用嵌入式样式表设置在网页头部，使用 <style></<style></style>style>标识；标识；
HTMLHTML标识的默认显示格式设置为：标识的默认显示格式设置为： HTMLHTML标识标识 {{ 样式属性样式属性 11 ：样式值：样式值 11 ；样式属性；样式属性 22 ：样式值：样式值
2…..}2…..}
在网页头部设置嵌入式样式表后，窗口中所有使用默认在网页头部设置嵌入式样式表后，窗口中所有使用默认显示样式的相应显示样式的相应 HTMLHTML标识显示将会随样式表改变，标识显示将会随样式表改变，但不改变含有内联式样式表的对应标识。但不改变含有内联式样式表的对应标识。
为了使同一标识显示不同的效果，可对标识设置子样式为了使同一标识显示不同的效果，可对标识设置子样式，格式：，格式：标识标识 .. 子样式子样式 11 名称名称 {{ 样式属性样式属性 11 ：样式值：样式值 11 ；样式属性；样式属性 22 ：样式值：样式值
2…..}2…..}
子样式的使用必须在标识中加子样式的使用必须在标识中加 classclass 属性。属性。 例：例：
子样式的设置可在选中内容的同时选择样式下拉框中相应的样式名子样式的设置可在选中内容的同时选择样式下拉框中相应的样式名即可。即可。
也可以设置标识通用样式也可以设置标识通用样式格式格式 ::
.. 子样式名称子样式名称 {{ 样式属性样式属性 11 ：样式值：样式值 11 ；样式属性；样式属性 22 ：样式值：样式值 2…..}2…..}
任务四 外部样式表的设计与使用
任务任务 :: 通过外部样式表的设计与使用实现通过外部样式表的设计与使用实现 demo4.htmdemo4.htm 显示效果显示效果 ..
操作操作 :: 打开打开 demo3.htm,demo3.htm, 另存为另存为 lx3.htmlx3.htm
使用使用 FPFP新建一新建一 CSSCSS文件文件 通过通过 [[ 格式格式 ]] 主菜单主菜单 [[ 样式样式 ]] 命令，对照命令，对照 demo4.htmdemo4.htm样式，设置样式，设置 H1H1 、、 H2H2
、、 H3H3 、、 PP 标识的文字、段落样式表。标识的文字、段落样式表。 查看生成的样式表文件代码查看生成的样式表文件代码 保存新建的样式表文件保存新建的样式表文件 ,, 文件名为文件名为mycss.cssmycss.css
打开打开 lx3.htm,lx3.htm, 使用使用 [[ 格式格式 ]] 主菜单主菜单 [[ 样式表链接样式表链接 ]] 命令命令 ,, 设置网页样式表链设置网页样式表链接到接到mycss.cssmycss.css
查看查看 lx3.htmlx3.htm代码代码 ,, 找出样式表链接的语句找出样式表链接的语句 查看查看 lx3.htmlx3.htm的显示效果的显示效果
五 外部样式表说明
样式表文件后缀样式表文件后缀”” .css”;.css”;
样式表文件也是纯文本文件样式表文件也是纯文本文件 ,, 可用记事本等纯文本编辑工具编辑可用记事本等纯文本编辑工具编辑 ;;
样式表文件只有被链接到网页后样式表文件只有被链接到网页后 ,, 才能对网页中的标识起作用才能对网页中的标识起作用 ;;
一般一个网站有一个样式表文件一般一个网站有一个样式表文件 ,, 所有网页均链接该样式表文件所有网页均链接该样式表文件，实现网站所有网页风格统一的效果；，实现网站所有网页风格统一的效果；
外部样式表链接标识外部样式表链接标识 <link><link> 格式举例：格式举例：
• <link rel="stylesheet" type="text/css" href="<link rel="stylesheet" type="text/css" href="mycss.cssmycss.css">">
外部样式的使用同嵌入式样式表，样式表文件设置的样式在工具外部样式的使用同嵌入式样式表，样式表文件设置的样式在工具栏栏 [[ 样式样式 ]] 列表中可选择。列表中可选择。
任务五 样式表文件的使用
任务：任务：
目标：目标：
任务六 CSS 综合使用
任务：任务：
结果：结果：
六 CSS 基本语法结构
格式格式 ::
选择符选择符 {{ 属性属性 1:1: 值值 1;1;属性属性 2:2: 值值 2…}2…} 选择符类型选择符类型
• (1)HTML(1)HTML标记标记• (2)(2)类选择符类选择符
– 标记标记 .. 类 类 (( 对应用对应用 calss=“calss=“ 类”类” ))
– .. 类类
• (3)ID(3)ID选择符选择符 (( 个别定义元素样式个别定义元素样式 ,, 在标识中必须设置在标识中必须设置 IDID 号号 ))
– 样式设置样式设置 : #red{color:red;}: #red{color:red;}
– 样式使用样式使用 : < p id=“red”>: < p id=“red”>
• (4)(4)关联选择符关联选择符– 例例 :P B{COLOR=“RED”;}:P B{COLOR=“RED”;}
• (5)(5) 组合组合 (( 用以减少重复声明用以减少重复声明 ))
– 例例 h1,h2,h3{color:red;font-family:h1,h2,h3{color:red;font-family: 黑体黑体 }}
七 CSS 滤镜
用于对图片和文字进行特殊的处理用于对图片和文字进行特殊的处理 语法语法 : filter:: filter: 滤镜名称滤镜名称 (( 效果参数设定效果参数设定 ))
AlphaAlpha ：设置透明效果 ：设置透明效果 blurblur ：创建高速度移动效果，即模糊效果：创建高速度移动效果，即模糊效果 ChromaChroma ：制作专用颜色透明：制作专用颜色透明 DropShadowDropShadow ：创建对象的固定影子：创建对象的固定影子 FlipHFlipH ：创建水平镜像图片：创建水平镜像图片 FlipVFlipV ：创建垂直镜像图片：创建垂直镜像图片 glowglow ：加光辉在附近对象的边外：加光辉在附近对象的边外 graygray ：把图片灰度化：把图片灰度化 invertinvert ：反色：反色 lightlight ：创建光源在对象上：创建光源在对象上 maskmask ：创建透明掩膜在对象上：创建透明掩膜在对象上 shadowshadow ：创建偏移固定影子：创建偏移固定影子 wavewave ：波纹效果：波纹效果 XrayXray ：使对象变得像被：使对象变得像被 xx 光照射一样光照射一样
例例
八、 CSS 虚类
:link :link 未访问过的超链接未访问过的超链接:visited :visited 访问过的超链接访问过的超链接:active :active 活动超链接活动超链接:hover :hover 悬停状态的超链接悬停状态的超链接
例如：例如： 所有超链接去下划线：所有超链接去下划线： a{text-decoration:none}a{text-decoration:none}
悬停变色悬停变色 ::hover{color:red}hover{color:red}
例
九、 <SPAN> 和 <DIV> 标识
<span><span> 和和 <div><div>是为配合样式使用，在是为配合样式使用，在 HTMLHTML中增加的中增加的标识，用于定义区域块和内容块。标识，用于定义区域块和内容块。
<span><span>：块标识；：块标识； <DIV><DIV>：层标识：层标识 <span><span>属行内元素，其前后均不换行，纯粹属于应用样式属行内元素，其前后均不换行，纯粹属于应用样式，只能使用在行中对若干文字的定义。，只能使用在行中对若干文字的定义。
<div><div>为块级元素，可以包含段落、标题、表格、图片等元为块级元素，可以包含段落、标题、表格、图片等元素。素。
例
十、用脚本来使用 CSS 样式
<SPAN onMouseOver=“ this.style.color=‘red’ ” <SPAN onMouseOver=“ this.style.color=‘red’ ”
onMouseOut=“this.style.color=‘’”><B>onMouseOut=“this.style.color=‘’”><B> 文字变红文字变红 </B> </B>
</SPAN></SPAN>
在标记符中用在标记符中用 STYIESTYIE 属性引入了事件”属性引入了事件” onmouseoveronmouseover” ” 后，当鼠后，当鼠标移动到指定的文本上标移动到指定的文本上 (( 如“如“文字变红文字变红”” )) 时时 , this.style.color, this.style.color ＝＝’’ red’red’ 样式加到文本上，使这些文字变成红色。为了返回默认设置，可样式加到文本上，使这些文字变成红色。为了返回默认设置，可以使用以使用 22 个单引号来表示。在上例中，当鼠标移开文本时，文字又回到个单引号来表示。在上例中，当鼠标移开文本时，文字又回到原来大小显示。原来大小显示。
标记符事件：标记符事件： OnclickOnclick （鼠标单击） （鼠标单击） ondblclick ondblclick （鼠标双击）（鼠标双击） onmouseoveronmouseover （（
鼠标悬停） 鼠标悬停） onmouseOutonmouseOut(( 鼠标移开鼠标移开 ))
例
十一、 CSS 特别说明
当一个标识既有内联式样式设置，又当一个标识既有内联式样式设置，又有嵌入式样式设置，又有样式表文件中的有嵌入式样式设置，又有样式表文件中的样式设置（三种方式同时作用），这种情样式设置（三种方式同时作用），这种情况下，离显示文字最近的样式起作用！况下，离显示文字最近的样式起作用！ 内链式内链式 >> 嵌入式嵌入式 >> 外部样式表外部样式表
作业七 网站样式表修改
下载练习文档下载练习文档 地址地址 : : http://kc.jxvtc.net/dspt/ds1001/download/stk/webcss.rarhttp://kc.jxvtc.net/dspt/ds1001/download/stk/webcss.rar
熟悉网站样式表文件熟悉网站样式表文件 css.csscss.css修改样式表及相关图片修改样式表及相关图片 ,, 实现网站页面风格的改变实现网站页面风格的改变 ..在服务器自己的目录中建立在服务器自己的目录中建立 cwebcweb 目录目录 ,, 将修改后将修改后的网站代码放入的网站代码放入 CWEBCWEB 中中 ,, 并通过游览器访问修改并通过游览器访问修改结果结果 ..
将作业递交到课程网站将作业递交到课程网站 :: 标题标题 : : 电商电商 102102 班 班 ****** ****** 网站样式表修改网站样式表修改 内容内容 : : 作业地址链接作业地址链接 链接地址链接地址 :http://kc.jxvtc.net/dspt/ds1001/*****/cweb/index.htm:http://kc.jxvtc.net/dspt/ds1001/*****/cweb/index.htm