4.4.2制作网页动态特效.ppt

4.4制作网页动态特效,CSS样式表运用,学习目标,理解CSS样式表对网页布局的作用掌握CSS样式表的运用方法,样式表设计,样式表定义及引用相关的标记和属性样式的继承和作用顺序CSS属性CSS滤镜,一、样式表定义及引用,CSS，CascadingStyleSheets，层叠样式表，是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式，并增加了类、层等新概念，可以对文字重叠、定位等，提供了更为丰富多彩的样式；同时CSS可进行集中样式管理。,CSS还允许将样式定义单独存储于样式文件中，这样可以把显示的内容和显示样式定义分离，便于多个HTML文件共享样式定义。一个HTML文件也可以引用多个CSS样式文件中的样式定义。所谓层叠，实际上就是将显示样式独立于显示的内容，进行分类管理，例如分为字体样式、颜色样式等，需要使用样式的HTML文件进行套用即可。,1.样式表定义CSS样式表定义的基本语法为：选择符（Selector）规则（Rule）表选择符是指要引用样式的对象，它可以是一个或多个HTML标记（各个标记之间以逗号分开），如h1；也可以是类选择符（如.text）、ID选择符或上下文选择符。规则表是由一个或多个样式属性组成的样式规则，各个样式属性间由分号隔开，每个样式属性的定义格式为：样式名：值样式定义中可以加入注解，格式为：/*字符串*/【例】使用CSS控制文字显示特性,2.样式引用（1）链接到外部样式表将样式表定义为一个独立的CSS样式文件；使用该样式表的HTML文件在头部用标记链接到CSS样式文件。【例】在HTML文件头部使用多个标记就可以链接到多个外部样式表。标记内定义的前后加上注释符的作用是使不支持CSS的浏览器忽略样式表定义。,标记的属性,（2）引入外部样式表在HTML文件的头部的标记之间，利用CSS的import声明引入外部样式表。格式为：importURL(外部样式文件名);.,例如,引入方式：引入外部样式表的使用方式链接方式：链接到外部样式表的使用方式引入方式与链接方式的区别：引入方式在浏览器下载HTML文件时就将样式文件的全部内容拷贝到import关键字所在位置，以替换该关键字。链接方式在浏览器下载HTML文件时并不进行替换，而仅在HTML文件体部需引用CSS样式文件中的某个样式时，浏览器才链接样式文件，读取需要的内容。,（3）嵌入样式表利用标记将样式表嵌HTML文件的头部。嵌入样式表的作用范围是本HTML文件。【例】嵌入样式表,（4）内联样式内联样式:样式在标记内部使用样式方法:将标记的style属性值赋为所定义的样式规则例如：CSS示例！.使用内联样式时，样式定义的作用范围仅限于此标记范围之内。,内联样式应用于样式仅适用于单个页面元素的情况，因为样式和要展示的内容混在一起，会失去一些样式表的优点，使样式定义和内容不能分离，所以尽量少用。若要在一个HTML文件中使用内联样式，必须在该文件的头部对整个文档进行单独的样式表语言声明。即【例】四种方式的混合使用,二、相关的标记和属性,随CSS的出现增加的HTML标记和属性：类选择符class属性id选择符和id属性上下文选择符伪类span标记div标记,1.类选择符（ClassSelector）和class属性用类选择符和标记的class属性就可做到在页面中不使同一种标记都遵循同一种样式使不同的标记能够遵循相同的样式方法：在标记中定义类选择符，在体部标记中将标记的class属性值设置为类名。类选择符（ClassSelector）是在样式表中定义具有样式值的类.,格式1标记名.类名规则1;规则2;.示例p.backbackground-color:#666666;.本段文字的底色为#666666这是另一段，不遵循以上样式的设置.,格式2.类名规则1;规则2;.示例.textfont-family:宋体;font-size:14pt;color:red这行文字应是红色的。标题1也采用以上样式。,2.id选择符（IDSelector）和id属性id选择符用于定义一个元素的独有的样式，它与类选择符的区别在于id选择符在一个HTML文件中只能引用一次，而类选择符可以多次引用。id选择符的定义的格式为：#id名规则1;规则2;.要引用id选择符定义的样式，需在体部标记中设置id属性值，即将该id属性值设置为id名。,示例.#colorid1color:green;.ID选择符与ID属性结合使用可对特定标记进行样式控制.,3.上下文选择符（ContextualSelector）上下文选择符定义嵌套标记的样式例如：tdpcolor:darkred该定义指明HTML文件中出现嵌套标记.之处将引用该样式，即只有在单元格中的段落才使用该样式。,4.伪类伪类是特殊的类可区别标记的不同状态。伪类定义格式为：选择符:伪类属性:值伪类不用HTML的CLASS属性来指定。,例如:指定超链接（）以不同的方式显示连接(links)、已访问连接(visitedlinks)和可激活连接(activelinks),a:visitedcolor:#0000FF;text-decoration:nonea:linkfont-family:宋体;font-size:9pt;color:#FF00FF;text-decoration:nonea:hoverfont-family:宋体;font-size:12pt;color:#003333;background-color:#FFCC99;text-decoration:none,5.span标记span标记可以带有class、id、style等与CSS样式有关的属性。增加span标记的目的在不必将样式附加在一个HTML的原有标记（称为结构元素）上。span标记纯粹是为了应用样式，无其他作用。span标记是随CSS的产生而被新加入到HTML中的。格式：,6.div标记是一个块级元素。和之间可以包含段落、标题、表格等其他块级元素。将其中包含的内容形成一个独立段落。中有align、class、id和style等属性。与共同构成HTML中层的概念，二者区别在于是块级元素，而是行元素；可包含，反之则不行。,三、样式的继承和作用顺序,1.样式继承嵌在内层的标记采用外层标记的样式样式继承h2color:red;DIV标记的作用,样式继承的特殊形式相对值继承方式，即以百分比继承。例如：p.class1font-size:12pt;p.class2font-size:200%p.class3font-size:100%第一段第二段第三段,2.样式的作用顺序样式表的作用优先顺序遵循以下原则：内联样式中所定义的样式的优先级最高；其它的样式表按其在HTML文件中出现或被引用的顺序，越在后出现，优先级越高；选择符的作用优先顺序为：上下文选择符、类选择符、id选择符，优先级依次降低；未在任何文件中定义的样式，将遵循浏览器的缺省样式。,四、CSS属性,字体属性颜色及背景属性文本属性方框属性分类属性定位属性,1.字体属性字体（font-family）字号（font-size）字体风格（font-style）字体加粗（font-weight）字体变化（font-variant）字体综合设置（font）【例】字体属性的用法,2.颜色和背景属性属性名:color可取值:英文单词,#RRGGBB,#RGB含义:指定页面元素的前景色举例:h1color:redh2color:#008800h3color:#080,属性名:background-color可取值:英文单词,#RRGGBB,#RGB,transparent含义:指定页面元素的背景色举例:bodybackground-color:whiteh1background-color:#0000F0pbackground-color:transparent,属性名:background-image可取值:统一资源定位器URLs,none含义:指定页面元素的背景图象举例:bodybackground-image:url(bg.gif)pbackground-image:url(,属性名:background-repeat可取值:repeat,repeat-x,repeat-y,no-repeat含义:决定一个被指定的背景图象被重复的方式。缺省值为repeat举例:bodybackground-repeat:no-repeatpbackground-repeat:repeat-x,属性名:background-attachment可取值:scroll,fixed含义:指定背景图象是否跟随页面内容滚动。缺省值为sroll举例:bodybackground-attachment:fixed,属性名:background-position可取值:数值表示法,关键词表示法含义:指定背景图象的位置举例:bodybackground-position:30%70%pbackground-position:bottomleft,属性名:background可取值:背景颜色、背景图象、背景重复、背景位置。含义:背景属性综合设定举例:bodybackground:url(bg1.gif)greenrepeat-yfixedleft20pt【例】颜色和背景属性的用法,3.文本属性属性名:letter-spacing可取值:长度值|normal含义:设定字符之间的间距举例:h1letter-spacing:8pxpletter-spacing:14pt,属性名:text-decoration可取值:none|underline|overline|line-through|blink含义:设定文本的修饰效果，line-through是删除线，blink是闪烁效果。缺省值为none。举例:a:link,a:visited,a:activetext-decoration:none,属性名:text-align可取值:left|right|center|justify(两端对齐)含义:设置文本横向排列对齐方式举例:ptext-align:centerh1text-align:right,属性名:vertical-align可取值:baseline|super|sub|tomiddle|bottom|text-top|text-bottom|百分比设定元素在纵向上的对齐方式。含义:值的含义见下面的说明举例:img.midvertical-align:50%span.supvertical-align:superspan.subvertical-align:sub,属性名:text-indent可取值:长度值|百分比含义:设定块级元素第一行的缩进量举例:ptext-indent:30pth1text-indent:10%,属性名:line-height可取值:normal|长度值|数字|百分比含义:设定相邻两行的间距举例:pline-height:200%pline-height:30pt【例】文本属性的用法,4.方框属性方框属性用于设置元素的边界、边框等属性值，可用方框属性的元素大多是块元素，包括body、p、div、td、table、hx（x=1,2,.,7）等等。方框属性包括边界（margin）、边界补白（padding）、边框（border）等【例】方框属性的用法,5.列表属性属性名:list-style-type,【例】列表属性的用法,6.定位属性（1）top、left和position属性(二维定位属性)top属性用于设置元素与窗口上端的距离；left属性用于设置元素与窗口左端的距离；position属性用于设置元素位置的模式。top和left属性通常配合position属性使用。position有三种取值：absolute：绝对位置，原点在所属块元素的左上角；relative：相对位置，即该位置是相对HTML文件中本元素的前一个元素的位置；static：静态位置，按照HTML文件中各元素的先后顺序显示，static是缺省值。【例】二维定位属性的使用,（2）三维空间定位CSS允许在三维的空间中定位元素，与之相关的属性是z-index，z-index与top和left属性结合使用。z-index将页面中的元素分成多个层，形成多个层堆叠的效果，从而营造出三维空间效果。z-index的取值为整数，可以为正，也可为负，值越大表示在堆叠层中越处于高层，为0表示基准，为负表示位置在z-index=0的元素之下。【例】三维定位属性的使用,五、CSS滤镜,1、概述作用：构造对图像处理的特殊效果语法：filter：filtername(parameters)优点：实现简单缺点：当浏览器不支持时，,CSS属性,2、alpha属性作用：设置透明度语法格式：filter：alpha(opacity=opcity，finishopacity=finishopacity，style=style，startX=startX，startY=startY，finishX=finishX，finishY=finishY),参数含义Opacity:透明度等级，取0到100，0-完全透明，100-完全不透明。Style:指定了透明区域的形状特征，0-统一形状；1-线形；2-放射状；3-长方形Finishopacity(可选项)，设置结束时的透明度，从而达到一种渐变效果，取0到100。StartX和StartY：渐变透明效果的开始坐标finishX和finishY：渐变透明效果的结束坐标。【例】alpha属性,3、blur属性效果：模糊效果(类似在未干透的油画上迅速划过)语法：filter：blur（add=add，direction，strength=strength）参数：Add参数有两个参数值：true和false。意思是指定图片是否被改变成模糊效果。Strength参数值:整数，代表有多少像素的宽度将受到模糊影响。默认值是5像素。,Direction参数：设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系表：【例】设置文字【例】模糊效果,4、Chroma属性作用：设置对象中指定的颜色为透明色语法：Filter：Chroma（color=color）Color参数：要指定透明的颜色chroma属性对于图片文件不是很适合，因为图片是经过了压缩处理，很少有固定的位置可以设置为透明。【例】设置文字透明,5、DropShadow属性效果：阴影效果，在页面上显示出对象的投影注意：DropShadow属性也不支持图像语法：Filter:DropShadow(Color=color,Offx=Offx,Offy=offy,Positive=positive),参数Color:投射阴影的颜色Offx和offy:X方向和Y方向阴影的偏移量,整数值。正整数代表X轴的右方向和Y轴的向下方向，负整数则相反。Positive参数：True为任何非透明像素建立可见的投影，False为透明的像素部分建立可见的投影，也可为0或1。【例】设置阴影效果,6、FlipH、FlipV属性效果：FlipH代表水平翻转，FlipV代表垂直翻转语法：Filter：FlipHFilter：FlipV【例】水平翻转和垂直翻转,7、Glow属性效果：边缘产生类似发光的效果语法：Filter:Glow(Color=color，Strength=strength)参数Color：发光的颜色Strength：发光的强度，1-255【例】Glow属性示例,8、Gray属性效果：把图片变成灰度图语法：Filter：Gray9、Invert属性效果：把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值（底片效果）语法：Filter：Invert【例】灰度