Question

非常简单的任务，由于某种原因似乎无法正常工作。在浏览器中查看时没有任何结果，我的样式未应用到HTML。我的样式表与html位于与主文档相同的文件夹中。我正在本地主机上预览chrome中的代码。不知道这里出了什么问题，将不胜感激。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="description" content="meta description placeholder example.">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="mystyles.css">
    <title>Web Start</title>
  </head>
  <body>
    <h1 class="main">test</h1>
    <header>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Home1</a></li>
          <li><a href="#">Home2</a></li>
          <li><a href="#">Home3</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

我的样式放置在名为mystyles.css的单独文档中

<style>
  .main {
    color: blue;
  }
</style>

Answer 1

在一个文件中测试：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="description" content="meta description placeholder example.">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <style>
    .main {
      color: blue;
    }
    </style>    
  <title>Web Start</title>
  </head>
  <body>
    <h1 class="main">test</h1>
    <header>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Home1</a></li>
          <li><a href="#">Home2</a></li>
          <li><a href="#">Home3</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

或者像Tushar所说的那样：从CSS文件中删除<style>和</style>

Answer 2

CSS文件的位置在哪里？为了使您的代码正确无误，它们必须位于同一文件夹中，否则，您需要使用../来告诉计算机要在哪个目录中查找每个目录，然后您需要告诉它要在哪里照管。，即。

../STYLES/main.css

Answer 3

u只需要删除使用链接标签预定义的开始和结束样式标签即可。更新您的mystyles.css

样式表未链接到文档

3 个答案: