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" onfocus="this.blur()">link1</a>
<a href="link2.htm" onfocus="this.blur()">link2</a>
<a href="link3.htm" onfocus="this.blur()">link3</a>
采用expression的做法如下:
<style type="text/css">
a {star : expression(onfocus=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(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}
</style>
<style type="text/css">
input {star : expression(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}
</style>
<input type="text">
<input type="text">
<input type="text">
可结果却是出现脚本出错,正确的写法应该把CSS样式的定义写进函数内,如下所示:
<style type="text/css">
input {star : expression(onmouseover=function()
{this.style.backgroundColor="#FF0000"},
onmouseout=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"); }
pseudo-class伪类:
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');}
分享到:
相关推荐
前端开源库-has-pseudo-class具有伪类,确定选择器是否包含伪类
@ shimyshack / tailwindcss-pseudo-element-plugin 提供一个插件before和after的变体以及pseudo-content-{value}实用工具类,顺风CSS。 安装 从npm安装插件: # Using npm npm install @shimyshack/tailwindcss-...
npm install stylelint-selector-pseudo-class-lvhfa --save-dev 用法 将此配置添加到您的.stylelintrc : { " plugins " : [ " stylelint-selector-pseudo-class-lvhfa " ], " rules " : [ " plugin/...
PostCSS伪类任何链接 使您可以按照规范在CSS中使用:any-link伪类。 nav :any-link > span { background-color : ...npm install postcss-pseudo-class-any-link --save-dev 使用处理CSS: const postcssPseudo
前端开源库-pseudo-elements伪元素,所有CSS伪元素的列表。
CSS 伪类(Pseudo-classes) CSS伪类是用来添加一些选择器的特殊效果。 语法 伪类的语法: selector:pseudo-class {property:value;} CSS类也可以使用伪类: selector.class:pseudo-class {property:value;} ...
tailwindcss-pseudo-elements TailwindCSS插件,添加伪元素的变体( ::before , ::after , ::first-letter等)。 用法 安装 NPM npm install tailwindcss-pseudo-elements --save-dev 纱 yarn add tailwindcss-...
Pseudo-Mask Matters in Weakly-Supervised Semantic Segmentation
input { /* style an input */}input : blank { /* style an input without a value */}用法在命令行中,转换使用:blank选择器CSS文件: npx css-blank-pseudo SOURCE.css TRANSFORMED.css 接下来,将转换后CSS与...
例子 查看范例克隆git clone git@github.com:chantastic/map-pseudo-classes.git : git clone git@github.com:chantastic/map-pseudo-classes.git cd 进入你的新副本: cd map-psuedo-classes 启动服务器python -m ...
将所有不同的伪选择器添加为变体安装NPM npm install tailwindcss-pseudo-selectors --save-dev纱yarn add tailwindcss-pseudo-selectors -D用法配置将插件添加到您的tailwind.config.js (按照中的进行)。...
2016_Pseudo-Random High-Frequency Square-Wave Voltage Injection Based Sensorless Control of IPMSM Drives for Audible Noise Reduction 王教授的论文 2016_Pseudo-Random High-Frequency Square-Wave ...
Hadoop分布式环境搭建教程一
前端开源库-pseudo-classes伪类,获取所有CSS伪类的列表。
面向信息检索的群体伪相关反馈技术,万小军,,伪相关反馈技术已经成功应用于改善信息检索质量。现有技术基于单一的搜索引擎(模型),并假设该引擎返回的顶端文档与查询相关。
This CSS Reference lists all standard CSS properties, pseudo-classes and pseudo-elements, @-rules, and selectors in alphabetic order. It allows you to quickly access detailed information for each of ...
PostCSS伪内容插入 插件,则会在您的:before和:after伪元素中插入一个空的内容块。 用他的向,以获取启发和...}用法postcss ( [ require ( 'postcss-pseudo-content-insert' ) ] ) 有关您的环境的示例,请参见文档。
前端开源库-pseudo-classes.zip
前端开源库-pseudo-elements.zip