[英]Issues in validating CSS3
Here is my CSS3 code. 这是我的CSS3代码。
body
{
background-color: #fdf4d5;
font-family: "Times New Roman", Times, serif;
font-size: 100%;
line-height: 1.5;
text-align: left;
}
a
{
text-decoration: none;
}
a:link, a:visited
{
color: #C80000;
}
a:active
{
background-color: #C80000;
color: #FFF;
}
.body
{
clear: both;
margin: auto;
width: 70%;
}
.mainHeader img
{
height: auto;
margin: 0 0;
width: 100%;
}
.mainHeader nav
{
background-color: #faa01e;
border-radius: 5px;
height: 60px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.mainHeader nav ul
{
list-style: none;
margin: 0 auto;
}
.mainHeader nav ul li
{
color: #FFF;
display: inline;
float: left;
}
.mainHeader nav a:link, .mainHeader nav a:visited
{
color: #FFF;
display: inline-block;
height: 30px;
padding: 15px 80px;
}
.mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a.visited
{
background: #C80000;
color: #FFF;
text-shadow: none;
}
.mainHeader nav ul li a
{
border-radius: 5px;
height: 60px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.mainContent
{
border-radius: 5px;
line-height: 25px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.content
{
border-radius: 5px;
float: left;
moz-border-radius: 5px;
webkit-border-radius: 5px;
width: 70%;
}
.content img
{
border-radius: 5px;
height: auto;
margin: 0 0;
moz-border-radius: 5px;
webkit-border-radius: 5px;
width: 100%;
}
.content p:first-letter
{
text-transform: uppercase;
}
.content p
{
color: #000;
font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
font-size: 14pt;
font-variant: small-caps;
letter-spacing: 0.1em;
line-height: 145%;
margin: 40px auto;
text-align: left;
text-transform: lowercase;
}
.bottomContent
{
border-radius: 5px;
moz-border-radius: 5px;
padding: 3% 0;
webkit-border-radius: 5px;
}
.boxOne
{
border-radius: 5px;
float: left;
moz-border-radius: 5px;
webkit-border-radius: 5px;
width: 30%;
}
.boxTwo
{
border-radius: 5px;
float: left;
moz-border-radius: 5px;
webkit-border-radius: 5px;
width: 30%;
}
.boxOne img
{
border-radius: 5px;
height: auto;
margin: 0 0;
moz-border-radius: 5px;
webkit-border-radius: 5px;
width: 100%;
}
.boxTwo img
{
border-radius: 5px;
height: auto;
margin: 0 0;
moz-border-radius: 5px;
webkit-border-radius: 5px;
width: 100%;
}
.mainFooter
{
background-color: #FAA01E;
border-radius: 5px;
float: left;
margin: 2% 0;
moz-border-radius: 5px;
webkit-border-radius: 5px;
width: 100%;
}
.mainFooter p
{
color: #FFF;
float: right;
margin: 2% auto;
width: 92%;
}
I have used the following website to validate the code. 我使用以下网站验证代码。 http://jigsaw.w3.org/css-validator/validator
http://jigsaw.w3.org/css-validator/validator
Once I validated it I have received lot of errors.In fact 22 errors and 10 warnings! 一旦我验证它,我收到了很多错误。事实上22个错误和10个警告! I'm a newbie who is learning html5 and css3 on my own.I'm really happy I have come this far.But I need some help from experts like you to correct the errors.
我是一个自己学习html5和css3的新手。我真的很开心我已经走到这一步了。但是我需要像你这样的专家帮助纠正错误。 I just corrected my html5 code relating to this css3 code with some help from this forum.But it had only 1 error.But this is too much.
我刚刚在这个论坛的帮助下纠正了与这个css3代码有关的html5代码。但它只有1个错误。但这太多了。 What went wrong?
什么地方出了错? Please help me.Thank you very much.
请帮帮我。非常感谢你。
The issue is that you are using proprietary properties without a -
before their names, so you need to do that. 问题是你使用的专有属性没有
-
在它们的名字之前,所以你需要这样做。
For example moz-border-radius
should be 例如,
moz-border-radius
应该是
-moz-border-radius
--^--
same goes for -webkit
properties as well, so webkit-border-radius
should be 同样适用于
-webkit
属性,因此webkit-border-radius
应该是
-webkit-border-radius
--^--
Also, you can click on More Options to get a precised validation. 此外,您可以单击“ 更多选项”以获得精确验证。
You are using the wrong properties for your Mozilla and Webkit compatibility. 您使用错误的属性来实现Mozilla和Webkit的兼容性。
You have: 你有:
moz-border-radius:
webkit-border-radius:
And it should be 它应该是
-moz-border-radius:
-webkit-border-radius:
Actually you can just use border-radius
. 实际上你可以使用
border-radius
。 But that's where the errors are coming from. 但这就是错误的来源。
Validator complains about usage of incorrect prefixes moz-
and webkit-
. Validator抱怨使用了错误的前缀
moz-
和webkit-
。 You should add dashes in front of them. 你应该在它们前面加上破折号。 But better remove them all together.
但最好将它们全部一起移除。 So the next rules are not needed:
所以不需要下一个规则:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
and you can safely use 你可以安全地使用
border-radius: 5px;
unless you want to support couple of old browsers. 除非你想支持几个旧的浏览器。 All modern browsers support
border-radius
without prefixes. 所有现代浏览器都支持没有前缀的
border-radius
。 See support here . 请参阅此处的支持
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.