CSS自定义属性Expression.doc

CSS自定义属性ExpressionCSS的出现使网页制作者在对网页元素的控制方便许多，当然，有利必有弊，CSS只能对颜色、大小、距离等静态样式有效，对于要实现某些html元素的动态样式就显得有些力不从心。有了CSS的自定义属性Expression，可以自己定义属性，自己在属性里写需要的代码，这样就可以结合CSS的特性与JavaScript/target=_blankJS特效，实现对整体页面上相同元素的控制。是不是觉得有点不可思议？我们先拿新手们经常问的怎么消除页面上的链接虚线框为例。通常的做法是：link1link2link3采用expression的效果如下：注：如果你无法看到效果，请升级你的浏览器试试。粗看或许还体现不出采用expression的优势，但如果你的页面上有几十甚至上百个链接，这时的你难道还会机械式地Ctrl+C，Ctrl+V么，何况两者一比较，哪个产生的冗余代码更多呢？采用expression的做法如下：astar:expression(onfocus=this.blur)link1link2link3说明：里面的star就是自己任意定义的属性，你可以随自己喜好另外定义，接着包含在expression()里的语句就是JavaScript/target=_blankJS脚本，在自定义属性与expression之间可别忘了还有一个引号，因为实质还是CSS，所以放在style标签内，而非script内。OK，这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意，如果触发的特效是CSS的属性变化，那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改，你可能想当然的会认为应该写为inputstar:expression(#111nmouseover=this.style.backgroundColor=#FF0000;#111nmouseout=this.style.backgroundColor=#FFFFFF)可结果却是出现脚本出错，正确的写法应该把CSS样式的定义写进函数内，如下所示：inputstar:expression(#111nmouseover=function()this.style.backgroundColor=#FF0000,#111nmouseout=function()this.style.backgroundColor=#FFFFFF)看了这么多，感觉怎么样，是不是有点概念了呢。使用CSS的自定义属性很简洁地用较少的代码实现了用JavaScript/target=_blankJS产生的相同的效果，真正起到了事半功倍的作用，你还不赶快去试试？ CSS实例：横线样式的输入框在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框，而是一条细线，很多朋友对此很感兴趣。其实要实现这样的效果并不困难，我们只要用一段简短的CSS代码控制好表单输入框的样式即可。下面我们就来看看这段实现效果的css代码。它主要运用了表格边框的样式控制，将左、上、右边框设置为none，只剩下下边框即可。样式表中代码解释如下：“BORDER-LEFT-STYLE:none”：隐藏左边框“BORDER-RIGHT-STYLE:none”：隐藏右边框“BORDER-TOP-STYLE:none”：隐藏上边框“BORDER-bottom-STYLE:none”：隐藏下边框。下面让我们一起来看一个应用实例：横线式输入框隐藏的边框的输入框：用户名：实现效果简洁清爽。javascript实用的一些技巧1.oncontextmenu=window.event.returnValue=false将彻底屏蔽鼠标右键no可用于Table2.取消选取、防止复制3.onpaste=returnfalse不准粘贴4.oncopy=returnfalse;oncut=returnfalse;防止复制5.IE地址栏前换成自己的图标6.可以在收藏夹中显示出你的图标7.关闭输入法8.永远都会带着框架9.防止被人frame10.网页将不能被另存为11.12.删除时确认删除13.取得控件的绝对位置/JavascriptfunctiongetIE(e)vart=e.offsetTop;varl=e.offsetLeft;while(e=e.offsetParent)t+=e.offsetTop;l+=e.offsetLeft;alert(top=+t+/nleft=+l);/VBScript!-functiongetIE()dimt,l,a,bseta=document.all.img1t=document.all.img1.offsetTopl=document.all.img1.offsetLeftwhilea.tagNameBODYseta=a.offsetParentt=t+a.offsetTopl=l+a.offsetLeftwendmsgboxtop=&t&chr(13)&left=&l,64,得到控件的位置endfunction-巧用CSS控制鼠标样式变换主页上的鼠标是不是就只有箭头和小手两种模样呢？如果鼠标移到“帮助”等字样上时，形状就变成求助的问号；鼠标移到可能需要较长时间等待的超链接时，鼠标形状就变成等待的样子那该多好啊！其实，借助我们的css，几句很简单的代码就可以实现这一切！不信？把鼠标移到下面的演示文字上看看效果吧！演示：手形源代码：演示：手形演示：移动源代码：演示：移动演示：等待源代码：等待状态演示：定位指示源代码：演示：定位指示演示：帮助源代码：演示：帮助是不是简单又方便？这里我们只用到了CSS中的“cursor”属性，利用“style=cursor:值”这样的语句形式，分别设置具体的值就可以了。例如：值为“hand”时，当鼠标移到相应的文字或图片上时，就会变成超链接的小手形；值为“move”时，当鼠标移到相应的文字或图片上时，就会变成上下左右带方向箭头的形状，依此类推。这个小技巧也许可以在你制作主页时帮上一点忙呢由显示/隐藏引出的CSS bug这一段CSS代码相当简单，目的就是想用CSS来控制某段文字的显示与隐藏。起初我采用了下面的代码，令人不可思议的是，它们在我的IE6.0上居然没有任何反应，大家不信可以亲自试验一下。afont-size:12px;text-decoration:none;height:50;a:hovertext-decoration:none;aspanfont-size:12px;display:none;a:hoverspandisplay:block;link我是隐藏内容我仔仔细细地检查了一遍代码，实在找不到什么毛病来。没有办法，我只能像平时查错纠错一样，试着改改CSS里的代码。当我改变了hover伪类链接中的代码时（代码如下所示），突然发现代码可以运行了。为了确认CSS是否真存在该bug，我又特地改用大小、颜色、位置等样式来试验，在不改变hover伪类链接的前提下，都无法得到正常情况下应得到的效果。从而可以得知：在包含选择符有伪类链接时，存在着CSS样式无效的bug，希望CSS下一版中能修正这个错误。a:hovertext-decoration:none;border:none;这样我们可以知道，在hover伪类链接中必须包含某些特殊的CSS属性声明才能消除这个bug。我用了CSS里所有的属性声明来尝试解决这个bug，发现只有一下几项属性声明能解决这个问题。borderdisplaypostionoverfilowbackground而我之所以采用“border:none”这种方法，是因为它还能从Netscape4中消除一些不同的CSS错误。注：本文所提及的bug在IE5.5、IE6.0中均存在。 自定多姿多彩的网页链接下划线CSS本身没有直接提供变换HTML链接下划线的功能，但只要运用一些技巧，我们还是可以让单调的网页链接下划线变得丰富多彩。一、基本原理首先，自定义HTML链接下划线的第一步是创建一个图形，在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景，可以使用透明的.gif图形。其次，如果下划线图形的高度较大，则必须适当增加文本的高度，使得一行文本的底部与下一行文本的顶部之间有较大的空间，例如pline-height:1.5;。自定义链接下划线示例第三，为显示出自定义的下划线，必须隐藏默认的下划线，即atext-decoration:none;。第四，为链接元素设置下划线图形，构造出自定义的下划线。假设下划线图形是underline.gif，则设置下划线图形的CSS代码为abackground-image:url(underline.gif);。第五，我们要让下划线图形在水平方向反复出现，但不能在垂直方向重复出现，否则它将被隐藏到文本的背后。要求下划线只在水平方向重复出现的代码为：abackground-repeat:repeat-x;。第六，为保证图形出现在链接文字的下方（不管字体的大小），用background-position属性将图形放在链接元素的底部。对于箭头之类的下划线图形，可能还要考虑图形在水平方向的对齐方向。假设要将下划线图形放在右下角，CSS代码为：abackground-position:100%100%;。第七，为了在链接文本的下方给自定义图形留出空间，必须加入适当的空白。下划线图形相对于链接文字的具体位置与文字的大小有关，但一般而言，可以先让底部空白等于下划线图形的高度，必要时再作调整。例如：apadding-bottom:4px;。第八，由于下划线图形放在链接元素的底部，必须保证链接不折行（如允许链接跨越多个行，则只有下面一行的链接文本下面会有自定义的下划线）。用CSS的white-space属性可以防止链接文字折行，即awhite-space:nowrap;。综上所述，为链接元素定义CSS样式属性的完整例子如：atext-decoration:none;background:url(underline.gif)repeat-x100%100%;padding-bottom:4px;white-space:nowrap;如果要让自定义下划线只在鼠标停留时出现，只要把原来直接设置在链接元素上的CSSbackground属性改到:hover，例如：atext-decoration:none;padding-bottom:4px;white-space:nowrap;a:hoverbackground:url(underline.gif)repeat-x100%100%;二、实例欣赏假设有两个下划线图形diagonal.gif（波纹线）、flower.gif（花朵）前者的高、宽是3、9，后者的高、宽是11、15。下面是一个设置两种下划线的完整实例：自定义链接下划线举例网页源代码如下：注：diagonal.gif和flower.gif已经先拷贝到网页所在的同一目录下。exa#example1atext-decoration:none;background:url(diagonal.gif)repeat-x100%100%;white-space:nowrap;padding-bottom:2px;a#example1btext-decoration:none;white-space:nowrap;padding-bottom:2px;a#example1b:hoverbackground:url(diagonal.gif)repeat-x100%100%;a#example2atext-decoration:none;back