如何使用HTC文件来封装CSS样式_CSS教程_前端技术
您的位置： &
& 详细内容
css|htc|封装
下面通过创建一个鼠标滑过加亮显示的 HTC 来演示一下创建 HTC 的过程。 1、创建 HTC 文件的架构。一个标准的 HTC 文件含有一个 SCRIPT 块和一对可选的 COMPONENT 标记。 &PUBLIC:COMPONENT& &SCRIPT& &/SCRIPT& &/PUBLIC:COMPONENT&2、写一个可执行的脚本。在下面的代码中，ATTACH 被用于设置 HTC 接收元素在 onmouseover 和 onmouseout 事件被触发的消息。它通知 HTC 通过切换颜色来体现鼠标滑过元素时的加亮效果。 &PUBLIC:COMPONENT& &PUBLIC:ATTACH&EVENT="onmouseover"&ONEVENT="Hilite()"&/& &PUBLIC:ATTACH&EVENT="onmouseout"&ONEVENT="Restore()"&/& &SCRIPT&LANGUAGE="JScript"& var&normalColor,&normalS function&Hilite() { //&save&original&values normalColor&=&runtimeStyle.& normalSpacing=&runtimeStyle.letterS runtimeStyle.color&=&"red"; runtimeStyle.letterSpacing&=&2; } function&Restore() { //&restore&original&values runtimeStyle.color&=&normalC runtimeStyle.letterSpacing&=&normalS } &/SCRIPT& &/PUBLIC:COMPONENT&将上面保存为hilite.htc文件。注意：您可以直接使用属性、方法或者是事件的名称来访问它们，并不需要在前面加上 element 的前缀。在前面的例子中我们注意到在切换颜色时我们直接调用了 runtimeStyle ，而不是使用 element.runtimeStyle。 3、一旦执行，这个 HTC 就能在网页中应用来达到鼠标滑过加亮的效果。 &HEAD& &STYLE& LI&{behavior:url(hilite.htc)} &/STYLE& &/HEAD&&P&Mouse&over&the&two&list&items&below&to&see&this&effect. &UL& &LI&网页教学网&/LI& &LI&&/LI& &/UL&&
( 01:38:44)
( 01:38:41)
( 01:38:37)
( 11:01:32)
( 11:01:21)
( 11:00:54)
( 11:00:49)
( 23:48:28)
相关排行总榜使用PIE.htc让IE6\7\8支持CSS3部分属性 - 简书
使用PIE.htc让IE6\7\8支持CSS3部分属性
万恶的IE内核浏览器，这是多少前端程序员头疼的事情。。。今天给大家介绍一下如何用 PIE.htc 来让IE浏览器支持CSS3的border-radius、box-shadow、CSS3 Backgrounds (-pie-background)、Gradients、RGBA属性。
会的朋友提供一下建议，不会的朋友学习一下。
下载地址：
要使用 PIE 应用就要先把它引进来，这里不是在 html 文件里面引入，而是在 css 文件里面使用 behavior 来对文件进行导入。这里会涉及到一个路径的问题。比如 当前文件在“/”下 ，CSS文件在“/CSS”下，PIE.htc在“/CSS”下，behavior: url(/css/PIE.htc)而不是behavior: url(PIE.htc) 。
ps ：PIE.htc URL路径是相对于当前HTML文件，不是CSS文件.
以下代码都是基于下面这段公共的样式进行编写：
div{text-align:border: 1px solid #204D74;width: 200height: 100line-height: 100}
1. border-radius 圆角
.borderRadius{
border-radius: 10
-webkit-border-radius: 10
-moz-border-radius: 10
background: #ABCDEF;
behavior: url(css/PIE.htc);
运行效果图
ps ：不支持单边的圆角属性，比如： border-top-left-radius，但是你可以这样来写：
.borderRadius{
border-radius: 0px 20px 0px 20
-webkit-border-radius: 0px 20px 0px 20
-moz-border-radius: 0px 20px 0px 20
background: #ABCDEF;
behavior: url(css/PIE.htc);
运行效果图
2 . box-shadow 盒子阴影
.boxShadow{
box-shadow: 10px 10px 10px #000;
-webkit-box-shadow: 10px 10px 10px #000;
background: #ABCDEF;
behavior: url(css/PIE.htc);
运行效果图
3 . CSS3 Backgrounds 背景渐变
.linearGradient{
background: -webkit-gradient(linear, 0 0, 0 100%, from(#0000FF) to(#ABCDEF)); /*old webkit*/
background: -webkit-linear-gradient(#0000FF, #ABCDEF); /*new webkit*/
background: -moz-linear-gradient(#0000FF, #ABCDEF); /*gecko*/
background: -ms-linear-gradient(#0000FF, #ABCDEF); /*IE10*/
background: -o-linear-gradient(#0000FF, #ABCDEF); /*opera 11.10+*/
background: linear-gradient(#0000FF, #ABCDEF); /*future CSS3 browsers*/
-pie-background: linear-gradient(#0000FF, #ABCDEF); /*PIE*/
behavior: url(css/PIE.htc);
运行效果图
ps ：只支持linear-gradient（线性渐变）
background: rgba(0,0,0,.6);
-pie-background: rgba(0,0,0,.6);
behavior: url(css/PIE.htc);
黑色背景，透明值为60%
ps：不支持box-shadow
5 . IE6 下的 png 图片的透明问题
-pie-png-fix:
behavior: url(/PIE.htc);
background-image:url(img.png);
-pie-background:url(img.png);
behavior: url(/PIE.htc);
ps：图片直接用-pie-png-fix: true，背景图片使用-pie-background来修复IE6下png透明的问题
由于我这边没有IE6内核的浏览器，所以这个就无法测试给大家看了，要是有兴趣的可以自己试试看。不过我觉得这个也没有那么重要了，毕竟IE6基本都被舍弃了，现在很多公司最旧的版本也就兼容到IE7，再老的就变成老古董了。
6 . background-size 背景包含补充
.backgroundSize{
background:#ABCDEF url(wait.png) center no-
background-size:
/*behavior: url(css/backgroundsize.min.htc);*/
behavior: url(css/backgroundsize.min.htc);
没有加htc的效果
加htc运行效果图
框框的宽高的是200x100，图片的宽高是180x180，这样图片的高就超过了框的边界，如果使用背景图片就要使用到background-size来让背景图片被包含，但是IE9以下是不支持的。
以上的是我暂时对PIE的用法的一个理解，要是有更多的用法，请给我留言！如有更多知识，会继续补充！
好记性不如烂笔头，学一点记一点，菜鸟程序员成长记！CSS配合htc文件巧妙应用实现反转按钮，按钮表单，网页特效库――资料库
CSS配合htc文件巧妙应用实现反转按钮
相关特效代码
无相关信息
热门特效代码
推荐特效代码如何使用HTC文件来封装CSS样式-Css
PUBLIC:COMPONENT SCRIPT /SCRIPT /PUBLIC:COMPONENT PUBLIC:COMPONENT PUBLIC:ATTACHEVENT="onmouseover"ONEVENT="Hilite()"/ PUBLIC:ATTACHEVENT="onmouseout"ONEVENT="Restore()"/ SCRIPTLANGUAGE="JScript" varnormalColor,normalS functionHilit
　　&PUBLIC:COMPONENT& &SCRIPT& &/SCRIPT& &/PUBLIC:COMPONENT&
　　&PUBLIC:COMPONENT& &PUBLIC:ATTACH&EVENT="onmouseover"&ONEVENT="Hilite()"&/& &PUBLIC:ATTACH&EVENT="onmouseout"&ONEVENT="Restore()"&/& &SCRIPT&LANGUAGE="JScript"& var&normalColor,&normalS function&Hilite() { //&save&original&values normalColor&=&& normalSpacing=&runtimeStyle.letterS lor&=&"red"; runtimeStyle.letterSpacing&=&2; } function&Restore() { //&restore&original&values lor&=&normalC runtimeStyle.letterSpacing&=&normalS } &/SCRIPT& &/PUBLIC:COMPONENT&
　　&HEAD& &STYLE& LI&{behavior:url(hilite.htc)} &/STYLE& &/HEAD&
　　&P&Mouse&over&the&two&list&items&below&to&see&this&effect. &UL& &LI&网页教学网&/LI& &LI&&/LI& &/UL&&
你最喜欢的下面通过创建一个鼠标滑过加亮显示的 HTC 来演示一下创建 HTC 的过程。 1、创建 HTC 文件的架构。一个标准的 HTC 文件含有一个 SCRIPT 块和一对可选的 COMPONENT 标记。
&PUBLIC:COMPONENT& &SCRIPT& &/SCRIPT& &/PUBLIC:COMPONENT&
2、写一个可执行的脚本。在下面的代码中，ATTACH 被用于设置 HTC 接收元素在 onmouseover 和 onmouseout 事件被触发的消息。它通知 HTC 通过切换颜色来体现鼠标滑过元素时的加亮效果。
&PUBLIC:COMPONENT& &PUBLIC:ATTACH&EVENT="onmouseover"&ONEVENT="Hilite()"&/& &PUBLIC:ATTACH&EVENT="onmouseout"&ONEVENT="Restore()"&/& &SCRIPT&LANGUAGE="JScript"& var&normalColor,&normalS function&Hilite() { //&save&original&values normalColor&=&runtimeStyle.& normalSpacing=&runtimeStyle.letterS runtimeStyle.color&=&"red"; runtimeStyle.letterSpacing&=&2; } function&Restore() { //&restore&original&values runtimeStyle.color&=&normalC runtimeStyle.letterSpacing&=&normalS } &/SCRIPT& &/PUBLIC:COMPONENT&
将上面保存为hilite.htc文件。
注意：您可以直接使用属性、方法或者是事件的名称来访问它们，并不需要在前面加上 element 的前缀。在前面的例子中我们注意到在切换颜色时我们直接调用了 runtimeStyle ，而不是使用 element.runtimeStyle。
3、一旦执行，这个 HTC 就能在网页中应用来达到鼠标滑过加亮的效果。
&HEAD& &STYLE& LI&{behavior:url(hilite.htc)} &/STYLE& &/HEAD&
&P&Mouse&over&the&two&list&items&below&to&see&this&effect. &UL& &LI&网页教学网&/LI& &LI&&/LI& &/UL&&
??????????