Question

这是一项作业，我需要将CSS保存在单独的文件中。如果将它们保存在同一个文件中，则网站将正常运行，但是如果将它们单独保存，则“ body”中的属性根本不会显示。

我的html代码：

    <!DOCTYPE html>
<html>

<head>

  <link href="styles.css" rel="stylesheet" type="text/css">
    <title>Jake's Coffee Shop</title>

</head>

<body>

  <h1> Jake's Coffee Shop </h1>

<div class="links">
    links
</div>


<div class="content">

    <div class="para">
        text

    </div> 

</div>

<div class="footer">

    <p> Copyright © 2011 Jake's Coffee House<br></p>

</div>  
</body>
</html>

我的CSS代码：

<style type="text/css">

body {
    background-color:#ffffcc;       
    font-family:verdana;        
}

...


</style>

Answer 1

链接的CSS文件中不应包含标签。它应该仅仅是css。另外，请确保链接中的href正确指向样式表。

Answer 2

尝试从css文件中删除<style>标签。

Answer 3

从您的CSS内容中删除<style type="text/css">和</style> ...

，还有三个点，例如...

您的CSS仅应在此处包括以下代码：

body {
    background-color:#ffffcc;       
    font-family:verdana;        
}

Answer 4

除了此处的其他答案外，请考虑将./styles.css用于href

Answer 5

您需要将<style>放在<head>中（在代码段下方），或者删除<style>标记并使用标记将样式表导入头部：

从单独的文件导入样式

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

style.css是带有样式文件路径的名称。

您可以阅读有关here或here的信息。

在`<head>`中放置样式：

<!DOCTYPE html>
<html>

<head>
  <link href="styles.css" rel="stylesheet" type="text/css">
  <title>Jake's Coffee Shop</title>
  <style type="text/css">
    body {
      background-color: #ffffcc;
      font-family: verdana;
    }
  </style>
</head>

<body>
  <h1> Jake's Coffee Shop </h1>
  <div class="links">
    links
  </div>
  <div class="content">
    <div class="para">
      text
    </div>
  </div>
  <div class="footer">
    <p> Copyright © 2011 Jake's Coffee House<br></p>
  </div>
</body>

</html>

如果将CSS放在单独的文件中，则body标记中的属性不起作用

5 个答案:

从单独的文件导入样式

在`<head>`中放置样式：

如果将CSS放在单独的文件中，则body标记中的属性不起作用

5 个答案:

从单独的文件导入样式

在<head>中放置样式：

在`<head>`中放置样式：