1、电子商务平台建设,第三单元 CSS样式表,一、DHTML基础知识,Dhtml：动态网页，将网页内容对象化，可用语言实现网页对象的可操作性，使网页可以与用户实现信息交互、内容更新等功能。 Dhtml技术包括javaScript、VBScript、CSS、Layers等技术。 Dhtml是基于HTML语言，通过CSS技术扩展了HTML样式定义语法和意义，使脚本程序调用或者控制游览器对象和网页对象，从而使页面具有动态效果。,例1,例2,任务一 网页中文字显示样式设置,子任务1：将demo3.htm另存为lx1.htm,后使用段落、文字属性设置，将网页demo.htm设置成http:/ 子任务2：使用
2、段落、文字属性设置，将网页lx1.htm再设置成http:/ 注意：设置后观察lx1.htm文件的字节数。 总结使用HTML属性设置和修改网页存在的缺点。,二、CSS基础,1.CSS（层叠式样式表）是用于扩充HTML标识属性，增强网页显示样式控制的标记性语言； 2.CSS优点： 方便网页格式修改； 便于减少网页体积； 能使网页元素更准确定位； 使网页风格统一。 3.CSS特点： 内容与样式分开； 共享样式设定； 减少图片文件使用。,4.CSS使用类型 内联式样式：设置在标识中，对所在标识起作用； 嵌入式样式：设置在网页头部，对所在网页相应标识起作用； 外部样式文件：单独存放在样式表文件中，对使
3、用样式表文件的网页起作用，应用于网站中网页风格的统一。 样式表文件的后缀名为.css 5.CSS样式类型 HTML标识样式：改变HTML标识默认显示样式，标识中不需说明； 通用样式：适用与使用该样式的所有HTML标识，样式设置时用#引导，标识中使用ID=“样式名”的形式说明。 子样式：与通用样式类似，适用与使用该样式的所有HTML标识，样式设置时用.引导，标识中使用calss=“样式名”的形式说明。,任务一 内联式样式设置,任务：设置标识的内联式样式，观看设置效果，并熟悉内联式样式代码位置与作用。 操作： 新建网页，输入“嘉兴职业技术学院”文字； 选中输入的问题，然后设置段落属性（见图） 进入
4、代码页，查看段落设置后的代码，找到内联式样式代码段，熟悉相关属性。,三 内联式样式说明,内联式样式设置在中的某一标识中，属性为“style”，值为样式设置。 Style的样式值中样式设置格式： 样式属性1：样式值1；样式属性2：样式值2； 内联式样式只对所在的HTML标识起作用，对其他同类标识不起作用； 内联式样式主要对所在标识的样式的补充设置，不具备CSS“方便网页格式修改”、“便于减少网页体积“的优点，应此不常用。,任务二 嵌入式样式使用,子任务1：标识样式设置 操作： 打开demo3.htm,另存为lx2.htm 打开lx2.htm,通过格式主菜单样式命令，对照demo4.htm样式，在
5、网页头部设置H1、H2、H3、P标识的文字、段落样式表。 查看lx2.htm的显示效果。 查看lx2.htm代码，找出并熟悉嵌入式样式表的格式。,四 嵌入式样式说明,嵌入式样式表设置在网页头部，使用标识； HTML标识的默认显示格式设置为： HTML标识样式属性1：样式值1；样式属性2：样式值2 在网页头部设置嵌入式样式表后，窗口中所有使用默认显示样式的相应HTML标识显示将会随样式表改变，但不改变含有内联式样式表的对应标识。 为了使同一标识显示不同的效果，可对标识设置子样式，格式： 标识.子样式1名称样式属性1：样式值1；样式属性2：样式值2,子样式的使用必须在标识中加class属性。 例：
6、子样式的设置可在选中内容的同时选择样式下拉框中相应的样式名即可。 也可以设置标识通用样式 格式:.子样式名称样式属性1：样式值1；样式属性2：样式值2,任务三 外部样式表的设计与使用,任务:通过外部样式表的设计与使用实现demo4.htm显示效果. 操作: 打开demo3.htm,另存为lx3.htm 使用FP新建一CSS文件 通过格式主菜单样式命令，对照demo4.htm样式，设置H1、H2、H3、P标识的文字、段落样式表。 查看生成的样式表文件代码 保存新建的样式表文件,文件名为mycss.css 打开lx3.htm,使用格式主菜单样式表链接命令,设置网页样式表链接到mycss.css 查
7、看lx3.htm代码,找出样式表链接的语句 查看lx3.htm的显示效果,五 外部样式表说明,样式表文件后缀”.css”; 样式表文件也是纯文本文件,可用记事本等纯文本编辑工具编辑; 样式表文件只有被链接到网页后,才能对网页中的标识起作用; 一般一个网站有一个样式表文件,所有网页均链接该样式表文件，实现网站所有网页风格统一的效果； 外部样式表链接标识 格式举例：外部样式的使用同嵌入式样式表，样式表文件设置的样式在工具栏样式列表中可选择。,任务四 样式表文件的使用,任务：目标：,任务五 CSS综合使用,任务：结果：,六 CSS基本语法结构,格式:选择符属性1:值1;属性2:值2 选择符类型 (1
8、)HTML标记 (2)类选择符 标记.类 (对应用calss=“类”) .类 (3)ID选择符(个别定义元素样式,在标识中必须设置ID号) 样式设置: #redcolor:red; 样式使用: (4)关联选择符 例:P BCOLOR=“RED”; (5)组合(用以减少重复声明) 例h1,h2,h3color:red;font-family:黑体,七 CSS滤镜,用于对图片和文字进行特殊的处理 语法: filter:滤镜名称(效果参数设定) Alpha：设置透明效果 blur：创建高速度移动效果，即模糊效果 Chroma：制作专用颜色透明 DropShadow：创建对象的固定影子 FlipH：创
9、建水平镜像图片 FlipV：创建垂直镜像图片 glow：加光辉在附近对象的边外 gray：把图片灰度化 invert：反色 light：创建光源在对象上 mask：创建透明掩膜在对象上 shadow：创建偏移固定影子 wave：波纹效果 Xray：使对象变得像被x光照射一样,例,参考,八、CSS虚类,:link 未访问过的超链接 :visited 访问过的超链接 :active 活动超链接 :hover 悬停状态的超链接例如： 所有超链接去下划线：atext-decoration:none 悬停变色:hovercolor:red,例,九、 和标识,和是为配合样式使用，在HTML中增加的标识，用
10、于定义区域块和内容块。 ：块标识；：层标识 属行内元素，其前后均不换行，纯粹属于应用样式，只能使用在行中对若干文字的定义。 为块级元素，可以包含段落、标题、表格、图片等元素。,例,十、用脚本来使用CSS样式,文字变红 在标记符中用STYIE属性引入了事件”onmouseover” 后，当鼠标移动到指定的文本上(如“文字变红”)时, this.style.colorred样式加到文本上，使这些文字变成红色。为了返回默认设置，可以使用2个单引号来表示。在上例中，当鼠标移开文本时，文字又回到原来大小显示。 标记符事件： Onclick（鼠标单击） ondblclick （鼠标双击） onmouseover（鼠标悬停） onmouseOut(鼠标移开),例,十一 CSS特别说明,当一个标识既有内联式样式设置，又有嵌入式样式设置，又有样式表文件中的样式设置（三种方式同时作用），这种情况下，离显示文字最近的样式起作用！ 内链式嵌入式外部样式表,
