将外部 .css 文件链接到 Html 页面

Question

我无法将我的外部文件 sheet 链接到单独的 html 页面。 .css 文件和 html 文件也在同一个文件夹中，但是当我运行它的内容只出现时。任何帮助表示赞赏。谢谢！

CSS代码

div
{
    border-radius:5px;
}

#header
{
    z-index:1;
    width:97.%;
    height:60px;
    background-color:red;
    margin-top:-20px;
    margin-bottom:10px;
    position:fixed;
}

#name
{
    float:left;
    margin-left:5px;
    padding-top:5px;
    font-size:16px;
    font-family:Verdana, sans-serif;
    color: #ffffff;
}

#email
{
    float:left;
    margin-left:5px;
    padding-top:5px;
    font-size:16px;
    font-family:Verdana, sans-serif;
    color: #ffffff;
}


#sidebar
{
    left:90px;
    top:160px;
    position:fixed;
    width:200px;
    height:600px;
    background-color:gray;
}

#content
{
    left:290px;
    top:160px;
    position:fixed;
    width:600px;
    height:600px;
    background-color:lightblue;
}

p
{
    padding-left: 50px;
    padding-top: 50px;
}

HTML代码

<!DOCTYPE html>

<head>
<link rel="stylesheet" type="text/css" href="homepage.css" />
<title>HTML Project</title>
</head>

<body>
    <div id="page">
        <div class="topNaviagationLink"><a href="index.html">Home</a></div>
        <div class="topNaviagationLink"><a href="index.html">About</a></div>
        <div class="topNaviagationLink"><a href="index.html">Portfolio</a></div>
        <div class="topNaviagationLink"><a href="index.html">Services</a></div>
        <div class="topNaviagationLink"><a href="index.html">Contact</a></div>
    </div>
    <div id="mainPicture">
        <div class="picture">
            <div id="headerTitle">Project</div>
            <div id="headerSubtext">HTML Project</div>
        </div>
    </div>
        <div class="contentBox">
        <div class="innerBox">
            <div class="contentTitle">The Title of an Article</div>
          <div class="contentText"><p>content </p><br />
        <p>Content.</p><br />
          <p>Other Content.</p></div>



    </div>

</body>
</html>

Answer 1

这就是您所需要的。请看那里。我注意到丢失了 div ，请检查您的代码。 http://jsfiddle.net/vo9hLzqf/

如果您觉得使用其他样式如#email #name 等有问题，请检查在 HTML 中是否设置了正确的类型

如果您的 css 是#email，您应该使用 <div id="email">%yourcode%</div> .email 将是 <div class="email">%yourcode%</div>

    <!DOCTYPE html>

<head>
<link rel="stylesheet" type="text/css" href="homepage.css" />
<title>HTML Project</title>
</head>

<body>
    <div id="page">
        <div class="topNaviagationLink"><a href="index.html">Home</a></div>
        <div class="topNaviagationLink"><a href="index.html">About</a></div>
        <div class="topNaviagationLink"><a href="index.html">Portfolio</a></div>
        <div class="topNaviagationLink"><a href="index.html">Services</a></div>
        <div class="topNaviagationLink"><a href="index.html">Contact</a></div>
    </div>
    <div id="mainPicture">
        <div class="picture">
            <div id="headerTitle">Project</div>
            <div id="headerSubtext">HTML Project</div>
        </div>
    </div>
        <div class="contentBox">
        <div class="innerBox">
            <div class="contentTitle">The Title of an Article</div>
          <div class="contentText"><p>content </p><br />
        <p>Content.</p><br />
          <p>Other Content.</p></div>


            </div>
</div>

将外部 .css 文件链接到 Html 页面

Linking external .css file to Html page

html

css

href

stylesheet