1 / 21

电子商务平台建设 (CSS 样式表 )

电子商务平台建设 (CSS 样式表 ). 科技与产学合作处 黄雪峰 2011 年 8 月. 一、 DHTML 基础知识. Dhtml ：动态网页，将网页内容对象化，可用语言实现网页对象的可操作性，使网页可以与用户实现信息交互、内容更新等功能。 Dhtml 技术包括 javaScript 、 VBScript 、 CSS 、 Layers 等技术。 Dhtml 是基于 HTML 语言，通过 CSS 技术扩展了 HTML 样式定义语法和意义，使脚本程序调用或者控制游览器对象和网页对象，从而使页面具有动态效果。. 例 1. 例 2.

xannon
Download Presentation

电子商务平台建设 (CSS 样式表 )

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 电子商务平台建设 (CSS样式表) 科技与产学合作处 黄雪峰 2011年8月

  2. 一、DHTML基础知识 • Dhtml：动态网页，将网页内容对象化，可用语言实现网页对象的可操作性，使网页可以与用户实现信息交互、内容更新等功能。 • Dhtml技术包括javaScript、VBScript、CSS、Layers等技术。 • Dhtml是基于HTML语言，通过CSS技术扩展了HTML样式定义语法和意义，使脚本程序调用或者控制游览器对象和网页对象，从而使页面具有动态效果。 例1 例2

  3. 任务一 网页中文字显示样式设置 • 子任务1：将demo3.htm另存为lx1.htm,后使用段落、文字属性设置，将网页demo.htm设置成http://kc.jxvtc.net/dspt/demo/demo4.htm的显示效果。 • 子任务2：使用段落、文字属性设置，将网页lx1.htm再设置成http://kc.jxvtc.net/dspt/demo/demo5.htm的显示效果。 • 注意：设置后观察lx1.htm文件的字节数。 • 总结使用HTML属性设置和修改网页存在的缺点。

  4. 二、CSS基础 • 1.CSS（层叠式样式表）是用于扩充HTML标识属性，增强网页显示样式控制的标记性语言； • 2.CSS优点： • 方便网页格式修改； • 便于减少网页体积； • 能使网页元素更准确定位； • 使网页风格统一。 • 3.CSS特点： • 内容与样式分开； • 共享样式设定； • 减少图片文件使用。

  5. 4.CSS使用类型 • 内联式样式：设置在标识中，对所在标识起作用； • 嵌入式样式：设置在网页头部，对所在网页相应标识起作用； • 外部样式文件：单独存放在样式表文件中，对使用样式表文件的网页起作用，应用于网站中网页风格的统一。 • 样式表文件的后缀名为.css • 5.CSS样式类型 • HTML标识样式：改变HTML标识默认显示样式，标识中不需说明； • 通用样式：适用与使用该样式的所有HTML标识，样式设置时用#引导，标识中使用ID=“样式名”的形式说明。 • 子样式：与通用样式类似，适用与使用该样式的所有HTML标识，样式设置时用.引导，标识中使用calss=“样式名”的形式说明。

  6. 任务二内联式样式设置 • 任务：设置标识的内联式样式，观看设置效果，并熟悉内联式样式代码位置与作用。 • 操作： • 新建网页，输入“嘉兴职业技术学院”文字； • 选中输入的文字，然后设置段落属性（见图） • 进入代码页，查看段落设置后的代码，找到内联式样式代码段，熟悉相关属性。

  7. 三 内联式样式说明 • 内联式样式设置在<body>中的某一标识中，属性为“style”，值为样式设置。 • Style的样式值中样式设置格式： • 样式属性1：样式值1；样式属性2：样式值2；….. • 内联式样式只对所在的HTML标识起作用，对其他同类标识不起作用； • 内联式样式主要对所在标识的样式的补充设置，不具备CSS“方便网页格式修改”、“便于减少网页体积“的优点，应此不常用。

  8. 任务三 嵌入式样式使用 • 子任务1：标识样式设置 • 操作： • 打开demo3.htm,另存为lx2.htm • 打开lx2.htm,通过[格式]主菜单[样式]命令，对照demo4.htm样式，在网页头部设置H1、H2、H3、P标识的文字、段落样式表。 • 查看lx2.htm的显示效果。 • 查看lx2.htm代码，找出并熟悉嵌入式样式表的格式。

  9. 四 嵌入式样式说明 • 嵌入式样式表设置在网页头部，使用<style></style>标识； • HTML标识的默认显示格式设置为： • HTML标识{样式属性1：样式值1；样式属性2：样式值2…..} • 在网页头部设置嵌入式样式表后，窗口中所有使用默认显示样式的相应HTML标识显示将会随样式表改变，但不改变含有内联式样式表的对应标识。 • 为了使同一标识显示不同的效果，可对标识设置子样式，格式： 标识.子样式1名称{样式属性1：样式值1；样式属性2：样式值2…..}

  10. 子样式的使用必须在标识中加class属性。 • 例： • 子样式的设置可在选中内容的同时选择样式下拉框中相应的样式名即可。 • 也可以设置标识通用样式 格式: .子样式名称{样式属性1：样式值1；样式属性2：样式值2…..}

  11. 任务四 外部样式表的设计与使用 • 任务:通过外部样式表的设计与使用实现demo4.htm显示效果. • 操作: • 打开demo3.htm,另存为lx3.htm • 使用FP新建一CSS文件 • 通过[格式]主菜单[样式]命令，对照demo4.htm样式，设置H1、H2、H3、P标识的文字、段落样式表。 • 查看生成的样式表文件代码 • 保存新建的样式表文件,文件名为mycss.css • 打开lx3.htm,使用[格式]主菜单[样式表链接]命令,设置网页样式表链接到mycss.css • 查看lx3.htm代码,找出样式表链接的语句 • 查看lx3.htm的显示效果

  12. 五 外部样式表说明 • 样式表文件后缀”.css”; • 样式表文件也是纯文本文件,可用记事本等纯文本编辑工具编辑; • 样式表文件只有被链接到网页后,才能对网页中的标识起作用; • 一般一个网站有一个样式表文件,所有网页均链接该样式表文件，实现网站所有网页风格统一的效果； • 外部样式表链接标识<link> • 格式举例： • <link rel="stylesheet" type="text/css" href="mycss.css"> • 外部样式的使用同嵌入式样式表，样式表文件设置的样式在工具栏[样式]列表中可选择。

  13. 任务五 样式表文件的使用 • 任务： • 目标：

  14. 任务六 CSS综合使用 • 任务： • 结果：

  15. 六 CSS基本语法结构 格式: 选择符{属性1:值1;属性2:值2…} • 选择符类型 • (1)HTML标记 • (2)类选择符 • 标记.类 (对应用calss=“类”) • .类 • (3)ID选择符(个别定义元素样式,在标识中必须设置ID号) • 样式设置: #red{color:red;} • 样式使用: < p id=“red”> • (4)关联选择符 • 例:P B{COLOR=“RED”;} • (5)组合(用以减少重复声明) • 例h1,h2,h3{color:red;font-family:黑体}

  16. 七 CSS滤镜 • 用于对图片和文字进行特殊的处理 • 语法: filter:滤镜名称(效果参数设定) • Alpha：设置透明效果 • blur：创建高速度移动效果，即模糊效果 • Chroma：制作专用颜色透明 • DropShadow：创建对象的固定影子 • FlipH：创建水平镜像图片 • FlipV：创建垂直镜像图片 • glow：加光辉在附近对象的边外 • gray：把图片灰度化 • invert：反色 • light：创建光源在对象上 • mask：创建透明掩膜在对象上 • shadow：创建偏移固定影子 • wave：波纹效果 • Xray：使对象变得像被x光照射一样 例

  17. 八、CSS虚类 • :link 未访问过的超链接 • :visited 访问过的超链接 • :active 活动超链接 • :hover 悬停状态的超链接 • 例如： • 所有超链接去下划线：a{text-decoration:none} • 悬停变色:hover{color:red} 例

  18. 九、 <SPAN>和<DIV>标识 • <span>和<div>是为配合样式使用，在HTML中增加的标识，用于定义区域块和内容块。 • <span>：块标识；<DIV>：层标识 • <span>属行内元素，其前后均不换行，纯粹属于应用样式，只能使用在行中对若干文字的定义。 • <div>为块级元素，可以包含段落、标题、表格、图片等元素。 例

  19. 十、用脚本来使用CSS样式 • <SPAN onMouseOver=“ this.style.color=‘red’ ” onMouseOut=“this.style.color=‘’”><B>文字变红</B> </SPAN> • 在标记符中用STYIE属性引入了事件”onmouseover” 后，当鼠标移动到指定的文本上(如“文字变红”)时, this.style.color＝’red’样式加到文本上，使这些文字变成红色。为了返回默认设置，可以使用2个单引号来表示。在上例中，当鼠标移开文本时，文字又回到原来大小显示。 • 标记符事件： • Onclick（鼠标单击） ondblclick （鼠标双击） onmouseover（鼠标悬停） onmouseOut(鼠标移开) 例

  20. 十一、 CSS特别说明 当一个标识既有内联式样式设置，又有嵌入式样式设置，又有样式表文件中的样式设置（三种方式同时作用），这种情况下，离显示文字最近的样式起作用！ • 内链式>嵌入式>外部样式表

  21. 作业七 网站样式表修改 • 下载练习文档 • 地址: http://kc.jxvtc.net/dspt/ds1001/download/stk/webcss.rar • 熟悉网站样式表文件css.css • 修改样式表及相关图片,实现网站页面风格的改变. • 在服务器自己的目录中建立cweb目录,将修改后的网站代码放入CWEB中,并通过游览器访问修改结果. • 将作业递交到课程网站: • 标题: 电商102班 ****** 网站样式表修改 • 内容: 作业地址链接 • 链接地址:http://kc.jxvtc.net/dspt/ds1001/*****/cweb/index.htm

More Related