CSS中expression/pseudo-class

IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。

　　固有属性赋值

　　例如，你可以依照浏览器的大小来安置一个元素的位置。

#myDiv {
position: absolute;
width: 100px;
height: 100px;
left: expression(document.body.offsetWidth - 110 + "px");
top: expression(document.body.offsetHeight - 110 + "px");
background: red;
}

#myTable tbody tr {
line-height: 24px;
background-color:expression((this.sectionRowIndex%2==0)?"#F4F8FF":"#E6EFF7");
}
　　自定义属性赋值

　　例如，消除页面上的链接虚线框。 通常的做法是：

<a href="link1.htm" οnfοcus="this.blur()">link1</a>
<a href="link2.htm" οnfοcus="this.blur()">link2</a>
<a href="link3.htm" οnfοcus="this.blur()">link3</a>

　　采用expression的做法如下：

<style type="text/css">
a {star : expression(οnfοcus=this.blur)}
</style>
<a href="link1.htm">link1</a>
<a href="link2.htm">link2</a>
<a href="link3.htm">link3</a>

　　说明：里面的star就是自己任意定义的属性，你可以随自己喜好另外定义，接着包含在expression()里的语句就是JS脚本，在自定义属性与expression之间可别忘了还有一个分号，因为实质还是CSS，所以放在style标签内，而非script内。这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意，如果触发的特效是CSS的属性变化，那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改，你可能想当然的会认为应该写为

<style type="text/css">
input
{star : expression(οnmοuseοver=this.style.backgroundColor="#FF0000";
οnmοuseοut=this.style.backgroundColor="#FFFFFF")}
</style>
<style type="text/css">
input {star : expression(οnmοuseοver=this.style.backgroundColor="#FF0000";
οnmοuseοut=this.style.backgroundColor="#FFFFFF")}
</style>
<input type="text">
<input type="text">
<input type="text">

　　可结果却是出现脚本出错，正确的写法应该把CSS样式的定义写进函数内，如下所示：

<style type="text/css">
input {star : expression(οnmοuseοver=function()
{this.style.backgroundColor="#FF0000"},
οnmοuseοut=function(){this.style.backgroundColor="#FFFFFF"}) }
</style>
<input type="text">
<input type="text">
<input type="text">

附滚动条定义

body {
margin: 0px;
background-color: #F4F8FF;
scrollbar-face-color:#F4F8FF;
scrollbar-highlight-color:#788DB4;
scrollbar-shadow-color:#788DB4;
scrollbar-3dlight-color:#CFE3F3;
scrollbar-arrow-color:#9BC8ED;
scrollbar-track-color:#F4F8FF;
scrollbar-darkshadow-color:#CFE3F3;
}

细边框表格
table {
border-collapse:collapse; /* 关键属性：合并表格内外边框*/
border:solid #999; /* 设置边框属性；样式(solid=实线)、颜色(#999=灰) */
border-width:1px 0 0 1px; /* 设置边框状粗细：上 右 下 左 = 对应：1px 0 0 1px */
}
table caption {font-size:14px;font-weight:bolder;}
table th,table td {
border:solid #999;border-width:0 1px 1px 0;padding:2px;
/* border-right:expression((this.cellIndex!=5) ? "1px solid #9BC2E0": "0px");
border-bottom:1px solid #9BC2E0;
border-left: 0px;
border-top: 0px;
height: 22pt;
*/
}
tfoot td {text-align:center;}

CSS对打印的控制：
<!--media=print 这个属性可以在打印时有效-->
<style media=print>
.Noprint{display:none;}
.PageNext{page-break-after: always;}
</style>
Noprint样式可以使页面上的打印按钮等不出现在打印页面上,PageNext样式可以设置分页，在需要分页的地方<div class="PageNext"></div>就OK了。

图片尺寸控制：
img{width:expression(this.width>500?"500px":this.width+"px"); }

[b]pseudo-class伪类：[/b]
1.锚的伪类

a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */ 
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */ 
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */ 
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */ 
a.red:link {color: #FF0000} 
a.red:visited {color: #0000FF} 
a.blue:link {color: #00FF00} 
a.blue:visited {color: #FF00FF} 

定义这些链接样式时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。
2.首字和首行（first-letter和first-line）伪类

p:first-letter {font-size: 300%}
div:first-line {color: red}

3.li中使用以块级显示元素

#my li{
    margin-left:52%;
}
#my li a{
    display:inline-block;
    width:70%;
    overflow:hidden;
    white-space:nowrap;

}
#my li i{
   width:30%;
   display:inline-block;
   text-align:center;
}

网站变成黑白(IE):

html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale='1');}