CSS结合JS+DW中的CSS使用+滤镜

《CSS结合JS+DW中的CSS使用+滤镜》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS结合JS+DW中的CSS使用+滤镜一、CSS与js的结合javascript的几种鼠标事件：onClick：鼠标单击事件。（是指鼠标按下，然后松开时产生。）onDblClick：鼠标双击事件。（是指鼠标快速按下，松开，并再次按下时产生。）onMouseDown：鼠标按下事件。（鼠标按下时即产生。）onMouseUp：鼠标释放事件。（是指鼠标从按下的状态到弹起。）onMouseMove：鼠标移动事件。（是指在特定元素上移动鼠标。）onMouseOver：鼠标经过事件。（是指，当指针从外界往元素上移动时产生。）onMo

2、useOut：鼠标离开事件。（是指鼠标从特定元素上离开时产生。）onLoad：载入事件。（当图象或页面结束载入时产生。）onUnload：卸载事件。（当访问者离开页面时产生。）onScroll：滚动条滚动事件。（当访问者使用卷轴上移或下移时产生。）例子：在网页中插入一个图象，自定义一个“.out”样式，用gray滤镜使图片变成黑白的：将这个自定义样式应用到图片上，在浏览器中预览到图片变成了黑白，我们再定义一个样式“.over”，这个样式没有任何内容，是空样式，样式表代码如下：<

3、!--.over{}.out{filter:Gray}-->然后在图片标记（IMG）里加上“onMouseOver="this.className='over'"onMouseOut="this.className='out'"”，意思为当鼠标经过时，图片为over样式，即彩色正常图象；当鼠标离开时，图片为out样式，即黑白图象。oMouseOver和onMouseOut是鼠标事件，this.className=”…”表示当前对象的class名为…，注意大小写不要写错，JS对大小写非常敏感。如：

4、etype="text/css">二、Dreanweaver中CSS属性详解:在Dreamweaver4的CSS样式里包含了W3C规范定义的所有CSS1的属性，Dreamweaver4把这些属性分为：Type（类型）Back

5、ground（背景）Block（块）Box（盒子）Border（边框）List（列表）Positioning（定位）Extensions（扩展）共八个部分1.Type（类型）Type面板主要是对文字的字体，大小，颜色，效果等基本样式进行设置。注意：属性名带*号的是指样式效果不能在编辑文档时显示，要用浏览器打开才能看到效果。a.Font：设置字体系列。什么叫字体系列呢？是指对文字设定几个字体，当遇到第一个字体不能显示的文字时会自动用系列中的第二个字体或后面的字体显示。相对应的CSS属性是”font-family”。注意:一

6、般英文字体我们用“Verdana,Arial,Helvetica,sans-serif”这个系列比较好看。如果不用这些字体系列，你就需要自己编辑字体系列，也可以直接手动在下拉框里写字体名，字体之间用逗号隔开。中文网页默认字体是宋体，一般就空着不要选取任何字体。b.Size：定义文字的大小。你可以通过选取数字和度量单位来选择具体的字体大小，或者你也可以选择一个相对的字体大小。最好使用Pixels作为单位，这样不会在浏览器中文本变形。一般小字体用比较标准的12px。相对应的CSS属性是”font-size”。注意：CSS中长

7、度的单位分绝对长度单位和相对长度单位:绝对长度单位有：px：（象素）根据显示器的分辨率来确定长度。pt：（字号）根据windows系统定义的字号大小来确定长度。mm、cn、in：（毫米、厘米、英寸）根据显示的实际尺寸来确定长度。此类单位不随显示器的分辨率改变而改变。相对长度单位有：em：当前文本的尺寸。例如：{font-size:2em}是指文字大小为原来的2倍。ex：当前字母“x”的高度，一般为字体尺寸的一半。%：是以当前文本的百分比定义尺寸。例如：{font-size:300%}是指文字大小为原来的3倍。small、

8、large：表示比当前小一个级别或大一个级别的尺寸。c.Style：定义字体样式为Normal、Italic、或者Oblique。Italic和Oblique是斜体字体。默认设置为Normal。相对应的CSS属性是”font-style”。注意：Italic和Oblique都是斜体字体。而它们不同的是，Italic是