程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何样式化HTML5 标签大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决如何样式化HTML5 标签?

开发过程中遇到如何样式化HTML5 标签的问题如何解决?下面主要结合日常开发的经验,给出你关于如何样式化HTML5 标签的解决方法建议,希望对你解决如何样式化HTML5 标签有所启发或帮助;

我在Webkit浏览器中使用以下代码对仪表进行了精细的渐变设计:

@H_675_5@meter { -webkit-appearance: none; } //Crucial, this will disable the default styling in Webkit browsers

meter::-webkit-meter-bar {
    BACkground: #FFF;
    border: 1px solID #CCc;
}

meter::-webkit-meter-optimum-value {
    BACkground: #87C7DE;
    BACkground: -moz-linear-gradIEnt(top, #a1d4e6 0%, #6bb4d1 100%);
    BACkground: -webkit-gradIEnt(linear, left top, left bottom, color-stop(0%, #a1d4e6), color-stop(100%, #6bb4d1));
    BACkground: -webkit-linear-gradIEnt(top, #a1d4e6 0%, #6bb4d1 100%);
    BACkground: -o-linear-gradIEnt(top, #a1d4e6 0%, #6bb4d1 100%);
    BACkground: -ms-linear-gradIEnt(top, #a1d4e6 0%, #6bb4d1 100%);
    BACkground: linear-gradIEnt(to bottom, #a1d4e6 0%, #6bb4d1 100%);
    filter: progID:DXImagetransform.Microsoft.gradIEnt(startcolorstr='#a1d4e6', endcolorstr='#6bb4d1',GradIEntType=0);
}

但是,css-Tricks的Chris CoyIEr 建议使用以下HTML代码:

@H_675_5@<div class="meter">
    <span style="wIDth: 25%"></span>
</div>

…而不是HTML5 @H_675_5@<meter>或@H_675_5@<progress>标记。在目前的时间点(2013年2月),我同意他的看法:

浏览器只是不似乎真的准备好接受新的HTML5标准标签@H_675_5@<meter>和@H_675_5@<progress>。话如此,我建议人们克服对未来直奔的渴望,而宁愿追求视觉上可行的东西,直到进一步注意。我还应该提到,在当前时间点上,当前浏览器对这些标签的支持率为53%……这对我来说不值得,但我将由您的项目自行决定。

解决方法

我想知道如何设置新@H_675_5@<meter>标签的样式。

@H_675_5@<meter value=80 min=0 max=100>
  80/100
</meter>

我只想更改背景颜色和值颜色,但找不到正确的CSS属性。对于基于Webkit的浏览器,我发现了以下这些:

@H_675_5@meter::-webkit-meter-horizontal-bar {
-webkit-appearance: meter;
BACkground: -webkit-gradient(linear,0% 0%,0% 100%,from(#DDD),color-stop(0.2,#EEE),color-stop(0.45,#CCC),color-stop(0.55,to(#DDD));
}
Pseudo element
meter::-webkit-meter-horizontal-optimum-value {
-webkit-appearance: meter;
BACkground: -webkit-gradient(linear,from(#AD7),#CEA),#7A3),to(#AD7));
}
Pseudo element
meter::-webkit-meter-horizontal-suboptimal-value {
-webkit-appearance: meter;
BACkground: -webkit-gradient(linear,from(#FE7),to(#FE7),#FFC),#DB3),#DB3));
}
Pseudo element
meter::-webkit-meter-horizontal-even-less-good-value {
-webkit-appearance: meter;
BACkground: -webkit-gradient(linear,from(#F77),to(#F77),#FCC),#D44),#D44));
}
Pseudo element
meter::-webkit-meter-vertical-bar {
-webkit-appearance: meter;
BACkground: -webkit-gradient(linear,100% 0%,to(#DDD),#CCC));
}
Pseudo element
meter::-webkit-meter-vertical-optimum-value {
-webkit-appearance: meter;
BACkground: -webkit-gradient(linear,to(#AD7),#7A3));
}
Pseudo element
meter::-webkit-meter-vertical-suboptimal-value {
-webkit-appearance: meter;
BACkground: -webkit-gradient(linear,#DB3));
}
Pseudo element
meter::-webkit-meter-vertical-even-less-good-value {
-webkit-appearance: meter;
BACkground: -webkit-gradient(linear,#D44));
}

在哪里可以找到基于壁虎的浏览器(Firefox),Opera和IE的正确CSS属性?

大佬总结

以上是大佬教程为你收集整理的如何样式化HTML5 标签全部内容,希望文章能够帮你解决如何样式化HTML5 标签所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。