《经典CSS教程》PPT课件.ppt

资源描述

《《经典CSS教程》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《经典CSS教程》PPT课件.ppt（110页珍藏版）》请在三一办公上搜索。

1、第3章 CSS技术,HTML标记的不足之处代码繁琐格式的一致性差可维护性差网页现实效果缺乏动态性与交互性,层叠样式表CSS（Cascading Style Sheet）,一.CSS的基础知识,CSS是为了简化Web页面的更新工作而诞生的，它的功能非常强大，它将让网页变得更加美观，维护更加方便。CSS跟HTML一样，也是一种标记语言，甚至很多属性都来源于HTML，它也需要通过浏览器解释执行。任何懂得HTML的人都可以掌握，非常容易。CSS（Cascading Style Sheet，层叠样式表）技术是一种格式化网页的标准方式，它是HTML功能的扩展，使网页设计者能够以更有效的方式设计出更

2、具表现力的网页效果。,1.样式表和HTML的关系,样式表(StyleSheets)技术诞生于1996年，全称是层叠样式表(Cascading StyleSheets，简称CSS)。那什么是样式呢？样式其实就是格式，对网页来说，像文字的大小、颜色以及图片位置等，都是网页显示信息的样式。那层叠又是什么意思？意思是当我们在HTML文件中引用数个定义样式文件（CSS文件）时，若数个样式文件间所定义的样式发生冲突，将依据层次处理。样式表是HTML的表兄弟。样式表的产生是由于最初的HTML标准还不尽人意，用HTML制作网页就像是用画笔绘制一幅图画，只有那些对网页制作痴迷而执着的人才可能精确地实现预定的结果

3、。正是在这种情况下，样式表技术诞生了，样式表的目的是为了“对布局、字体、背景和其他图文效果实现更加精确的控制”。,HTML 4.0版本已经包括了样式表的内容。样式表正在逐渐改变设计、制作网页的方法，为网页创新奠定了基础。样式表的宗旨就是将结构和格式分离。样式表将定义结构和定义格式的两部分相互分离，从而使网页设计人员能够对网页的布局施加更多的控制。HTML仍可以保持简单明了的初衷，而样式表代码独立出来后则从另一角度控制网页外观。利用样式表，可以将站点上所有的网页都指向某个CSS文件，用户只需要修改CSS文件中的某一行，那么整个站点都会随之发生改变。这样，通过样式表就可以将许多网页的风格格式同时更

4、新，不用再一页一页地更新了。,样式表的基本结构是怎样的？下面通过一个简单的样式表实例，让你获得对样式表整体性的感性认识。首先建立一个简单的HTML文件。,2.样式表的基本结构,简单的样式表样式表这是一个简单的样式表,现在，给这个HTML文件加一些样式表。只需在标签之前插入以下代码：这样就已经制作出了使用样式表的网页。从浏览器中打开网页（当然首先要保证浏览器支持样式表），网页显示效果如下图所示。,简单样式表效果,由这个简单的样式表实例，可以看出：一个样式表由许多样式规则组成的，用以告诉浏览器怎样去显示一个网页文档。样式表的核心是规则，样式表的规则如下：选择符属性1:值1;属性2:值2 如，h1c

5、olor:green 这个规则就是告诉浏览器所有标签和之间的文字以绿色显示。其中h1就是选择符，它是一个附带样式功能的HTML标签。花括号中所包含的就是属性，它用于定义实际的样式，每个属性包括两部分：属性名（如color）和属性值（如green）。,我们可以使用四种方法将样式表加入到网页中，每种方法都有其不同的优点：(1)将样式表加入到HTML文件行中(2)将样式表嵌入到HTML文件的文档头中(3)将一个外部样式表链接到HTML文件上(4)将一个外部样式表输入到HTML文件中以上四种方法，可分成内部样式表（前两者）及外部样式表（后两者）两类。,3.如何在网页中加入css,(1)在行内直接加入

6、样式,可以直接在HTML代码行中加入样式规则，这种方法适用于指定网页内的某一小段文字的显示风格。不过，利用这种方法定义样式时，效果只可以控制该标签，其语法如下：,(2)把样式表嵌入到文档头,在标签中，用设置style属性的方法，一次只能控制一个标签的样式，实在让人看不出CSS对网页设计有什么特别的效果。在这一节，我们将讲述在文档头嵌入样式表规则的方法，浏览器在整个HTML网页中都执行该规则。如果想对网页一次性加入样式表，就可采用该方法。这种方法就是将所有的样式表信息都列于HTML文档的头部，基本语法如：,.,说明：标签是用来说明所要定义的样式。type属性是指定标签以CSS的语法定义。样式表基

7、本格式中的type=text/css用于说明这是一段CSS规则代码。为了防止不支持CSS的浏览器将标签间的CSS规则当成普通字符串，而显示在网页上，应将CSS的规则代码插入标签之间。选择符1.选择符n：选择符就是样式的名称，在这里选择符可以使用HTML标签的名称，所有HTML标签都可以作为CSS选择符。样式属性：定义样式的属性名称,前面，我们介绍了在文档头嵌入样式表规则的方法。这种方式定义出的样式，将只限于在该HTML文件中，效益并不大。如果想要达到集中管理网站网页样式的目标时，就必须将样式定义在独立的CSS文件中，并将该文件链接或输入到要运用样式的HTML文件。这种方法就是将多个HTML文件

8、都链接到一个样式表文件。这个外部的样式表将设定所有网页的规则。如果改变样式表文件中的某一个细节，所有网页都会随之改变。如果维护的站点很大，则这种方式绝对会有其用武之地。它的使用方法是：创建一个普通的网页，但不使用规则，而是在HTML文档头部使用标签。,(3)链接到样式表,基本语法如下：.,说明：*.css为预先编写好的样式表文件。外部样式表文件中不能含有任何像或这样的HTML标签。样式表仅仅由样式表规则或声明组成。在href属性中可以使用绝对URL或者相对URL。外部样式表文件中，无须使用注释标签。如同发布HTML文件那样，将这个CSS文件发布到服务器中。在网页被打开时，浏览器将依照链接标签将

9、含有链接外部样式表文件的HTML网页按照样式表规则显示。,17,单一的样式可以通过多个样式表给出，例如：在这个例子中，3个样式表组合成一个contemporary样式，要将多个样式表组合成一个单一样式，必须在每个样式表中使用相同的title。当样式被应用到很多的网页时，采用链接到外部样式表的方式是理想的。网页制作者使用外部样式表可以仅仅通过改变一个文件而改变整个网站的外观；同样，大多数浏览器会保存外部样式表文件到缓冲区，从而提高了显示网页时的速度。,18,输入样式表的方法同链接到外部样式表文件类似。其语法如下：说明：import语句后的“；”号是必须的。要输入的样式表文件的扩展名为.css。,

10、(4)输入样式表,19,我们介绍了四种样式表的使用方法，这四种方法在使用上各有其特色，但当这四种方法同时出现时，浏览器会以哪种方法为优先使用呢？答案是在行内直接加入样式顺序为最高。至于其他三种的顺序则是一样的，如果其他三种方法同时出现，且各方法定义的样式又都不同时，浏览会选择较后定义的样式来显示。,20,(1)class类选择符class类选择符用于指定标签属于何种样式类。class类选择符的使用语法如下:,4.class与id类选择符,class、id类选择符能给网页制作者带来极大的便利。,21,或者,22,下面是语法各部分的说明：*.a1.*.an：为定义的类选择符名称，通常在定义样式时指

11、定给样式的名称。其适用范围是整个HTML文件中所有由class类选择符所引用的设置。*符号也可以用HTML内的标签替代（即标签1.标签n），此外*符号，在设置可以省略。标签1.a1.标签n.an：为HTML的标签名称，即前面提过的*符号，也可以用HTML内的标签替代。不同点在于，若在定义class类选择符前加上HTML的标签时，其适用范围将只限于该标签所包含的内容。,23,例如，在样式表中可以定义这样的类，代码如下：.ppcolor:lime;font-family:黑体p.ptcolor:blue;font-family:仿宋这些类可以使用class属性在HTML中引用：这是我们定义的PP

12、类这是我们定义的PT类在这个例子中，pp类可以用于任何HTML标签，因为它在样式表中没有与特定的HTML标签关联。而这个例子中pt类只能用于标签。对于HTML文档中在结构上相同的部分，类是应用样式的有效办法。,24,(2).id类选择符 id类选择符与class两者最大的差别在于定义样式名称前的符号,用class定义时为“*.样式名称”；若用id定义时为“#样式名称”。id与class虽然在标签内的定义写法不太一样，但基本上其显示在网页上的效果是一样的。id类选择符的使用语法如下:,25,或者下面是语法各部分的说明：(1)#a1.#an：为定义的类选择符名称，通常在定义样式时指定给样式的名

13、称。其适用范围是整个HTML文件中所有由class类选择符所引用的设置。(2)标签1.a1.标签n.an：为HTML的标签名称，不同点在于，若在id选择符前加上HTML的标签时，其适用范围将只限于该标签所包含的内容。,26,5.Div标签和Span标签,标签可用来定义网页上的一个特定区域，在该区域范围内可包含文字、图形、表格、窗体，甚至其他div等。在标签内的所有内容，都将调用此标签所定义出的样式，且区域与区域间彼此是独立的。当编写HTML文件，要定义区域间使用不同样式时，就可以使用标签达到这个效果。标签应用于HTML文件，其语法如下：.或者.在使用标记时，可以使用width与height属性

14、设置区域的大小。,27,span标签,标签主要用来定义网页上的区域，通常用于比较大范围的设置，而标签也可以用在区段的定义，不过一般都是用在网页中某一小段文件段落。其语法如下：.或者.span标签被加入到HTML中的主要目的是用于样式表，所以当样式表失效时它就没有任何作用。span标签可以使用clsss和id类选择符。与的差异：在区域内的对象与区域外的上下文会自动换行；而区域内的对象与区域外的上下文不会自动换行。与标签可同时使用，但建议标签可包含，但最好不要包含标签，否则会造成标签的区域不完整，而形成断行的现象。,28,6.CSS的几个特性,1可以归类CSS的规则可以多个HTML标签采用同一样式

15、，例：h1,pfont-family:黑体这项规则设定所有被和标签包含的网页内容将用黑体显示。2样式表的规则具有继承性样式表的规则可从母体延续到子体，例：bcolor:blue 这项规则告诉浏览器将所有之内的文字用蓝色显示。但是在下列情况下，浏览器该如何处理呢？这是一个样式表实例对于标签并没有设定样式，但因为位于之中，所以它将继承母体设定的样式，也以蓝色显示。,29,3情景选择如果想让所有斜体显示的文字（即被和标识的文字）都以红色显示，但条件是只有当这些斜体显示的文字出现在通常的段落文字（即被标识的文字）内时。这就需要使用“情景选择”来实现。通过“情景选择”可设定一个可以执行选择说明的

16、情景。带情景选择的样式表的格式如下：情景标签标识符属性:属性值其中的HTML代码：这是一个样式表实例这是一个样式表实例表示只将所有之内斜体显示的文字以红色且大字体显示。所以，之外斜体显示的文字不会以红色显示，而之内的文字则以指定字体显示。,二.CSS的属性,1 设置字体样式 2 控制图文布局 3 颜色及背景 4 美化网页与超链接的设置 5 CSS定位,1.设置字体样式,(1)字体属性font-family,在网页编写的过程中，若没有对字体做任何设置时，浏览器将以默认值的方式显示。除了可利用HTML的标签设置字体外，还可以利用CSS的font-family属性，设置要使用的字体。语法：f

17、ont-family:,.,说明：浏览器将在字体列表中寻找字体1，如果访问者的计算机中安装了这种字体，就使用它；如果没有安装，则移向字体2，如果这种字体也没有安装，则移向第3种字体，以此类推。若浏览器完全找不到指定的字体时，则使用默认字体。因此，应该将一种常见的字体列在字体列表的最后。在对英文字体进行设置时，如果两个英文单词之间有空格时必须使用单引号（）或双引号（）。,在HTML里,可以使用标签,将网页文字设置为斜体。而在CSS里，则可利用font-style属性，达到字体风格的变化。语法：font-style:normal|italic|obliquefont-style参数值说明,(2)字

18、体风格font-style,(3)字体变形font-variant,语法：font-variant:normal|small-caps font-variant参数值说明,(4)字体加粗font-weight,在HTML里，可以利用标签，将文字设置为粗体。在CSS内，则可利用font-weight属性，设置字体的粗细。语法：font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|70|800|900 font-weight参数值说明,利用HTML的标签只能设定7种字号，而在CSS中可以使用font-size属性对文字的字号进

19、行随心所欲的设置。语法：font-size:|说明：绝对尺寸可以使用的单位有：ex（x-height）、in（英寸）、cm（厘米）、mm（毫米）、pt（点）和px（像素）。,(5)字号的控制font-size,37,如果不喜欢使用绝对尺寸，还可以用关键字来说明文字大小，共有7种关键字，相对应于HTML标签中所用的数字参数。这7种关键字如下：xx-small x-small small medium large x-large xx-large 利用这些参数，浏览器可以自由决定每一种关键字所适合的尺寸（在不同浏览器中它的大小是有区别的）。,38,相对尺寸相对尺寸只有两种larger和small

20、er。smaller参数告诉浏览器将当前文字在关键字规格基础上“缩小一级”。而larger参数的作用与smaller类似。比例尺寸还可以使用比例参数来设定文字大小，例如：pfont-size:15pt bfont-size:300%这些规则的含义为：使所有包含在中的被标识的文字的尺寸为尺寸设定值的3倍，即45pt。比例参数常用于从母体对象继承参数值。,39,注意：1在CSS中设置文字尺寸的单位很多，但有些浏览器对有些尺寸单位是不支持的，在使用时一定要注意。2px单位所有的操作平台都支持它，但因为访问者的屏幕分辨率的不同，网页的显示将可能不稳定，字体可能大也可能小。3pt是确定文字尺寸最好的单

22、(7)文字修饰text-decoration,42,其中none参数也非常有用，它可以使链接的文字不以下划线的形式显示。如，取消超级链接时带下划线的形式。A:linktext-decoration:none A:activetext-decoration:none A:visitedtext-decoration:none,43,font属性，可以同时设置许多跟文字有关的属性。例如：字体、字体效果、字号、字体粗细等。语法：font:font-family|font-style|font-variant|font-weight|font-size 说明：字体属性主要用作不同字体属性的略写。可以同

23、时设置多种属性。属性与属性之间必须利用（;）分号隔开。实例：pfont:italic bold 12pt/14pt 隶书,宋体指定该段为bold（粗体）和italic（斜体）隶书或宋体，12点大小，行高为14点。,(8)字体属性font,44,2.控制图文布局,样式表中对图文和布局的控制是指字符、单词和行与行之间是如何定位的，包括如何设定字与字之间、字母之间的距离，以及行距（垂直间距）、文字的对齐方式、边距、边框及浮动对象等。,45,(1)设置字间距及字母间距,语法：word-spacing:normal|长度单位 letter-spacing:normal|长度单位说明：Word-spac

24、ing用于设置英文单词之间的距离；letter-spacing用于设置英文字母之间的距离。两者可以使用前面讲到的任何一种长度单位。如果使用normal参数，将按照浏览器默认设置显示。,46,(2)设置行距line-height,语法：line-height:normal|数字|长度单位|比例说明：所用的参数是相邻两行的基准线（基准线就是英文小写字母如x，a的下阶线，但不包括诸如y，g等字母超过下阶线的部分）之间的垂直距离。所设定的参数取值将完全代替浏览器的默认值。,47,实例：1)用数字设定行距 bfont-size=12pt;line-height:2 表示将利用字号来确定行距，将字号乘以设

26、等。text-align参数值说明,50,vertical-align属性用于控制文字或其他网页对象相对于母体对象的垂直位置。vertical-align参数值说明,51,(4)首行缩进属性text-indent,首行缩进属性通常被用来指定于一个文字段落，第一行文字缩进的距离，而浏览器的默认值不缩进。语法：text-indent:数字|百分比说明：在IE浏览器中使用比例参数时，是相对于整个浏览器窗口的宽度，而不是相对于段落的宽度。,3.颜色及背景,53,(1)颜色属性color,语法：color：实例：h1color:blue h2color:#000080,54,在CSS里，可利用back

27、groud-color属性，达到背景颜色的变化。语法：background-color：|transparent（透明）说明：初始值为transparent（透明）。实例：bodybackground-color:white h1background-color:#000080,(2)背景颜色属性,55,(3)背景图像属性,在CSS里，可利用background-image属性，将网页背景以图片的方式显示。语法：background-image：|none（无）,56,(4)背景图片重复属性,背景图片重复属性决定一个指定的背景图片如何被重复。语法：background-repeat：repea

28、t|repeat-x|repeat-y|no-repeat,57,background-repeat属性参数值说明,58,(5)固定背景图片属性,固定背景图片属性决定指定的背景图片是跟随内容滚动，还是保持固定。语法：background-attachment：scroll|fixed 说明：scroll表示滚动，fixed表示固定。初始值为scroll。,59,(6)背景图片的位置属性,通过背景图片的位置属性background-position可以改变背景图片的最初位置。语法：background-position：|,60,说明：以百分比方法设置background-position属性的

29、语法如下：background-position：x%y%其中x%代表设置图片的水平位置；y%代表图片的垂直位置。初始值为0%0%。实例：Pbackground-position:70%50%;repeat-y;url(.picsky.jpg)表示背景图片的水平位置为70%，垂直位置为50%。,61,以长度单位设置background-position属性的语法如下：background-position：x y 使用长度单位可以对背景图片的位置作出更精确的控制，可以设定水平和垂直定位起点。实例：background-position:70px 10px;url(.picsky.jpg)表示从

31、：未定义说明：背景属性是一个更明确的背景关系属性的略写。以下是一些背景的声明：bodybackground:white url(tree.jpg)h1background:#7fffd4 pbackground:url(tree.jpg)#f0f8ff fixed tablebackground:#0c0 url(tree.jpg)no-repeat bottom right,4.美化网页与超链接的设置,66,(1)网页链接属性anchor,在CSS里，可以通过网页链接属性anchor来设置网页链接文字的效果。,网页链接属性anchor语法说明,67,(2)设置滚动条属性scrollbar,

32、在CSS里，可以通过滚动条属性scrollbar来美化滚动条。美化滚动条的参数见下表所示，并搭配下图说明。,流动条,68,滚动条scrollbar的参数说明,69,(3)光标属性的设置cursor,在CSS中，可以通过光标属性cursor来设置光标的图形，cursor属性共提供了16种属性值，如下表所示。,70,71,(4)边框的设置,在CSS中，可以通过margin属性、border属性和padding属性控制段落、图片和表格等对象的样式。如：边框的宽度、颜色、样式以及对象与边框之间的空白距离。上述三种属性通常用于文件段落、图片、表格与网页边界的空白距离，或者是设置表格内的边框及空白样式等，

33、如下图所示。,72,边框属性说明,73,其中：margin属性：控制对象边界与文件其他内容的空白距离。border属性：控制表格四边边框的宽度、颜色及样式。padding属性：控制表格中的内容或图片与对象边界的空白距离。1)边界的设置margin 通过margin属性可以设定对象与四周文字之间的距离。其语法如下：margin-(top、right、bootom、left)：长度|百分比|auto说明：margin属性有margin-top（顶部空白区域）、margin-bottom（底部空白区域）、margin-left（左边空白区域）和margin-right（右边空白区域）四个边界属性。通

34、过设置这4项属性，可以控制一个对象四周空白区域的大小。可以使用任何长度单位。如将边距设为负值，就可以将两个对象重叠在一起。,74,利用margin属性设置边界值的方法有：设置一个边界值：若margin属性只设置一个边界值时，则上、右、下和左四个边界都将调用此值。实例：margin:2cm 设置对应边值：在margin属性中设置对应边值，是指上边界与下边界、左边界与右边界为相对应的边界，所以若设置对应边其中一边的值时，另一边将调用此值。实例：margin：2cm 4cm 上边界与下边界的值为2cm，左边界与右边界的值为4cm。设置四个边界值：利用margin属性，顺序输入上、右、下、左边界的值，

35、就可以完成四个边界的设置了。实例：margin:20pt 30%30px 2cm 上边界为20pt，右边界为30%，下边界为30px，左边界为2cm。,75,2)设置边框的宽度border-width 在CSS里，可以利用border-width属性来控制边框的宽度。语法1：border-width:thin|medium|thick|长度说明：border-width的参数值thin代表细、medium代表中等、thick代表粗。语法2：border-top-width:长度 border-bottom-width:长度 border-left-width:长度 border-right-

36、width:长度,76,使用border-width属性设置边框的宽度有4种设置方法：设置一个值：四条边框宽度均使用同一个设置值。设置两个值：上边框与下边框宽度调用第一个值，右边框与左边框宽度调用第二个值。设置三个值：上边框宽度调用第一个值，右边框与左边框宽度调用第二个值，下边框宽度调用第三个值。设置四个值：四条边框宽度的调用顺序，顺序为上、右、下、左。,77,3)设置边框的颜色border-color border-color属性用于设置边框的颜色，它的使用方法与border-width相同。语法1：border-color:#rrggbb border-color:#rrggbb#rrgg

37、bb#rrggbb#rrggbb 说明：其中第1种颜色为顶部边框颜色，其中第2种颜色为右边边框颜色，其中第3种颜色为底部边框颜色，其中第4种颜色为左边边框颜色。语法2：border-top-color:#rrggbb border-bottom-color:#rrggbb border-left-color:#rrggbb border-right-color:#rrggbb,78,4)设置边框的样式border-style border-style属性用于设置边框的样式。其语法设置如下：border-style:none|solid|double|dotted|dashed|groove|r

38、idge|in set|outset,79,border-style属性设置值,80,5)设置边框属性border 在CSS里，通过border属性可以快速设置边框的宽度、边框颜色及边框样式。其语法如下：border:|实例：border:1pt double#ff0000 设置边框的宽度为1pt、样式为双直线、颜色为红色。6)内边界的设置padding padding属性主要是控制元素的内容与元素外框内缘的距离。其语法如下：padding-（top、right、bottom、left）:长度|百分比说明：其用法与border-color相同。,5.CSS定位,82,(1)CSS定位属性,在

39、网页上，利用HTML基本标签进行文字和图像的定位是一件很困难的事情。即使使用表格标签，也不能保证定位的精确，因为浏览器和操作平台的不同会使显示的结果发生变化。而利用样式表的position属性，就可以精确地设定对象的位置，还能将各对象进行叠放处理。语法：position:;left:;top:;width:;height:;visibility:;z-index:,83,说明：1)position属性用于对象的定位，它的参数值有absolute和relative两种。其中absolute表示绝对定位，绝对定位能精确设定对象在网页中的独立位置，而不考虑网页中其他对象的定位设置，在绝对定位中对象的

40、位置是相对于浏览器窗口而言的。而relative表示相对定位。它所定位的对象的位置是相对于不使用定位设置时该对象在文档中所分配的位置。即，相对定位的关键在于被定位的对象的位置是相对于它通常应在的位置而言的。如果停止使用相对定位，则文字的显示位置将恢复正常。2)left属性用于设定对象距浏览器窗口左边的距离；top属性用于设定对象距离浏览器窗口顶部的距离。,84,3)width属性用于设定对象的宽度。因为定位后的对象在网页上显示时仍然会从左到右一直显示，利用宽度属性就可以设定对字符向右显示的限制。宽度属性只在绝对定位时使用。4)height属性用于设定对象的高度。高度和宽度的设置类似，只不过是在

41、垂直方向上进行的。5)visibility属性用于设定对象是否显示。这条属性对于被定位和未定位的对象都适用。该属性的参数有三种：isible:使对象可以被看见 hidden:使对象被隐藏 inherit：对象被继承母体对象的可视性设置 6)z-index属性用于在网页上重叠文字和图像。当定位多个对象并将其重叠时，可以使用z-index来设定哪一个对象应出现在最上层。z-index参数值使用整数，用于绝对定位或相对定位了的对象，也可以给图像设定属性。,85,divposition:absolute;left:200px;top:40px;width:150px 浏览器执行到这项规则时，它将文字块

42、按照规则规定的效果显示，将段落的最大水平尺寸限制在150像素。实例：h4visibility:hidden 控制用H4标识的对象不可见。当一个对象被隐藏后，它仍然1要占据浏览器窗口中的原有空间。所以，如果将文字包围在一幅被隐藏的图像周围，那么，其显示效果将是文字包围着一块空白区域。这条属性在编写脚本和增加网页的动态性方面很有用，比如可以使某段落或图像只在鼠标滑过时才显示。,86,(2)CSS定位方法,通过CSS的定位属性，可用来控制任何东西在网页上或是说在窗口中的位置。当我们使用css定位属性的时候，主要把它用在div标签。当把文字，图像或其他的对象放在div中，它可称作为“div block

43、”，或“div element”或“css-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以以后看到这些名词的时候，就知道它们是指一段在div中的HTML。使用div的方法跟使用其他标签的方法一样：this is a div tag,87,如果单独使用div而不加任何CSS定位属性，它在网页中的效果和使用是一样的。但当我们把css定位属性用到div中去后，就可以严格设定它的位置。首先我们需要给这个可以被css定位属性控制的div一个id或说是它的名字。比如说我们给下面这个div的名字是truck。给名字的目的是我们以后可以用JavaScript来控制它，比如说移动它或改变

44、它的一些性质等。this is a truck 给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第一个必须是字母有两种把CSS定位属性应用到div的方法。,88,1行间CSS 行间css是最常用的方法，它的基本语法为：this is a truck 实例：,89,2外部样式标记这种方法与行间CSS的最终结果是一样的，它的基本语法为：this is a truck,90,实例：.,三.CSS滤镜,1 滤镜简介 2 Alpha滤镜3 Blur 滤镜 4 Dropshadow滤镜5 Glow滤镜 6 Gray、Invert和Xray滤镜7 FlipH，FlipV滤镜 8 Wave滤镜9

45、Shadow滤镜 10 Mask滤镜11 Chroma滤镜 12 转换滤镜,1.滤镜简介,滤镜（Filter）是技术的一种应用，它可以用来改变图形的外观，以增加图形的视觉效果。滤镜分为视觉滤镜（Visual Filters）和转换滤镜（Transition Filters）两大类。视觉滤镜只可以达到静态的特效效果。只需在网页内使用CSS的定义语法，即可将此滤镜效果加到网页内。转换滤镜是用于两画面进行转换时所使用的特效，将产生动态效果，除了在网页中利用CSS的定义语法外，还必须配合Script语言（如：VBScript、JavaScript）以及事件的概念，才能自如地使用转换滤镜，产生炫丽的效果

46、。由于滤镜功能是在IE4.0版才开始提供的功能，所以只能在IE4.0以上的浏览器中使用，才能实现滤镜的效果。CSS的滤镜很多，下面我们就对常用的一些CSS滤镜作一些介绍。,2.Alpha滤镜,Alpha滤镜可以产生颜色透明及渐变的效果。Alpha滤镜的基本语法如下：style=filter:Alpha（opacity=value，style=value）“Alpha滤镜的参数设置如下表所示。,3.Blur 滤镜,Blur滤镜可以产生快速移动的动态模糊效果。Blur滤镜的基本语法如下：style=filter:Blur(add=value,direction=value,strength=val

47、ue)“Blur滤镜的参数设置如下表所示。,其中：参数direction用于设定动态模糊效果的方向，总单位为360，0代表垂直向上，并以每45为一个单位，而度数以方向定位时，将如下图所示。,Dropshadow滤镜用于设置对象产生阴影效果。Dropshadow滤镜的基本语法如下：style=filter:Dropshadow(color=#value,offx=value,offy=value,positive=value)“Dropshadow滤镜的参数设置如下表所示。,4.Dropshadow滤镜,Glow滤镜用于设置对象产生边缘光晕的模糊效果。Glow滤镜的基本语法如下：style=fi

48、lter:Glow(color=#value，strength=value)Glow滤镜的参数设置如下表所示。,5.Glow滤镜,6.Gray、Invert和Xray滤镜,Gray滤镜主要用于将对象中的颜色除去，以变成黑白的效果。Invert滤镜主要用于将颜色的饱和度以及亮度值完全反转，类似底片效果。Xray滤镜主要用于让对象显示轮廓加亮，有点类似X光片的效果。三个滤镜的基本语法如下：style=filter:Gray style=filter:Invert style=filter:Xray 这3个滤镜没有参数。,7.FlipH，FlipV滤镜,FlipH滤镜是设置对象产生水平翻转180，即

49、左右相反的效果；而FlipV滤镜是设置对象产生垂直翻转180，即上下颠倒的效果。这两个滤镜的基本语法如下：style=filter:FlipH style=filter:FlipV 这两个滤镜没有参数。,Wave滤镜主要用于设置对象产生垂直的波浪效果。Wave滤镜的基本语法如下：style=filter:Wave(add=value,freq=value,lightstrength=value,phase=value,strength=value)Wave滤镜的参数设置如下表所示。,8.Wave滤镜,104,Shadow除了具备DropShadow的阴影效果外，它还多了阴影渐变的特效。Shad

50、ow滤镜的基本语法如下：style=filter:Shadow(color=#color,direction=value)Shadow滤镜的参数设置如下表所示。,9.Shadow滤镜,105,Mask滤镜主要用于设置对象的屏蔽效果，就好象印章一样印出模型的模样。Mask滤镜的基本语法如下：style=filter:Mask(color=#color)“Mask滤镜的参数设置如表所示。,10.Mask滤镜,106,Chroma滤镜主要用于指定对象中的某个颜色，变为透明效果。Chroma滤镜的基本语法如下：style=filter:Chroma(color=#color)“Chroma滤镜的参数设

展开阅读全文