CSS+DIV入门教程PPT_2012更新版 2

1、 主要内容主要内容 一、样式表一、样式表(CSS)的基本概念的基本概念 二、二、CSS与与HTML文档的结合方法文档的结合方法 三、三、CSS属性的理解与应用属性的理解与应用 四、四、CSS样式的单位样式的单位 五、五、CSS样式在网页中的应用样式在网页中的应用 六、六、CSS的高级应用的高级应用 一、一、CSSCSS的基本概念的基本概念 1、编写、编写CSS样式的方法样式的方法 使用使用CSS编辑器编辑器 如如Dreamweaver、Frontpage等都会自带等都会自带CSS编辑器。编辑器。 使用超文本编辑器使用超文本编辑器 如如Dreamweaver、Frontpage等超文本编辑器均可

2、编等超文本编辑器均可编 辑样式表；辑样式表； 记事本记事本 一、一、CSSCSS的基本概念的基本概念 2、基本语法、基本语法 选择符选择符属性属性: 值值 选择符选择符属性属性1: 值值1; 属性属性2: 值值2 ; 单一选择符的复合单一选择符的复合 样式声明应该用样式声明应该用 “;”隔开，为便于隔开，为便于 阅读也可以阅读也可以分行写分行写 。 几乎所有的几乎所有的HTML 标记符形式都可以标记符形式都可以 作为选择符。作为选择符。 CSS例子例子 H1 font-size:x-large; color:red H2 font-size:large; color:blue H1 font-

3、size:x-large; color:red H2 font-size:large; color:blue 一、一、CSSCSS的基本概念的基本概念 3、CSS样式的组合、继承和关联性样式的组合、继承和关联性 u样式的组合：把具有样式的组合：把具有相同声明定义的选择符相同声明定义的选择符组合在一组合在一 起，并用逗号隔开。起，并用逗号隔开。 例如：例如：段落元素段落元素p、单元格元素、单元格元素td和类和类c1可以使用可以使用 相同样式：相同样式： p,td,.c1font-size:12pt;font-family:黑体黑体;color:red 一、一、CSSCSS的基本概念的基本概念 样

4、式的继承：若子元素未定义，则它将继承上级元素的样式的继承：若子元素未定义，则它将继承上级元素的 样式的定义。但存在少数属性不能继承，见样式的定义。但存在少数属性不能继承，见P119。 CSS例子例子 一、一、CSSCSS的基本概念的基本概念 样式表的样式表的关联性关联性： 样式表的关联性指在某些样式定义中，可以定义某样式表的关联性指在某些样式定义中，可以定义某 样式仅样式仅在某个特定元素范围内在某个特定元素范围内才有效。才有效。 例如：例如： p bfont-size:12pt;font-family:黑体黑体;color:red b元素仅在元素仅在p元素作用范元素作用范 围内会套用上述的样式

5、围内会套用上述的样式 设定。设定。 而在其他地方而在其他地方 不具有这些属性。不具有这些属性。 一、一、CSSCSS的基本概念的基本概念 4、注释、注释 CSS文字的注释形式与文字的注释形式与C语言类似。语言类似。 pfont-size:12pt /*P标签的样式定义标签的样式定义*/ 一、一、CSSCSS的基本概念的基本概念 5、选择符、选择符 样式表的基本语法形式：样式表的基本语法形式： selectorproperty1:value1; property2:value2; 需要应用的需要应用的 样式的内容样式的内容 样式的属性样式的属性样式的属性样式的属性 的值的值 Select的五种合

6、法的类别：的五种合法的类别：HTML标记符标记符、用户定义的类用户定义的类 Class、用户定义的用户定义的ID、虚类虚类和和虚元素虚元素 P119 选择符的类别选择符的类别 HTML标记符标记符 应用比较多，注意继承性、组合性和关联性（应用比较多，注意继承性、组合性和关联性（P119）的）的 应用。应用。 用户定义的类选择符用户定义的类选择符 可以使用任何名称命名类。可以使用任何名称命名类。 里所有的元素都可以定义里所有的元素都可以定义“类类”。 语法如下：语法如下： selector.classnameproperty1:value1; property2:value2; .classna

7、meproperty1:value1; property2:value2; 1、 两种定义形式的区两种定义形式的区 别？别？ 2、在标签中使用类选择、在标签中使用类选择 符样式的使用方式如何符样式的使用方式如何 ？ 选择符的类别选择符的类别 ID选择符选择符 应用的形式基本与类选择符类似，定义时用应用的形式基本与类选择符类似，定义时用“#”替替 代代”.”。 因此应用时一般选取其中的一种。见因此应用时一般选取其中的一种。见P120例子。例子。 虚类和虚元素虚类和虚元素 在在html的页面元素中没有这种属性，故称其为虚类，仅的页面元素中没有这种属性，故称其为虚类，仅 在在IE5.0以上的浏览器版

8、本才支持虚类选择符。以上的浏览器版本才支持虚类选择符。 语法如下：语法如下： 页面元素名：元素虚属性名页面元素名：元素虚属性名样式表内容样式表内容 a:link color: #000000 a:visited color: #cccccc a:hover color: #000000; font-style:italic a:active color: #aaaaaa :link color: #000000 :visited color: #cccccc :hover color: #000000; font-style:italic :active color: #aaaaaa 二、二、

9、CSSCSS与与HTMLHTML文档的结合方法文档的结合方法 HTML与样式表有多种结合方法与样式表有多种结合方法 内联样式内联样式：在：在标记符内定义标记符内定义 外联样式外联样式 使用使用标记符链接到外部的样式文件标记符链接到外部的样式文件 使用使用CSS的的import标记符来导入样式文件标记符来导入样式文件 在在HTML标签中直接加入样式表的定义标签中直接加入样式表的定义。 二、二、CSSCSS与与HTMLHTML文档的结合方法文档的结合方法 内联样式：在内联样式：在标记符内定义，在本网页内起作标记符内定义，在本网页内起作 用。用。 二、二、CSSCSS与与HTMLHTML文档的结合方

10、法文档的结合方法 外联样式：外联样式：使用使用标记符标记符链接到外部的样式文件，链接到外部的样式文件， 凡链接的网页都起作用凡链接的网页都起作用 1、定义外部样式文件，用记事本或者、定义外部样式文件，用记事本或者 Dreamweaver，编辑完后文件扩展名应为，编辑完后文件扩展名应为”.css”； 2、建立、建立HTML网页文档；网页文档； 3、在网页文档中使用、在网页文档中使用标签将前面的样式表标签将前面的样式表 文档链接到网页中。文档链接到网页中。 hr.css 二、二、CSSCSS与与HTMLHTML文档的结合方法文档的结合方法 外联样式：外联样式：使用使用import导入导入外部的样式

11、文件，凡在外部的样式文件，凡在 导入该样式表的网页都起作用导入该样式表的网页都起作用 1、定义外部样式文件，用记事本或者、定义外部样式文件，用记事本或者 Dreamweaver，编辑完后文件扩展名应为，编辑完后文件扩展名应为”.css”； 2、建立、建立HTML网页文档；网页文档； 3、在网页文档中、在网页文档中import导入导入前面的样式表。前面的样式表。 hr.css 二、二、CSSCSS与与HTMLHTML文档的结合方法文档的结合方法 在在HTML标签中直接加入样式表的定义标签中直接加入样式表的定义 若在个别标签需要作样式调整，可使用这种方式。若在个别标签需要作样式调整，可使用这种方式

12、。 使用标签的使用标签的“Style”属性来定义样式。属性来定义样式。 被定义的样式文本在此处。被定义的样式文本在此处。 三、三、CSSCSS属性的理解与应用属性的理解与应用 样式表的样式表的5类常用属性：详见类常用属性：详见P126 字体属性字体属性 P126：字体、字号、行距等。：字体、字号、行距等。 颜色及背景属性颜色及背景属性 P127：背景颜色、背景图片等。：背景颜色、背景图片等。 文本属性：文本属性：P128 区块属性区块属性 P128：边框粗细等。：边框粗细等。 分级属性分级属性 P128：各组件的字距、行距、缩排等。：各组件的字距、行距、缩排等。 鼠标属性鼠标属性 P130：鼠

13、标形状等。：鼠标形状等。 详见帮助文件详见帮助文件 字体属性字体属性 Font-family:指定文字的字体指定文字的字体 H1font-family:华文彩云华文彩云 Font-style：指定文字是否加粗或使用斜体。取值：指定文字是否加粗或使用斜体。取值： normal（正常）、（正常）、oblique（偏斜体）、（偏斜体）、italic（斜体）（斜体） Font-size：指定文字的大小。：指定文字的大小。 Font：上述样式属性的综合表示法。：上述样式属性的综合表示法。 Pfont: bold 16pt 颜色及背景属性颜色及背景属性 Color:颜色颜色 Background-colo

14、r：指定背景颜色：指定背景颜色 H1background-color:#000800 Background-image：指定：指定Html组件的背景图片，值组件的背景图片，值 为为url或或none。 Bodybackground-image:url(image1.jpg) 文本属性文本属性 Text-decoration：设置底线、顶线、闪烁等文字效果。：设置底线、顶线、闪烁等文字效果。 值为值为none,underline,overline,line-through,blink. Text-align：指定文字的对齐方式。值为：指定文字的对齐方式。值为： left,right,center

15、,justify 区块属性区块属性 定义边界，取值为：长度定义边界，取值为：长度|百分比百分比|auto 上边界：上边界：margin-top；下边界：；下边界：margin-bottom 左边界：左边界：margin-left：右边界：右边界：margin-right P.narrow margin-right: 50% 定义边框：定义边框： Border-color Border-width Border-style 分级属性分级属性 List-style-type：指定项目符号或编号：指定项目符号或编号 允许值：允许值：disc | circle | square | decimal |

16、 lower-roman | upper-roman | lower-alpha | upper-alpha | none List-style-image：指定项目符号的图形文件名称，：指定项目符号的图形文件名称， 值为值为url或或none LI.square list-style-type: square UL.plain list-style-type: none OL list-style-type: upper-alpha /* A B C D E etc. */ OL OL list-style-type: decimal /* 1 2 3 4 5 etc. */ OL OL O

17、L list-style-type: lower-roman /* i ii iii iv v etc. */ 鼠标属性鼠标属性 让鼠标移到不同对象上面，显示不同形状。让鼠标移到不同对象上面，显示不同形状。 Cursor属性，取值如下属性，取值如下 Auto：自动按默认显示：自动按默认显示 Crosshair：“” Hand:手形手形 Text：文本：文本I形形 Wait：等待：等待 练习：练习： 1、若要在网页上使用使用统一的页面风格：、若要在网页上使用使用统一的页面风格： 背景背景为浅蓝灰色（为浅蓝灰色（#cdcdfe），）， 文本文本为深蓝色（为深蓝色（#000066），）， 所有所有网

18、页都不留边网页都不留边(Margin)， 且且列表列表项目、项目、表格表格及及段落段落文本中的字体均为文本中的字体均为10.5pt； 颜色颜色：绿色；：绿色；文本对齐文本对齐：居中；：居中；字体字体：楷体：楷体,Times New Roman；文字格式文字格式：加粗。：加粗。 练习：练习： 2、编辑一个外联样式表，它使所有网页中表格的文本、编辑一个外联样式表，它使所有网页中表格的文本 显示为如下风格：显示为如下风格： 文字大小：文字大小：10.5pt; 颜色：绿色；颜色：绿色； 文本对齐：居中；文本对齐：居中； 字体：楷体字体：楷体 文字格式：加下划线文字格式：加下划线 练习：练习： 3、在上

19、题中，若有一个网页中的某个表格要采取不同、在上题中，若有一个网页中的某个表格要采取不同 的显示方式：如的显示方式：如 颜色：蓝色；颜色：蓝色； 字体：黑体字体：黑体,Arial Black 其他与上题相同，应在该页上使用什么样式表？其他与上题相同，应在该页上使用什么样式表？ 练习：练习： 4、定义一个类选择符，样式为：、定义一个类选择符，样式为： 文字大小：文字大小：12pt; 颜色：绿色；颜色：绿色； 文本对齐：居中；文本对齐：居中； 字体：楷体，字体：楷体，Times New Roman 文字格式：加粗文字格式：加粗 并在多个页面元素中引用此类样式。并在多个页面元素中引用此类样式。 练习：

20、练习： 5、定义一个伪类选择符，使超链接具有一下特效：、定义一个伪类选择符，使超链接具有一下特效： （1）超链接没有下划线；）超链接没有下划线； （2）当鼠标指向超链接时，文字从）当鼠标指向超链接时，文字从10pt变成变成12pt， 文字加粗；文字加粗； （3）超链接文本在单击前是蓝色，在单击后是灰）超链接文本在单击前是蓝色，在单击后是灰 色，并变成斜体。色，并变成斜体。 课堂练习：课堂练习： 定义一个内联样式，使网页中的所有段落显示效果如定义一个内联样式，使网页中的所有段落显示效果如 下：下： 字的大小：字的大小：12px 字的颜色：字的颜色：0000ff 对齐方式为居中对齐方式为居中 背景

21、颜色：背景颜色：gray 四、四、CSSCSS样式的单位样式的单位 定义长度：符号定义长度：符号 数值数值 单位（单位（P132） 绝对长度单位：绝对长度单位：cm,mm,in,pt(印刷点数印刷点数),pc等。等。 相对长度单位：相对长度单位：px（像素）（像素）,em,ex。 百分比单位百分比单位 百分比值总是相对于另一个值来说的，百分比值总是相对于另一个值来说的，参照值一般参照值一般 是该元素本身的字体尺寸是该元素本身的字体尺寸。 样式的单位样式的单位 四、四、CSSCSS样式的单位样式的单位 定义颜色定义颜色 rgb函数函数：rgb(R,G,B) R、G、B可用百分比值表示，也可用可用

22、百分比值表示，也可用0255的整的整 数值数值表示。表示。 使用十六进制数组使用十六进制数组：#RRGGBB 直接使用颜色名直接使用颜色名。 color: rgb(100%,0,0) color: rgb(255,0,0) color: #FF0000 color:red 五、五、CSSCSS样式在网页中的应用样式在网页中的应用 1、在网页中创建样式，分别创建下列三种样式、在网页中创建样式，分别创建下列三种样式 标签选择符标签选择符 类选择符类选择符 ID选择符选择符 2、在网页中导入、链入样式表文件、在网页中导入、链入样式表文件 五、五、CSSCSS样式在网页中的应用样式在网页中的应用 字体

23、、大小、粗细、行高、字体、大小、粗细、行高、 颜色、修饰等颜色、修饰等 背景颜色、图像、重复、水背景颜色、图像、重复、水 平位置等平位置等字间距、对齐方式、缩进等字间距、对齐方式、缩进等 宽、高、填充、边界等宽、高、填充、边界等 边框的样式、宽度和颜色等边框的样式、宽度和颜色等 设置项目符号和编号。设置项目符号和编号。 位置的设置。位置的设置。 设置滤镜。设置滤镜。 六、用六、用CSSCSS样式制作一些特殊效果样式制作一些特殊效果 1、给文字设置图形背景：利用层、给文字设置图形背景：利用层 2、文字间的重叠效果：利用两个层、文字间的重叠效果：利用两个层 3、首字放大、首字放大 P:first-

24、letter 七、样式表的高级应用七、样式表的高级应用 1、CSS的滤镜属性的滤镜属性 （filter） 的应用的应用 2、应用滤镜制作常见特效、应用滤镜制作常见特效 文字特效文字特效 鼠标特效鼠标特效 图像特效图像特效 3、利用、利用css进行页面布局进行页面布局 1 1、CSSCSS的滤镜属性的滤镜属性 （filterfilter） 的应用的应用 样式表滤镜的构成样式表滤镜的构成 例如：例如： 静态滤镜的种类（静态滤镜的种类（IE4.0以上版本）以上版本） 让对象呈现让对象呈现渐变半透明渐变半透明效果效果 让对象产生风吹模糊的效果让对象产生风吹模糊的效果 让对象有一个让对象有一个下落式的阴

25、影下落式的阴影 在对象的周围产生在对象的周围产生光晕而模糊的效果光晕而模糊的效果 让图像中的让图像中的某一颜色变成透明色某一颜色变成透明色 让让HTML对象对象水平转换水平转换 让让HTML对象对象垂直转换垂直转换 让让HTML对象产生水平或是垂直方向上的对象产生水平或是垂直方向上的正弦波形正弦波形 让对象产生让对象产生阴影效果阴影效果 利用一个利用一个HTML对象在另一个对象上产生图像的对象在另一个对象上产生图像的遮罩遮罩 在在HTML元件上放置一个元件上放置一个光影光影 把一个彩色的图象变成把一个彩色的图象变成灰色调图象灰色调图象 让对象产生让对象产生照片底片的效果照片底片的效果 让对象让

26、对象轮廓突出显示轮廓突出显示 1 1、CSSCSS的滤镜属性的滤镜属性 （filterfilter） 的应用的应用 （1） 让对象呈现让对象呈现渐变半透明渐变半透明效果效果 1 1、CSSCSS的滤镜属性的滤镜属性 （filterfilter） 的应用的应用 p filter:alpha(opacity=80,style=0,starX=2,finishX=4); filter: alpha(属性属性=属性值属性值) 0表示全图统一同一透明度表示全图统一同一透明度 应用在层或表应用在层或表 格或图片中有格或图片中有 效。效。 （2） 让对象产生模糊的效果让对象产生模糊的效果 1 1、CSSCS

27、S的滤镜属性的滤镜属性 （filterfilter） 的应用的应用 filter: blur(属性属性=属性值属性值) p filter:blur(add=1,direction=60,strength=2); （3） 让对象有一个让对象有一个下落式的阴影下落式的阴影 1 1、CSSCSS的滤镜属性的滤镜属性 （filterfilter） 的应用的应用 p filter:dropshadow(color=#ff0080,offX=2,offY=2,positive=0); color:#00ff11 filter: dropshadow(属性属性=属性值属性值) （4） 在对象的周围产生在对象

28、的周围产生光晕而模糊的效果光晕而模糊的效果 参数如下：参数如下： COLOR：指定发光的颜色。：指定发光的颜色。 STRENGTH：发光强度的表现，也指光晕的厚度；其大小可以从：发光强度的表现，也指光晕的厚度；其大小可以从 1到到255之间之间的任何整数来指定这个强度。的任何整数来指定这个强度。 例如：例如： 1 1、CSSCSS的滤镜属性的滤镜属性 （filterfilter） 的应用的应用 p filter:glow(color=#880088,strength=3); （5）让让图像图像中的中的某一颜色变成透明色某一颜色变成透明色 参数如下：参数如下： COLOR属性：用来指定要变为透明

29、色的颜色，通过该属性值的设属性：用来指定要变为透明色的颜色，通过该属性值的设 定，我们可以来过滤某图象中的指定颜色。定，我们可以来过滤某图象中的指定颜色。 例如：例如： （6）让让HTML对象对象水平转换水平转换 让让HTML对象对象垂直转换垂直转换 例如：例如： 1 1、CSSCSS的滤镜属性的滤镜属性 （filterfilter） 的应用的应用 p filter:chroma(color=#0000fe)； p filter:filph （7）让让HTML对象产生水平或是垂直方向上的对象产生水平或是垂直方向上的正弦波形正弦波形 参数如下：参数如下： add：是一个布尔值，它用来决定是否将原

30、始图象加入最后的效：是一个布尔值，它用来决定是否将原始图象加入最后的效 果之中。果之中。0：不使用原图；：不使用原图；1：使用：使用 freq：是指波纹的频率，也就是指定在对象上一共需要产生多少：是指波纹的频率，也就是指定在对象上一共需要产生多少 个完整的波纹。个完整的波纹。 phase：用来设置正弦波的偏移量，也就是决定波形的形状，其：用来设置正弦波的偏移量，也就是决定波形的形状，其 属性值的取值范围为从属性值的取值范围为从0到到360度。度。 lightstrength：对于波纹增强光影的效果，其取值范围为从：对于波纹增强光影的效果，其取值范围为从0到到 100。 strength：用来决

31、定波形振幅的大小。：用来决定波形振幅的大小。 1 1、CSSCSS的滤镜属性的滤镜属性 （filterfilter） 的应用的应用 （8） 让对象产生让对象产生阴影效果阴影效果 参数如下：参数如下： color：设置阴影的颜色。：设置阴影的颜色。 direction：设置投影的方向，取值范围为度到度，其中：设置投影的方向，取值范围为度到度，其中 0度代表垂直向上，然后每度代表垂直向上，然后每45度为一个单位，该属性的默认值是度为一个单位，该属性的默认值是 向左的向左的270度。度。 例如：例如： 1 1、CSSCSS的滤镜属性的滤镜属性 （filterfilter） 的应用的应用 p filt

32、er:shadow(color=#00ff00,direction=45)； （9） 利用一个对象在另一个对象上产生图像的利用一个对象在另一个对象上产生图像的遮罩遮罩 作用：该滤镜能够利用一个作用：该滤镜能够利用一个HTML对象在另一个对象上产生图对象在另一个对象上产生图 像的遮罩像的遮罩 ，可以为对象建立一个，可以为对象建立一个覆盖于表面的膜覆盖于表面的膜，其效果就，其效果就 象戴者有色眼镜看物体一样，象戴者有色眼镜看物体一样，一般适用于图象对象一般适用于图象对象。 参数：参数：color属性用来指定要被遮罩的颜色。属性用来指定要被遮罩的颜色。 1 1、CSSCSS的滤镜属性的滤镜属性 （f

33、ilterfilter） 的应用的应用 （10） 在在HTML元件上放置一个元件上放置一个光影光影 （没有参数）（没有参数） 作用：该滤镜能够使作用：该滤镜能够使html对象产生一种模拟光源的投射效果。一对象产生一种模拟光源的投射效果。一 旦为对象定义了旦为对象定义了light滤镜属性，那么就可以调用它的方法来设置滤镜属性，那么就可以调用它的方法来设置 或者改变属性。或者改变属性。 light可用的方法有：可用的方法有： MoveLight 移动光源移动光源 Changcolor 改变光的颜色改变光的颜色 AddAmbient 加入包围的光源加入包围的光源 AddPoint加入点光源加入点光源

34、 Clear 清除所有的光源清除所有的光源 AddCone 加入锥形光源加入锥形光源 Changstrength 改变光源的强度改变光源的强度 1 1、CSSCSS的滤镜属性的滤镜属性 （filterfilter） 的应用的应用 （11） 把一个彩色的图象变成把一个彩色的图象变成灰色调图象灰色调图象 作用作用：该滤镜能够使一张彩色的图片转变为灰色调图象，一般适：该滤镜能够使一张彩色的图片转变为灰色调图象，一般适 用于图象对象。用于图象对象。 参数参数：该滤镜没有附带参数。：该滤镜没有附带参数。 （12） 让对象产生让对象产生照片底片的效果照片底片的效果 作用作用：该滤镜能够使图象产生照片底片的

35、效果，一般适用于图象：该滤镜能够使图象产生照片底片的效果，一般适用于图象 对象。对象。 参数参数：该滤镜没有参数。：该滤镜没有参数。 （13） 让对象让对象轮廓突出显示轮廓突出显示 作用作用：该滤镜能够让对象反映出它的轮廓并把这些轮廓加亮显示，：该滤镜能够让对象反映出它的轮廓并把这些轮廓加亮显示， 一般适用于图象对象。一般适用于图象对象。 参数参数：该滤镜没有参数。：该滤镜没有参数。 1 1、CSSCSS的滤镜属性的滤镜属性 （filterfilter） 的应用的应用 3、新的滤镜（要结合、新的滤镜（要结合Javascript脚本）脚本） (1)Blentrans :混合转换滤镜，提供淡入淡出

36、效果混合转换滤镜，提供淡入淡出效果 duration 参数：淡入或淡出的时间，以秒作单位参数：淡入或淡出的时间，以秒作单位 (2)RevealTrans :提供了更加多变的转换效果提供了更加多变的转换效果 duration：转换的秒数：转换的秒数 transition：转换的类型：转换的类型 1 1、CSSCSS的滤镜属性的滤镜属性 （filterfilter） 的应用的应用 blendTransblendTrans实例：实例： 5-24bldtrans.html5-24bldtrans.html 1、在网页中需要实现淡隐的对象，可插入、在网页中需要实现淡隐的对象，可插入div标签，标签， 并

37、在并在id栏中输入名字，如栏中输入名字，如div1： 2、在、在div1中编辑内容，输入文字、插入图片，如下图中编辑内容，输入文字、插入图片，如下图 虚线框内所示。虚线框内所示。 3、编辑、编辑id样式，样式名即位该层的样式，样式名即位该层的ID名称，本例中名称，本例中 即为即为div1。 4、进入代码视图，在头部插入脚本、进入代码视图，在头部插入脚本 /若当前对象没有隐藏若当前对象没有隐藏 /应用第一个滤镜应用第一个滤镜 /将对象没有隐藏将对象没有隐藏 /播放第一个滤镜播放第一个滤镜 选中选中“ 单击单击” 编辑超链接内容为：编辑超链接内容为： javascript:fadein(div1)

38、 5、而后预览！、而后预览！ 若无效果，可将若无效果，可将div1的样式中添加定位方式为的样式中添加定位方式为绝对绝对 即可即可 若要实现淡出，只要再加一个函数：若要实现淡出，只要再加一个函数：fadeout(obj)即即 可可 而后在设计视图中添加文而后在设计视图中添加文 字，并将该文字的超链接字，并将该文字的超链接 设置成设置成 javascript:fadeout(div1) revealTransrevealTrans：5-25 rvlTrans.html5-25 rvlTrans.html myText=new Array(4); myText0=学习网页制作！学习网页制作！ myT

39、ext1=使用使用DreamWeaver！ myText2=制作自己的特色小站！制作自己的特色小站！ myText3=http:/! var i=-1; function trans() if (i=3)i=0; elsei+; div1.filters0.Apply(); div1.innerText=myTexti; div1.filters0.Play(); my=setTimeout(trans(),4000); revealTransrevealTrans： 5-26 rvlTrans_2.html 5-26 rvlTrans_2.html 2 2、应用滤镜制作常见特效、应用滤镜制作

40、常见特效 （1）文字特效）文字特效 （2）用样式表改变鼠标的显示形状）用样式表改变鼠标的显示形状 （3）图像特效）图像特效略略 2 2、应用滤镜制作常见特效汇总、应用滤镜制作常见特效汇总 （1）文字特效）文字特效 用用glow滤镜可以做空心字滤镜可以做空心字，方法是将，方法是将字体颜色设置为背字体颜色设置为背 景色景色，再将，再将glow滤镜的滤镜的strength的值设置为的值设置为1或或2即可。即可。 这个效果的代码如下：这个效果的代码如下： p filter: glow(color=#8C96B5,strength=2) shadow(color=#B4BBCF,direction=13

41、5) 2 2、应用滤镜制作常见特效汇总、应用滤镜制作常见特效汇总 利用利用Chroma()滤镜做图案文字滤镜做图案文字 例如：例如： dreamweaver 2 2、应用滤镜制作常见特效、应用滤镜制作常见特效 （2）用样式表改变鼠标的显示形状）用样式表改变鼠标的显示形状 用用cursor样式，取值如下：样式，取值如下： hand手的形状手的形状 crosshair十字型十字型 text移动到文本上的那种效果移动到文本上的那种效果 wait等待的那种效果等待的那种效果 default默认效果默认效果 help问号问号 e-size向右的箭头向右的箭头 ne-resize向右上的箭头向右上的箭头

42、n-resize向上的箭头向上的箭头 nw-resize向左上的箭头向左上的箭头 w-resize向左的箭头向左的箭头 sw-resize左下的箭头左下的箭头 s-resize向下的箭头向下的箭头 se-resize向右下的箭头向右下的箭头 auto由系统自动给出效果由系统自动给出效果 例如：例如： aa 2 2、应用滤镜制作常见特效汇总、应用滤镜制作常见特效汇总 阴文阴文 阳文阳文 CSSCSS与网页结合应用与网页结合应用1 1、背景的应用、背景的应用 background复合属性复合属性 和和font一样，可以使用复合属性一次性设置与背景一样，可以使用复合属性一次性设置与背景 相关的所有属

43、性值相关的所有属性值 background的属性列表的顺序依次为：的属性列表的顺序依次为： 颜色、图像、重复、依附、位置颜色、图像、重复、依附、位置 中间用空格分开，如果某个属性值为空，则用默认中间用空格分开，如果某个属性值为空，则用默认 值代替值代替 .style1 background: lightgrey url(boy1.gif) repeat-y fixed 10% 20% CSSCSS与网页结合应用与网页结合应用背景的应用背景的应用 在页面上添加纯装饰性的图像，同时又希望将图像从在页面上添加纯装饰性的图像，同时又希望将图像从 内容重分离出来内容重分离出来 创建一个内容为空的创建一个

44、内容为空的div，并将该图像设置为其背景，并将该图像设置为其背景 图图 创建圆角框创建圆角框 简单的圆角框：简单的圆角框：simple-fixed-rounded.htm 高度可变的圆角框：高度可变的圆角框：advanced-fixed- rounded.htm 高度宽度都可变的圆角框：高度宽度都可变的圆角框：advanced-flexible- rounded.htm 创建阴影效果创建阴影效果 简单的阴影：简单的阴影：easy-drop-shadow.htm 使用负值的空白边偏移技术使用负值的空白边偏移技术 带边框：带边框：easy-drop-shadow2.htm #branding wi

45、dth:700px; height:200px; background: url(branding.gif) no-repeat; .img-wrapper img margin:-5px 5px 5px -5px; CSSCSS与网页结合应用与网页结合应用 2 2、CSSCSS中的布局中的布局 要掌握的三个最重要的要掌握的三个最重要的CSS概念是：概念是： 框模型框模型（box model，或盒模型），或盒模型） 定位定位（position） 浮动浮动（float） 这些概念可以控制在页面上安排和显示元素的方式，这些概念可以控制在页面上安排和显示元素的方式， 形成形成CSS的基本布局的基本布

46、局 与传统的表格控制布局不同与传统的表格控制布局不同 只有掌握这些概念，只有掌握这些概念，CSS开发就会变得容易开发就会变得容易 这一部份就介绍布局的可视化模型及相关的属性这一部份就介绍布局的可视化模型及相关的属性 CSSCSS的布局的布局 Box Model 是是CSS的基石之一的基石之一 页面上的每个元素被看作是一个矩形框，这个框由页面上的每个元素被看作是一个矩形框，这个框由 元素的内容、填充、边框和空白边元素的内容、填充、边框和空白边(margin)组成组成 填充出现在内容区域的周填充出现在内容区域的周 围，如果元素上添加背景，围，如果元素上添加背景， 那么背景会应用于由内容那么背景会应

47、用于由内容 和填充组成的区域和填充组成的区域 添加边框会在填充区域添加边框会在填充区域 外加一条边线，线条可外加一条边线，线条可 以有多种样式以有多种样式 空白边是透明的，空白边是透明的， 用来控制元素之间用来控制元素之间 的间隔的间隔 Box ModelBox Model中的属性中的属性 5-19 boxmoldel.html5-19 boxmoldel.html 填充、边框和空白边都可以设置，默认值均为填充、边框和空白边都可以设置，默认值均为0 注意：注意： 在在CSS的的BOX模型中，模型中，width和和height指的是内容区域的指的是内容区域的 宽度和高度宽度和高度 而而IE5和和

48、IE6在怪异模式中采用自己的非标准的在怪异模式中采用自己的非标准的Box模型，模型， width是内容、填充和边框宽度的总和，是内容、填充和边框宽度的总和，height也是如此也是如此 MARGIN-空白边宽度设置空白边宽度设置 包括下列属性包括下列属性 MARGIN-LEFT MARGIN-RIGHT MARGIN-TOP MARGIN-BOTTOM 也可以使用复合属性：也可以使用复合属性：margin，按上右下左的顺序按上右下左的顺序 margin : auto | length 可以使用可以使用长度值或百分数，也可以是长度值或百分数，也可以是auto(由浏览器自动由浏览器自动 调整调整)

49、 #style1 margin-top:100px #style2 margin-left:100px #style3 margin-right:20% #style4 margin-bottom:100pt Box ModelBox Model Ex: container.htm 空白边叠加空白边叠加 当两个当两个垂直垂直的空白边相遇时，它们将形成一个空白边，的空白边相遇时，它们将形成一个空白边， 其高度为两个空白边的最大值其高度为两个空白边的最大值 当一个元素包含在另一元素中时，它们的顶当一个元素包含在另一元素中时，它们的顶/底空白边底空白边 也会发生叠加也会发生叠加 内容为空的元素内容为

50、空的元素(也没有边框和填充也没有边框和填充)，这时它的上下空，这时它的上下空 白边就碰到一起，也要发生叠加白边就碰到一起，也要发生叠加 PADDING设置填充的宽度设置填充的宽度 使用方法与使用方法与margin一样一样 #style1 padding-top:100px #style2 padding-left:100px #style3 padding-right:10% #style4 padding-bottom:100pt #style5 padding:100pt Box ModelBox Model WIDTH宽度宽度 可以使用可以使用长度值或百分数，也可以是长度值或百分数，也可

51、以是 auto(由浏览器自动调整或保持该元素的由浏览器自动调整或保持该元素的 原有大小，如图像原有大小，如图像) #style1 width:100px HEIGHT高度高度 设置方法与设置方法与width一样一样 #style1 height:100px Box ModelBox Model BORDER对于边界的设置，包括宽度、颜色、线条对于边界的设置，包括宽度、颜色、线条 样式三种，使用方法相同：样式三种，使用方法相同： border-color : 颜色值列表颜色值列表 设置各个边框的颜色，设置顺序和设置各个边框的颜色，设置顺序和 margin一样一样 也可以分别用四个属性：也可以分别

52、用四个属性： border-top-color， border-bottom-color， border-right-color， border-left-color border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 设置各个边框的线条样式设置各个边框的线条样式 也可以分别用四个属性：也可以分别用四个属性：border-top-style， border-bottom-style， border-left-style， border-right-st

53、yle #style1 border-color: blue green #1f1f1f blue; #style2 border-color: blue; #style3 border-top-color :blue; #style4 border-style : dotted; Box ModelBox Model border-width : medium | thin | thick | length 设置各个边框的宽度设置各个边框的宽度 也可以分别用四个属性：也可以分别用四个属性： border-top-width， border-right-width，border-bottom-

54、width， border-left-width 也可以使用也可以使用border-top，border-right，border-bottom，border- left四个属性一次性地设置各个边的宽度、样式和颜色四个属性一次性地设置各个边的宽度、样式和颜色 这四个属性使用方法相同，如：这四个属性使用方法相同，如： border-top : border-top-width border-top-style border-top-color 或使用一个复合属性设置所有属性值：或使用一个复合属性设置所有属性值： border : border-width border-style border-

55、color #style1 border-bottom: 25px solid red; border-left: 25px solid yellow; #style2 border-width: 1px thin 5px thick; #style1 border-top-width :20px; p border: thick double yellow; 定位与显示定位与显示 CSS的定位与显示属性可以把一个的定位与显示属性可以把一个HTML元素定位在网页中的任元素定位在网页中的任 何位置何位置 定位与布局密切相关定位与布局密切相关 CSS中有三种基本的定位机制中有三种基本的定位机制 普

56、通流：显示的位置由元素在普通流：显示的位置由元素在HTML文件中的位置决定文件中的位置决定 浮动：可以左右移动，直到碰到包含框或其它浮动框浮动：可以左右移动，直到碰到包含框或其它浮动框 绝对定位：可以直接将元素定位在页面上地任何位置绝对定位：可以直接将元素定位在页面上地任何位置 层叠顺序层叠顺序 进行进行CSS定位时，有可能发生多个元素的重叠定位时，有可能发生多个元素的重叠 需要设置元素在需要设置元素在Z轴上的层叠顺序轴上的层叠顺序 与定位相关的属性主要有与定位相关的属性主要有14个个 可参考：可参考：/TR/CSS21/visuren.html 普通流定位机制

57、普通流定位机制 5-28 relative.thml5-28 relative.thml 按照元素的类型和在按照元素的类型和在HTML源文件中的出现顺序进行定位源文件中的出现顺序进行定位 就是就是block元素（如元素（如p、h、div）（块级框）从上到下一个接一个的排列）（块级框）从上到下一个接一个的排列 inline元素（如元素（如span、strong元素）在行中水平布置元素）在行中水平布置 除非特殊的指定，否则所有的框都在普通流中定位除非特殊的指定，否则所有的框都在普通流中定位 相对定位相对定位 相对于元素在普通文本流中的初始位置相对于元素在普通文本流中的初始位置 如果一个元素进行相对

58、定位，它将以它所在的位置如果一个元素进行相对定位，它将以它所在的位置(即即它在普通流中的位置)为为 初始点，然后，可以通过设置垂直或水平位置，让这个元素初始点，然后，可以通过设置垂直或水平位置，让这个元素“相对于相对于”它的初始它的初始 点进行移动点进行移动 使用相对定位时，元素仍然占据使用相对定位时，元素仍然占据 原来的空间，因此被看作普通流原来的空间，因此被看作普通流 定位模型的一个特殊情况定位模型的一个特殊情况 另外，移动元素可能导致覆盖其另外，移动元素可能导致覆盖其 它元素它元素 #style1 position: relative;left:20px;top:20px Ex: rel

59、ative.htm 绝对定位绝对定位 5-29 absolute.html5-29 absolute.html 可以把某个元素精确的定位在某个地方可以把某个元素精确的定位在某个地方 绝对定位使元素的位置与文档流无关，因此不占据普通流中绝对定位使元素的位置与文档流无关，因此不占据普通流中 的空间，普通文档流中其他元素的布局就像绝对定位的元素的空间，普通文档流中其他元素的布局就像绝对定位的元素 不存在时一样不存在时一样 绝对定位的元素的位置是相对于最近的父元素绝对定位的元素的位置是相对于最近的父元素而言的而言的 固定定位固定定位 是绝对定位的一个特殊情况是绝对定位的一个特殊情况 与绝对定位相似，唯

60、一不同的是绝对定位是相对与绝对定位相似，唯一不同的是绝对定位是相对 于父元素的某一个位置，而固定定位则是固定在于父元素的某一个位置，而固定定位则是固定在 浏览器的视框位置浏览器的视框位置 这样当窗口滚动时，固定定位的元素不会随之滚这样当窗口滚动时，固定定位的元素不会随之滚 动，总是出现在屏幕的固定位置动，总是出现在屏幕的固定位置 #style1 position:absolute;left:20px;top:20px #style1 position:fixed; left:20px; top:20px Ex: absolutePos.htm 浮动 5-30float.htm 浮动框可以左右移