资源描述
第第5章章 表单、样式表和命令表单、样式表和命令5.3 样式表样式表nCSS(层叠样式表)是对HTML标记功能的扩充,许多使用HTML标记不能完成的功能可以使用CSS完成。nCSS也是一种格式化网页的标准方式,能精确定位网页元素,保持页面在不同浏览器设置下显示一致。n使用CSS可以在网页制作中将格式处理与内容编辑工作分开,减轻劳动强度,提高工作效率。5.3 样式表样式表一、在网页中使用CSS技术一般有三种方式:1、嵌入式样式表:将CSS样式直接嵌入到HTML标记内 5.3 样式表样式表分析:CSS的属性名称和HTML标记的属性名 称有所不同,如字体名称属性为font-family,字体大小属性为font-size等。CSS样式表定义中,属性和属性值之间使用”:”分隔,各个属性之间使用”;“间隔5.3 样式表样式表2、全局格式页样式表:是将CSS样式定义在网页头部。定义的样式在整个网页文件中都可以使用。样式定义行1 样式定义行2 5.3 样式表样式表3、样式表文件 样式表文件可以实现多个网页文档共享样式表定义。真正做到格式处理与内容分类,提高工作效率,使页面格式标准化。(1)生成样式表文件 样式表文件就是只包含标签和类定义项的文本文件,文件扩展名为.css5.3 样式表样式表(2)使用样式表文件 在网页中使用样式表文件有以下两种方式:链接外部文件 这种方式只是将样式表文件链接到页面中,不需要占用存储空间。5.3 样式表样式表 type属性值只能是属性值只能是text/css。是允许不支持这类型的是允许不支持这类型的浏览器忽略样式表单。浏览器忽略样式表单。rel属性值只能是属性值只能是styleshee5.3 样式表样式表导入格式页 导入格式页就是将样式表文件导入到本网页中。这种方式较少使用,因为浪费存储空间。import url(“样式文件名”)5.3 样式表样式表二、CSS使用方法1、新建样式表,如图所示5.3 样式表样式表n2、如下图所示,利用样式表制作网页5.3 样式表样式表n如下图所示,制作网页5.4 CSS滤镜滤镜 nCSS滤镜是CSS的一个filter属性,滤镜格式为:filter:属性值(参数=参数值,)5.4 CSS滤镜滤镜 根据属性值和参数设置的不同可以产生不同的效果。常用CSS滤镜属性值如下:alpha:透明滤镜 blur:模糊滤镜 shadow/dropshadow:阴影效果滤镜 glow:发光效果滤镜5.4 CSS滤镜滤镜 chroma:屏蔽色滤镜filpH:水平镜像滤镜filpV:垂直镜像滤镜ware:波纹滤镜gray:灰度滤镜invert:翻转滤镜Xray:X线滤镜5.4 CSS滤镜滤镜 n一些滤镜不能用于图片,如发光滤镜。n对同一对象可以使用多个滤镜,格式为:filter:属性值(参数=参数值,)属性值(参数=参数值,)例如:例如:filter:fliph flipv水平镜像水平镜像滤镜滤镜垂直镜垂直镜像滤镜像滤镜5.4 CSS滤镜滤镜 1、透明滤镜Alpha 透明滤镜是以透明效果显示指定区域的对象,格式为:filter:alpha(opacity=不透明度 ,finishopacity=结束不透明度,style=样式,startX=n,startY=m,finishX=p,finishY=q)n、m、p、q均为整数值。可选值为可选值为0100,0代表代表完全透明,完全透明,100代表完全代表完全不透明。不透明。只使用只使用opacity参数参数时,表示整个对象时,表示整个对象的不透明度的不透明度使用可选项参数时,使用可选项参数时,style参数是必须的。参数是必须的。他指示透明区域的他指示透明区域的形状。其中形状。其中1代表代表线形,线形,2代表放射代表放射状,状,3代表长方形。代表长方形。指示结束区指示结束区域的不透明域的不透明度。默认值度。默认值为为05.4 CSS滤镜滤镜 n使用可选项参数时,style参数是必须的。他指示透明区域的形状。其中1代表线形,2代表放射状,3代表长方形。设置或检索透明渐变的样式。5.4 CSS滤镜滤镜 n0|1|2|3 0:默认值默认值。整体透明度。将 Opacity 值均匀的作用于对象。1:线性渐变透明度。从由 StartX 和 StartY 决定的点,由 Opacity 决定的透明度开始,到由 FinishX 和 FinishY 决定的点,由 FinishOpacity 决定的透明度结束。2:圆形放射渐变透明度。圆形放射区域的圆心为对象的中心,圆周到与对象的边相切为止。透明渐变由圆心开始,到圆周结束。开始透明度由 Opacity 决定,结束透明度由 FinishOpacity 决定。5.4 CSS滤镜滤镜 3:矩形放射渐变透明度。由对象的边开始,到对象的中心结束。开始透明度由 Opacity 决定,结束透明度由 FinishOpacity 决定。5.4 CSS滤镜滤镜 nfinishopacity参数指示结束区域的不透明参数指示结束区域的不透明度,这时度,这时opacity指示开始区域的不透明度。指示开始区域的不透明度。finishopacity参数的默认值为参数的默认值为0。区域是由区域是由startX,startY,finishX,finishY指指定。定。n startX,startY,finishX,finishY参数的默参数的默认值与认值与style参数的取值有关。参数的取值有关。Style=1时默时默认值为:认值为:startX=0,startY=0,finishX=区区域宽度域宽度,finishY=05.4 CSS滤镜滤镜 startX:可选项。整数值(Integer)。设置或检索透明渐变开始点的水平坐标。其数值作为对象宽度的百分比值处理。默认值为 0。startY:可选项。整数值(Integer)。设置或检索透明渐变开始点的垂直坐标。其数值作为对象高度的百分比值处理。默认值为 0。5.4 CSS滤镜滤镜 finishX:可选项。整数值(Integer)。设置或检索透明渐变结束点的水平坐标。其数值作为对象宽度的百分比值处理。默认值为 0。finishY:可选项。整数值(Integer)。设置或检索透明渐变结束点的垂直坐标。其数值作为对象高度的百分比值处理。默认值为 0。5.4 CSS滤镜滤镜 nstyle=2或3时,区域起始点为区域中心,结束点为外边框,指定区域值无效.5.4 CSS滤镜滤镜 2、模糊滤镜blur与阴影效果滤镜shadow、dropshadow(1)模糊滤镜blur:产生类似阴影的效果.模糊滤镜格式为:filter:blur(add=truefalse,direction=方向,strength=长度)5.4 CSS滤镜滤镜 add参数默认值为true,一般不需要使用。direction为产生模糊影像的方向,默认值270(向左),只能使用45的整数倍数值,0为垂直向上,按顺时针递增。strength为模糊阴影长度,默认5px。5.4 CSS滤镜滤镜(2)shadow滤镜 shadow滤镜可以在指定方向产生投影。它的格式是:filter:shadow(color=投影颜色,direction=角度)direction指示投影的方向,它的取值和blur滤镜是一样的。5.4 CSS滤镜滤镜(3)dropshadow滤镜 dropshadow滤镜可以指定投影的偏移量。它的格式是:filter:dropshadow(color=投影颜色,offX=n,offY=m,positive=truefalse)5.4 CSS滤镜滤镜 5.4 CSS滤镜滤镜 noffX:可选项。整数值(Integer)。单位为像素(px)。设置或检索阴影在横坐标轴上以对象为基准的偏移量。正值向右偏移,负值向左偏移。默认值为 5。noffY:可选项。整数值(Integer)。单位为像素(px)。设置或检索阴影在纵坐标轴上以对象为基准的偏移量。正值向下偏移,负值向上偏移。默认值为 5。5.4 CSS滤镜滤镜 positive:可选项。布尔值(Boolean)。设置或检索滤镜是否从对象的非透明像素建立阴影。假如你有一个透明的对象但想给它建立普通的阴影,设置此参数值为 true。这会让透明对象的阴影在透明区域外,而非在透明区域内。5.4 CSS滤镜滤镜 true|false true:默认值默认值。滤镜从对象的非透明像素建立阴影。false:滤镜从对象的透明像素建立阴影。5.4 CSS滤镜滤镜 blur、shadow、dropshadow三种滤镜有相似之处,但各有不同特点。blur滤镜可以指定阴影方向和长度;shadow滤镜只能指定投影方向;dropshadow滤镜可以达到投影与对象分离的效果。5.4 CSS滤镜滤镜 3、发光效果滤镜glow 发光效果滤镜glow会使对象的边缘产生类似发光的效果。它的格式如下:filter:glow(color=发光颜色,strength=光线长度)发光效果滤镜不能用于图片。发光效果滤镜不能用于图片。5.4 CSS滤镜滤镜 单位为单位为象素象素5.4 CSS滤镜滤镜 4、屏蔽色滤镜chroma 该滤镜用来屏蔽掉某种指定颜色,其格式为:filter:chroma(color=颜色)使用chroma滤镜时,屏蔽掉的颜色是指定的某种颜色,是以颜色值判断的,所以有时认为应该屏蔽掉的颜色没有全部屏蔽掉,其原因就是眼睛对颜色的区分是有限的,与颜色值差距很大。5.4 CSS滤镜滤镜 5、水平与垂直镜像滤镜 flipH、flipV滤镜用于实现对象的水平与垂直翻转效果,没有参数,直接使用即可。格式为:filter:flipH flipV5.4 CSS滤镜滤镜 6、波纹滤镜ware 该滤镜可以使图像产生正玄波动效果。格式为:filter:ware(add=true false,freq=频率,lightstrength=光线强度,phase=初相角,strength=振幅)波纹方向,波纹方向,true为横向,为横向,false为纵向为纵向(默认(默认)波纹光线强波纹光线强度,取值为度,取值为0100,0最最强,强,100最最弱弱正玄波初正玄波初相角,默相角,默认值为认值为0波纹幅度,在波纹幅度,在add为为false时时不起作用不起作用5.4 CSS滤镜滤镜 add:可选项。布尔值(Boolean)。设置或检索滤镜作用图像是否覆盖原始图像。true|false true:滤镜作用图像覆盖原始图像。false:默认值默认值。只显示滤镜作用图像。5.4 CSS滤镜滤镜 freq:可选项。整数值(Integer)。设置或检索滤镜建立的波浪数目。默认值为 3。lightStrength:可选项。整数值(Integer)。波纹光线强度。取值范围为 0-100。默认值为 100。0光线最强,光线最强,100光线最弱。光线最弱。5.4 CSS滤镜滤镜 phase:可选项。整数值(Integer)。设置或检索正弦波开始处的相位偏移。取值范围为 0-100。默认值为 0。数值越大则偏移量越大。strength:可选项。整数值(Integer)。单位为像素(px)。设置或检索以对象为基准的在运动方向上的向外扩散距离。取值范围为=1。默认值为 1。5.4 CSS滤镜滤镜 7、灰度滤镜gray、翻转滤镜invert和X线滤镜Xray都是没有参数的滤镜。灰度滤镜gray:把彩色图片转换成灰度等级的图片(黑白图片)。翻转滤镜invert:对图片的色彩、饱和度和亮度值产生翻转效果。X线滤镜Xray:可以产生类似X光片的效果。5.4 CSS滤镜滤镜 5.1 表单表单n表单:是用户利用浏览器对Web站点网络数据库进行查询的一种界面,用户利用表单可以输入信息或选择选项等,然后将这些信息提交给服务器进行处理。这种查询方式叫做交互的或者叫做双向的。这些表单对象包括文本域、下拉列表框、复选框和单选按钮等。5.1 表单表单n表单对象是让用户输入信息的地方,表单域是放置表单对象的区域,只有表单域内的表单对象,才可以将它的信息传送出去,才可以接收外来的信息。5.1 表单表单1、表单域和插入表单对象(1)创建与删除表单域5.1 表单表单(2)设置表单域的属性5.1 表单表单n“表单名称”文本框:在该文本框内输入表单域的名称n“动作”文本框和按钮:利用它们可以输入脚本程序或含有脚本程序的HTML文件。5.1 表单表单n“方法”下拉列表框:用来选择客户端与服务器之间传送数据采用的三种方式。GET:获得,即追加表单值到URL,并发送服务器GET请求。POST:传递,在消息正文中发送表单的值,并发送服务器POST请求。5.1 表单表单(3)插入表单对象5.1 表单表单2、设置文本字段的属性文本字段也叫文本域。表单中经常使用文本字段。它可以是单行,也可以是多行,它用于接收文本、数字和字符。5.1 表单表单3、设置复选框和单选按钮的属性(1)设置复选框的属性5.1 表单表单(2)设置单选按钮的属性:一组单选按钮中只允许选中一个。5.1 表单表单4、设置按钮的属性 按钮用来制作“提交”和“重置”按钮,还可以调用函数提交表单:可以向服务器提交整个表单。重设表单:可以取消前面的输入,重位 表单。无:表示是一般按钮,可用来调用脚本程序。5.1 表单表单5、设置列表/菜单和文件域的属性5.1 表单表单eg:如图所示,制作表单p经常不断地学习,你就什么都知道。你知道得越多,你就越有力量pStudyConstantly,AndYouWillKnowEverything.TheMoreYouKnow,TheMorePowerfulYouWillBe学习总结结束语当你尽了自己的最大努力时,失败也是伟大的,所以不要放弃,坚持就是正确的。When You Do Your Best,Failure Is Great,So DonT Give Up,Stick To The End演讲人:XXXXXX 时 间:XX年XX月XX日
展开阅读全文