CSS编程基础与DIV+CSS

1、CSS编程基础（一）CSS简介 CSS是Cascading Style Sheets的英文缩写,即层叠样式表。 作用是控制网页样式并将样式信息与网页内容分离的一种标记性语言。 CSS常常与HTML标记配合使用，通过链接方式对HTML标记进行控制，使网页达到更美观的效果。 特点：l CSS文件是一个后缀为CSS的文本文件, 包含各种CSS标记。l CSS是一种标记语言, 不需要编译,可以直接由浏览器解释执行。l CSS可以支持多种设备, 如手机,PDA,打印机等。l 使用CSS可以减少网页代码量,增加网页的浏览速度。 CSS文件链接方式 HTML文档链接CSS有三种方式： 外部引用 内部引用 内

2、联引用 一、 CSS外部引用 CSS外部引用使用了外接的CSS文件，浏览器一般都带有缓存功能，所以用户不用每次都下载此CSS文件。 外部引用是W3C推荐使用的，是最好的引入CSS的方式，可以网页使代码量最小,表现最统一 。 外部引用CSS的两种方法： 1.使用link标签引用CSS 语法： stylesheet指连接的元素是一个样式表 2.使用import引用CSS 语法： import url(*.css); 注意：一些老式的浏览器不支持import方法 二、内部引用CSS 可以使用style标签直接把CSS文件中的内容加载到HTML文档内部，在HTML文档的和标记之间插入一个.块对象 bo

3、dy font-family: 隶书; font-size: 30pt; color: blue; 三、内联引用CSS 内联引用可以把CSS样式直接作用在HTML标签中. 使用CSS内联引用表现段落.内联引用虽然是一种快捷的方式，但是不利于以后的统一修改和表现的一致性，所以不提倡使用。 总结： 在实际应用中，往往是3种样式表同时运用： 网站的总体风格依靠外部样式表来定义，每个网站的网页都链接一个或几个固定的css文件； 当某个页面需要特别的样式时，则在该页面上采用内部样式表； 当页面的某个标签需要特别的样式时，在该标签上应用内联样式表。 通过这样的方法，做到了共性与个性的统一，在变化与固定之间

4、建立了比较好的平衡。CSS的基本形式 CSS样式语法由选择符、属性和属性值构成 selector property: value ; 选择符 (selector) 通常是HTML标签，也可以是自定义名称。 每个属性(property)都有一个值，属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明。 注意事项： （1）若定义多个声明，必须用分号将每个声明分开，每行写一个。最后一个声明不必加分号，但为了防止出错，增删声明方便也最好加上。 p text-align: center; color: #0000FF; （2）可以对选择符分组，共享相同的声明。 h1, h2, h3, h4

5、, h5, h6 color: green; （3）样式表具有继承性 ，其规则可从母体延续到子体。 b color: blue; 欢迎 大家 光临 （4）特别说明的样式表优先于一般样式表 body color: green; p color: blue; （5）样式表按照在HTML中的显示顺序执行。 p color: green; p color: blue; （5）如果样式表规则同HTML 标签格式发生冲突，如何处理？ p font-family: 黑体 欢迎 你好 （6）CSS注释可以帮助了解CSS的含义。注释使用/* */ /* -文字样式开始- */ /* 蓝色30象素文字 */ p

6、color: blue; font-size: 30px; 选择符 CSS选择符就是CSS样式的名字。 选择符命名规范： 可以使用英文字母、数字、连字号、下划线、冒号和句点。 一律小写。选择符的分类 常用的CSS选择符： HTML标记选择符 ID选择符 CLASS选择符（类选择符）ID选择符 ID选择符在名字前加#，是惟一性选择符 例如： #dreamdured color: red; ID选择符在一个页面中只能出现一次，在整个网站中也最好出现一次。这样有利于程序员控制此元素。 class选择符在名字前增加”.”，是多重选择符 例如： .dreamdulue color: blue; clas

7、s选择符在一个页面中可以出现多次。长度单位 在CSS中，长度单位用于宽度、高度、字号、字和字母间距、文本的缩排、行高、页边距、贴边、边框线宽以及许多其他属性。 p font-size: 12px 长度单位分两种： 相对长度单位 绝对长度单位长度单位 CSS相对长度单位会随着它的参考值变化而变化，不是固定的。 以下是CSS相对长度单位列表：CSS相对长度单位说明em相对于当前对象内文本的字体尺寸。如果现在的字体大小为 12pt，那么1.5em=18pt。 若当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 ex相对于字符“x”的高度。此高度通常为字体尺寸的一半。px像素Pixe

8、ls是相对于显示器分辨率而言的。WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。可能会因为浏览者的屏幕分辨率不同而造成显示上的效果差异。%百分比绝对长度单位是一个固定的值。CSS绝对长度单位说明in英寸Inches (1 英寸 = 2.54 厘米)cm厘米Centimetersmm毫米Millimeterspt点Points (1点 = 1/72英寸)pc皮卡Picas (1 皮卡 = 12 点)注意： pt单位在所有的浏览器和操作平台上都适用 1in = 6pc = 72pt = 2.54cm = 25.4mm 绝对长度值最好用于打印

9、机输出设备，而在仅仅作为屏幕显示 时，应该尽量使用相对长度值 注意: 不要在属性值与单位之间留有空格。假如使用 “40 px” 而不是 “40px” ，在很多浏览器中可能无法正常工作。 p font-size: 40px; RGB颜色1.十六进制颜色表示法： #rrggbb 如：#ff0000 ; #00ff00 ; #1199ff ;2. 短16进制颜色表示法: #rgb 如：#f00 ; #0f0 ; #00f ; 短16进制颜色表示法就是当16进制颜色表示法中的两个表示颜色值的数字一样的时候的简写，比如#ff0000可以简写为#f00。3. RGB颜色表示法 rgb (x,x,x) x是

10、一个介乎0255之间的整数。 例如：rgb(255,0,0) ; rgb(0,255,0) ; rgb(0,0,255) ; 4. RGB百分比颜色表示法 rgb(y%,y%,y%) y是一个介乎0.0100.0之间的整数。 例如： rgb(100%, 0%, 0%) ; rgb(0%, 100%, 0%) ; rgb(0%, 0%, 100%) ; 示例： p color: #ff0000; p color: #f00; p color: rgb(255,0,0); p color: rgb(100%,0%,0%); 注意： 使用 RGB 百分比时，即使值为 0 也要写百分比符号。CSS字体

11、属性 CSS字体属性用于定义文字的字体,大小,粗细的表现等，是样式表的最常见用途之一。属性描述font简写属性。作用是把所有针对字体的属性设置在一个声明中。font-family设置字体系列。font-size设置字体的尺寸。font-style设置字体风格，如斜体字。font-variant以小型大写字体或者正常字体显示文本。font-weight设置字体的粗细。 font-family ：设置字体 相当于HTML标记中font-face属性的功能。 系统中不一定有我们定义的字体, 可以定义多个字体,如果第一个字体没有,就使用下一个,以此类推。 字体名称超过一个单词时要使用冒号扩起来，比如“

12、Times News Roman”,“宋体“。font-size ：定义字体的大小值描述xx-small 最小 x-small 较小 small 小 medium 正常large 大 x-large 较大 xx-large 最大 绝对大小，从 xx-small 到 xx-large。默认值：medium。smaller把 font-size 设置为比父元素更小的尺寸。larger把 font-size 设置为比父元素更大的尺寸。length把 font-size 设置为一个固定的值。中文常用字体是12px%把 font-size 设置为基于父元素的一个百分比值。 font-style ：定义字

13、体显示的方式 参数有三种： normal：正常的字体。 italic：斜体。对于没有斜体变量的特殊字体，将应用oblique。 oblique：属于其中间状态，以偏斜体显示。 font-variant：设置对象中的文本是否为小型大写字母。 参数： normal：正常字体 smal-caps：小型大写字母字体 font-weight ：定义字体的粗细 其值包括： normal:正常,等同于 400 bold:粗体,等同于 700 bolder:更粗 lighter:更细 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900:字体粗细的值 前面几个

14、字体属性完全可以使用font属性代替，该属性是复合属性： font : font-style | font-variant | font-weight | font-size | line-height | font-family 默认值为： normal normal normal medium normal Times New Roman 注意： 声明方式参数必须按照如上的排列顺序。每个参数仅允许有一个值。 可以不设置其中的某个值，比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。CSS文本属性 CSS 文本属性可定义文本的外观。 通过文本属性，您可以改变

15、文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进等。属性描述color设置文本颜色direction设置文本方向。line-height设置行高。letter-spacing设置字符间距。text-align对齐元素中的文本。text-decoration向文本添加修饰。text-indent缩进元素中文本的首行。text-transform控制元素中的字母。unicode-bidi设置文本方向。white-space设置元素中空白的处理方式。word-spacing设置字间距。设置文本方向 direction 属性：规定文本的方向 / 书写方向。值描述ltr默认。文本方向从左到右。r

16、tl文本方向从右到左。说明：direction 属性一般与unicode-bidi属性一起使用unicode-bidi属性用于同一个页面里存在从不同方向读进的文本显示。语法：unicode-bidi :normal | bidi-override | embed说明：normal是系统的默认值，表示对象不打开附加的嵌入层；bidi-override表示严格按照direction属性的值重排序；embed表示对象打开附加的嵌入层，将direction属性的值指定给嵌入层，在对象内部进行隐式重排序。如果想要在内联文本中应用direction属性，必须设定该属性的值为embed或bidi-overr

17、ide。设置单词间距 word-spacing属性 定义以空格间隔文字的间距 文本间距是指单词（包括汉字与字母）之间插入的空格数。 距离差只是单词与单词的，与单词内部没关系。 属性值： 值描述normal默认。定义单词间的标准空间。length定义单词间的固定空间。长度是设定单词间隔的数值及单位，可以使用负值。 设置字符间隔 letter-spacing属性 定义文本中字母的间隔(中文为汉字的间隔)。 在英文中代表字母与字母之间的距离,在中文中代表字与字之间的距离。 属性值：值描述normal默认。规定字符间没有额外的空间。length定义字符间的固定空间（允许使用负值）。字母大小写转换 te

18、xt-transform 属性 定义文本的大小写状态，此属性对中文无意义 text-transform可以有以下四个值：文本修饰 text-decoration 属性 文本修饰属性允许通过五个属性设置文本的某种效果，其属性值如下：注意：IE、Chrome 或 Safari 不支持 “blink” 属性值。在netscape浏览器中才有效。 空白处理方式 white-space 属性 用于设置页面对象内空白（包括空格和换行等）的处理方式。默认情况下，HTML中的连续多个空格会被合并成一个，而使用这一属性可以设置成其他的处理方式。 属性值：值描述normal默认。将多个连续的空格合并。pre空白和

19、换行会被浏览器保留。类似 HTML 中的 标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。pre-wrap保留空格，但是正常地进行换行。pre-line合并空格，但是保留换行符。设置文本水平对齐 text-align 属性 规定元素中的文本的水平对齐方式。 属性值：设置文本垂直对齐 vertical-align 属性 设置元素的垂直对齐方式。 属性值：文本缩进 text-indent 属性 规定文本块中首行文本的缩进。 文本缩进属性可以应用于块级元素（p、h1等），以定义该元素第一行可以接受的缩进的数量。 属性值：值描述length定义固定的缩进。默认值：0。%定义

20、基于父元素宽度的百分比的缩进。注意：允许使用负值。如果使用负值，那么首行会被缩进到左边。行距 line-height行距属性 行距指的是行与行之间的距离。在正文中，行距能让文本有足够的文本视觉空间。 属性值：值描述normal默认。设置合理的行间距。number设置数字，此数字会与当前的字体尺寸相乘来设置行间距。length设置固定的行间距。%基于当前字体尺寸的百分比行间距。CSS背景设置背景颜色 background-color属性 设置元素的背景颜色。 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边

21、框），会透过这些透明部分显示出背景色。 属性值：值描述color_name规定颜色值为颜色名称的背景颜色（比如 red）。hex_number规定颜色值为十六进制值的背景颜色（比如 #ff0000）。rgb_number规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。transparent默认。背景颜色为透明。设置背景图像 background-image 属性 为元素设置背景图像。 元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。 默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。 属性值：值描述url(URL)指向图像的路径。none默认

22、值。不显示背景图像。设置背景图像滚动 background-attachment 属性 背景图像滚动是指背景图像是随对象内容滚动还是让背景图像固定。 background-attachment : scroll | fixed scroll为默认值，表示图像内容滚动而滚动。 fixed是固定的，即背景图像固定的网页中。当页面的其余部分滚动时，背景图像不会移动。 设置背景图像位置 background-position 属性 设置背景图像的起始位置。 当对象的背景图像用background引入时，根据背景图像大小不同，所在页面显示的位置也会不一样。值描述top left top center t

23、op right center left center center center right bottom left bottom center bottom right 如果您仅规定了一个关键词，那么第二个值将是center。默认值：0% 0%。x% y%第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。xpos ypos第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 p

24、osition 值。设置背景图像如何铺排 background-repeat 属性 属性定义了图像的平铺模式。设置是否及如何重复背景图像。 背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性，图像会被放置在元素的左上角。值描述repeat默认。背景图像将在垂直方向和水平方向重复。repeat-x背景图像将在水平方向重复。repeat-y背景图像将在垂直方向重复。no-repeat背景图像将仅显示一次。综合设置 background 属性 background 简写属性在一个声明中设置所有的背景属性。 可以按顺序设置

25、如下属性： background-color background-image background-repeat background-attachment background-position 如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url(smiley.gif); 也是允许的。 通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。CSS列表 列表 从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单，甚至你的所有朋友都可以表示为一个列表或

26、者是列表的列表。 由于列表如此多样，这使得列表相当重要 CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。CSS 列表属性(list)属性描述list-style简写属性。用于把所有用于列表的属性设置于一个声明中。list-style-image将图象设置为列表项标志。list-style-position设置列表中列表项标志的位置。list-style-type设置列表项标志的类型。列表项图像 list-style-image 属性 使用图像来替换列表项的标记。 这个属性指定作为一个有序或无序列表项标志的图像。值描述URL图像的路径。none默认。无图形被显示。列表标志位

27、置 list-style-position 属性 设置在何处放置列表项标记。 该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。值描述inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。列表项标记类型 list-style-type 属性 设置列表项标记的类型值描述none无标记。disc默认。标记是实心圆。ci

28、rcle标记是空心圆。square标记是实心方块。decimal标记是数字。decimal-leading-zero0开头的数字标记。(01, 02, 03, 等。)lower-roman小写罗马数字(i, ii, iii, iv, v, 等。)upper-roman大写罗马数字(I, II, III, IV, V, 等。)lower-alpha小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)upper-alpha大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)CSS表格 CSS Tab

29、le 属性 CSS 表格属性允许你设置表格的布局。（请注意，本章介绍的不是如何使用表来建立布局，而是要介绍 CSS 中表本身如何布局。）属性描述border-collapse设置是否把表格边框合并为单一的边框。border-spacing设置分隔单元格边框的距离。（仅用于 separated borders 模型）caption-side设置表格标题的位置。empty-cells设置是否显示表格中的空单元格。（仅用于 separated borders 模型）table-layout设置显示单元、行和列的算法。border-collapse 属性 border-collapse 属性 设置表格

30、的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。值描述separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。collapse如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。border-spacing 属性 border-spacing 属性 设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。 注意：某些版本的IE浏览器不支持此属性。值描述length length规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。如果定

31、义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。caption-side 属性 caption-side 属性 该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前（或之后）的一个块级元素。值描述top默认值。把表格标题定位在表格之上。bottom把表格标题定位在表格之下。left把表格标题定位在表格左边。

32、right把表格标题定位在表格右边。注意：IE6 IE7不支持该属性 firefox 支持empty-cells 属性 empty-cells 属性 设置是否显示表格中的空单元格（仅用于“分离边框”模式）。 该属性定义了不包含任何内容的表单元格如何表示。如果显示，就会绘制出单元格的边框和背景。除非 border-collapse 设置为 separate，否则将忽略这个属性。值描述hide默认。不在空单元格周围绘制边框。show在空单元格周围绘制边框。注意：IE6 IE7不支持该属性 firefox 支持table-layout 属性 table-layout 属性 用来显示表格单元格、行、列

33、的算法规则。值描述automatic默认。列宽度由单元格内容设定。fixed列宽由表格宽度和列宽度设定。table-layout 属性固定表格布局：固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。自动表格布局：在自动表格布局中，列的宽度由列单元格中没有折行的最宽的内容设定。此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容固定布局算法比较快，但是不太灵活，而自动算法比较慢，不过更能反映传统的 HT

34、ML 表。CSS轮廓与下文中的边框对比学习 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 CSS outline 属性规定元素轮廓的样式、颜色和宽度。 IE6 和IE7不完全支持outline属性CSS轮廓属性属性描述outline在一个声明中设置所有的轮廓属性。outline-color设置轮廓的颜色。outline-style设置轮廓的样式。outline-width设置轮廓的宽度。设置轮廓的颜色 outline-color 属性 设置一个元素整个轮廓中可见部分的颜色。 请始终在 outline-color 属性之前声明 outline-sty

35、le 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。 轮廓线不会占据空间，也不一定是矩形。 要记住，轮廓的样式不能是 none，否则轮廓不会出现。值描述color_name规定颜色值为颜色名称的轮廓颜色（比如 red）。hex_number规定颜色值为十六进制值的轮廓颜色（比如 #ff0000）。rgb_number规定颜色值为 rgb 代码的轮廓颜色（比如 rgb(255,0,0)）。invert默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。设置轮廓的样式 outline-style 属性 用于设置元素的整个轮廓的样式。样式不能是 none，否则轮廓不会出现。 请始

36、终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。 IE6 和IE7不能很好的支持。 值描述none默认。定义无轮廓。dotted定义点状的轮廓。dashed定义虚线轮廓。solid定义实线轮廓。double定义双线轮廓。双线的宽度等同于 outline-width 的值。groove定义 3D 凹槽轮廓。此效果取决于 outline-color 值。ridge定义 3D 凸槽轮廓。此效果取决于 outline-color 值。inset定义 3D 凹边轮廓。此效果取决于 outline-color 值。outset定义

37、 3D 凸边轮廓。此效果取决于 outline-color 值。设置轮廓的宽度 outline-width 属性 设置元素整个轮廓的宽度，只有当轮廓样式不是 none 时，这个宽度才会起作用。如果样式为 none，宽度实际上会重置为 0。不允许设置负长度值。 请始终在 outline-width 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。 值描述thin规定细轮廓。medium默认。规定中等的轮廓。thick规定粗的轮廓。length允许您规定轮廓粗细的值。综合设置 outline 属性 outline 简写属性在一个声明中设置所有的轮廓属性。

38、可以按顺序设置如下属性：l outline-color l outline-style l outline-width 如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。outline-color规定边框的颜色。outline-style规定边框的样式。outline-width规定边框的宽度。CSS尺寸CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。属性描述height设置元素的高度。line-height设置行高。max-height设置元素的最大高度。max-width设置元素的最大宽度。

39、min-height设置元素的最小高度。min-width设置元素的最小宽度。width设置元素的宽度。设置元素的高度 height 属性 height 属性设置元素的高度。 值描述auto默认。浏览器会计算出实际的高度。length使用 px、cm 等单位定义高度。%基于包含它的父对象的百分比高度。设置元素的宽度 width 属性 width 属性设置元素的宽度值描述auto默认值。浏览器可计算出实际的宽度。length使用 px、cm 等单位定义宽度。%定义基于包含块（父元素）宽度的百分比宽度。CSS滤镜CSS滤镜将把我们带入绚丽多姿的多媒体世界。正是有了CSS滤镜属性，页面才变得更加漂亮

40、。 CSS滤镜属性的标识符是filter。其书写格式如下：filter : filtername (parameters)Filter是滤镜属性选择符。filtername是滤镜属性名parameters是表示各个滤镜属性的参数，这些参数决定了滤镜将以怎样的效果显示。 CSS滤镜属性名称CSS滤镜属性描述Alpha设置透明度Blur设置模糊效果Chroma设置指定颜色透明Dropshadow设置投射阴影Fliph水平翻转Flipv垂直翻转Glow为对象的外边界增加光效Grayscale设置灰度（降低图片的色彩度）Invert设置底片效果Light设置灯光投影Mask设置透明膜Shadow设置阴

41、影效果Wave利用正弦波纹打乱图片Xray只显示轮廓CSS滤镜仅适用于以下标签body网页文档的主体元素，所有的可见范围都在元素内button表单域的按钮，可以有“发送(submit)”、“重置(reset)”等形式div定义了网页上的一个区域，这个区域的高度、宽度或者绝对位置都是 已知的img图片元素，通过指定“src属性来指定图片的来源input输入表单域marquee移动字幕效果span定义了网页上的一个区域，这个区域的高度、宽度或者绝对位置都是以知的table表格td表格数据单元格textarea文本区域text输入文本框th表格标题单元格thead表格标题tr表格行alpha属性 a

42、lpha属性 用来设置图片透明度。 filter:alpha（ opacity=opcity， 透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明 finishopacity=finishopacity， style=style， startX=startX， startY=startY， finishX=finishX， finishY=finishY） Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。Finishopacity是一个可

43、选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。StartX和StartY代表渐变透明效果的开始坐标。finishX和finishY代表渐变透明效果的结束坐标。blur属性 blur属性 blur属性设置可以达到某种模糊的效果 语法格式如下： filter：blur（add=add，direction，strength=strength） Add参数有两个参数值：true和false。意思是指定图片是否被改变成模糊效果。 Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。Direction参数用来设置模糊的方向。模糊效果

44、是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系见下表：CSS滤镜：blur属性 角度CSS滤镜：blur属性 方向0top 垂直向上45top right 垂直向右90right 向右135bottom right 向下偏右180bottom 垂直向下225bottom left 向下偏左270left 向左315top left 向上偏左Chroma属性 Chroma属性 设置可以设置一个对象中指定的颜色为透明色。 chroma属性对于图片文件不是很适合。因为很多图片是经过了减色和压缩处理（比如JPG、GIF等格式），所以它们很少有

45、固定的位置可以设置为透明。 语法格式如下：Filter：Chroma（color=color）DropShadow属性 DropShadow属性 DropShadow属性可以添加对象的阴影效果。实现的效果看上去就像使原来的对象离开页面，然后在页面上显示出该对象的投影。 chroma属性对于图片文件不是很适合。因为很多图片是经过了减色和压缩处理（比如JPG、GIF等格式），所以它们很少有固定的位置可以设置为透明。DropShadow属性 语法格式如下：Filter：DropShadow（Color=color，Offx=Offx，Offy=offy， Positive=positive）Colo

46、r代表投射阴影的颜色。 Offx和offy分别X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数，代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。Positive参数有两个值：True为任何非透明像素建立可见的投影;False为透明的像素部分建立可见的投影。 FlipH属性、FlipV属性 FlipH属性、FlipV属性 FlipH属性、FlipV属性是CSS滤镜的翻转属性。FlipH代表水平翻转，FlipV代表垂直翻转。 语法格式如下：Filter：FlipH Filter：FlipV Gray属性 Gray属性 Gray属性就是把一张图片变成灰度图。 语法格式：F

47、ilter : Gray Glow属性 Glow属性 使对象的边缘产生类似发光的效果。 语法格式：Filter：Glow（Color=color，Strength=strength）Color是指定发光的颜色。Strength指定发光的强度，参数值从1到255。Invert属性 Invert属性 可以把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值。 语法格式：Filter：Invert Mask属性 Mask属性 可以为对象建立一个覆盖于表面的膜。 语法格式：Filter：Mask（Color=颜色） 只有一个Color参数，用来指定使用什么颜色作为掩膜。mask属性对图片文件的支持还是

48、不够，不能达到应该有的效果。 Shadow属性 Shadow属性 Shadow属性可以在指定的方向建立物体的投影。 语法格式：Filter：Shadow(Color=color，Direction=direction) Color参数用来指定投影的颜色；Direction参数用来指定投影的方向。 Dropshadow属性和Shadow属性的区别 Shadow属性可以在任意角度进行投射阴影，Dropshadow属性实际上是用偏移来定义阴影的。所以，看上去左图的文字和阴影就像是一体的，而右图的文字就像脱离了阴影一样。 Wave属性 Wave属性 Wave属性用来把对象按照垂直的波纹样式打乱。 语法格式：Filter：Wave（Add=True（False），Freq=频率，LightStrength=增强光效, Phase=偏移量，Strength=强度） Add参数有两个参数值：True代表把对象按照波纹样式打乱；False代表不打乱；Freq参数指生成波纹的频率，也就是指定在对象上共需要产生多少个完整的波纹。Lig