内部CSS不起作用

时间:2011-09-24 02:00:08

标签: css html5

我的内部css不适用于我的小代码。这似乎是一个非常愚蠢的问题,但我没有做任何帮助。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Ask Help</title>
<style type = "text/css">
@font-face {
font-family: "junction";
src: url("Junction_02.otf");
}

html {
background-image: linear-gradient(bottom, rgb(75,135,163) 2%, rgb(127,219,219) 54%);
background-image: -o-linear-gradient(bottom, rgb(75,135,163) 2%, rgb(127,219,219) 54%);
background-image: -webkit-linear-gradient(bottom, rgb(75,135,163) 2%, rgb(127,219,219)       54%);
background-image: -ms-linear-gradient(bottom, rgb(75,135,163) 2%, rgb(127,219,219) 54%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.02,   rgb(75,135,163)), color-stop(0.54, rgb(127,219,219))
}

.menu {
list-style-type: none;
font-size: 25px;
}

h1 {
font-family: junction;
text-size: 60px;
}
</style>
</head>
<body>
    <nav>
        <ul class="menu">
            <li><a href="index.html" title="Home">Home</a></li>
            <li><a href="about.html" title="About Us">About</a></li>
            <li><a href="past.html" title="iPod">Past Q&amp;A's</a></li>
        </ul>
    </nav>
</body>
</html>

1 个答案:

答案 0 :(得分:8)

这一行缺少一个影响你的标记的紧密括号)

background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.02,   rgb(75,135,163)), color-stop(0.54, rgb(127,219,219))

将其更改为:

background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.02,   rgb(75,135,163)), color-stop(0.54, rgb(127,219,219)));

您应该考虑使用W3C的 HTML CSS 验证工具来捕获这些问题。 HTML验证器不适合捕获不良CSS,因此您可以将嵌入式CSS复制粘贴到CSS验证器中。

哦,不妨在最后一个背景图片声明的末尾加上一个分号(我为你做了),因为如果你将来添加更多的行而忘记添加它会让你感到悲伤分号到前一行。