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

【问题标题】：Linking external .css file to Html page将外部 .css 文件链接到 Html 页面
【发布时间】：2015-03-28 17:57:12
【问题描述】：

我在将外部文件表链接到单独的 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>

【问题讨论】：

你忘记在最后一个
s 之后关闭一个 div。
HTML 上没有 id 标题或名称、电子邮件或侧边栏或内容 .... 唯一的样式可能是 p 标签的填充 ....
元素的 id 必须与 CSS 选择器匹配。即如果您在 HTML 中的 div id 是“page”，那么您的 CSS 中必须有 #page。

标签： html css stylesheet href

【解决方案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>

【讨论】：