Html代码没有读取我的CSS样式脚本

时间:2014-04-05 03:58:11

标签: html css

我试图创建一个标签栏,但css代码不是红色的。 我已经验证了html代码以及css代码,但我无法找到任何错误。

这是html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
        <head>

            <title> Canberras School Events Site </title>


            <link rel="styleSheet" type="text/css" ref="CSS/style.css"/>

        </head>

        <body>

            <div id="tabs">

                <ul>
                    <li id="Selected"><a href="Index.html">HOME</a>
                    <li class="NotSelected"><a href="Pages\Events.html">EVENTS</a></li>
                    <li class="NotSelected"><a href="Pages\Places.html">PLACES</a></li>
                    <li class="NotSelected"><a href="Pages\Accommodation.html">ACCOMMODATION</a></li>
                    <li class="NotSelected"><a href="Pages\ContactUs.html">CONTACT US</a></li>
                </ul>

            </div>

        </body>

    </html>

和css

body {
background-color: #f0ff00;
}

/* border for the 1366 x 768 (height will change so you may have a scroll bar) */


/*This is the tabs*/

#tabs ul {
    list-style: none;
    padding:0;
    margin:0;
    position: absolute;
    top:  5px;
    right: 10px;
    left: 200px;
    }

#tabs li {

    display: inline;
    border: 1px solid;
    border-bottom-width: 1px;
    margin: 0 0.5em 0 0;    
}

#tabs li a {
    padding: 0 1em;
}

#content {
    border: 1px solid;
    clear: both;
}
#tabs #Selected {
    padding-bottom: 1px;
    background: #0101c3;
    color: #f0ff00;
}
.NotSelected{
    padding-bottom: 1px;
    background: #fff;
    color: #000000;
}

甚至没有背景出现。

2 个答案:

答案 0 :(得分:2)

您似乎在此行中省略了h

<link rel="styleSheet" type="text/css" ref="CSS/style.css"/>
                                       ^ should be href

答案 1 :(得分:1)

href而非ref

改变这个:

<link rel="styleSheet" type="text/css" ref="CSS/style.css"/>

到此:

<link rel="stylesheet" type="text/css" href="CSS/style.css" />