HTML 未链接到外部 CSS 样式表

Question

这应该很简单。

我的 about.html 有一个名为 aboutstyle.css 的外部样式表 link。该代码包含在 head 元素中并与 html 文件名完全匹配。出于某种原因，虽然样式没有通过。

我在这里做错了什么？我的 index.html 文件具有与 link 完全相同的类型，但是那个文件正在 linking 到 style.css。索引文件显示了样式。

下面是我的HTML：

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>#</title>
  <link rel="stylesheet" type="text/css" href="aboutstyle.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
</head>


<body>

<!-- NAV -->
<div class="gray">
      <nav class="navbar">
        <div class="brand-title"><a href="index.html">Title</a></div>
        <a href="#" class="toggle-button">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </a>
        <div class="navbar-links">
          <ul>
            <li><a href="about.html">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </nav>
     </div>

<!-- PAGE CONTENT -->
<div class="Content">
  <div class="child_2"><img src="https://images.unsplash.com/photo-1518806118471-f28b20a1d79d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"> </div>
  <div class="child"><p>Hi there! ipsum dolor sit amet, consectetur adipiscing elit. Integer nisi orci, pretium suscipit malesuada vitae, auctor sed eros. Etiam turpis libero, accumsan ac mauris quis, vehicula porta purus. Aenean dignissim dignissim finibus. Nam egestas magna vel risus finibus, et venenatis neque suscipit. Nulla a molestie ligula. In porttitor lacus id arcu dapibus, a volutpat nibh congue. Pellentesque eu consectetur diam. Etiam sodales lacinia aliquam. Pellentesque convallis interdum orci a placerat. Praesent quis ultricies leo, sit amet sagittis ipsum. Sed eleifend nisi ante, consequat rhoncus turpis aliquam maximus. Suspendisse commodo purus quis nisi interdum consequat. Cras felis ex, bibendum ut ultricies vitae, dictum ac tortor.</p>
</div>

</div>

  <script  src="script.js"></script>


</body>
</html>

CSS:

* {margin: 0;
  padding: 0;}

.gray {
  background-color: #ebebeb;
}
.navbar {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    background-color: #ebebeb;
    color: #004e98;
    max-width: 1560px;
    margin: 0 auto;
}

/* BRAND TITLE CSS ALL PROPERTIES */

.brand-title {
    font-size: 1.7rem;
    margin: 1rem 1rem 1rem 30px;
    font-weight: bold;
    text-decoration: none;
/*     background-color: pink; */
/*leave margin, it affects space around ur name when mobile size*/
}

a:link {
  text-decoration: none;
  color: #004e98;
}

a:visited {
  color: #004e98;
}

/* BRAND TITLE CSS ALL PROPERTIES END */


.navbar-links {
    height: 100%;
}

.navbar-links ul {
    display: flex;    /*makes list horizontal, not vertical*/
    margin-right: 30px;
    padding: 0;
/*     background-color: yellow; */

}

.navbar-links li {
    list-style: none;
}

.navbar-links li a {
    display: block;
    text-decoration: none;
    color: #004e98;
    padding-left: 2rem;
    font-size: 1.2rem;
}

.navbar-links li a:hover {
    color: #ff6700;
}

.brand-title a:hover {
    color: #ff6700;
    text-decoration: none;
}

.toggle-button {
    position: absolute;
    top: 1.2rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background-color: pink;
}

.toggle-button .bar {
    height: 3px;
    width: 100%;
     background-color: #004e98;  /* color of individual bars*/
    border-radius: 10px;
}

@media (max-device-width: 640px) and (min-device-width: 320px) {
 .Content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-gap: 15px !important;
    margin: 20px auto !important;
    box-sizing: border-box !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
 }

 .brand-title {
     margin: 1rem 1rem 1rem 15px;
}

@media (max-width: 699px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .toggle-button {
        display: flex;

    }

    .navbar-links {
        display: none;
        width: 100%;
      background-color: white;
    }

    .navbar-links ul {
        width: 100%;
        flex-direction: column;
        margin-right: 0; /*this removes margin applied for large screens*/
    }

    .navbar-links ul li {
       text-align: center;
/*        background-color: #EC643E;  /*orange bkg color of drop down*/  */
    }

    .navbar-links ul li a {
      padding: 1rem 1rem;
/*       border-style: solid; */
/*       border-radius: 15px; */
      background-color: ;  /*blue button bkg*/
      margin: 0;
      color: #004e98;

    }

    .navbar-links.active {
        display: flex;
      background-color: #ebebeb;

    }

  .navbar-links li a:hover {
    background-color: #ff6700;  /*orange bar color upon hover*/
    color: white;
}

  .description {
    padding-left: 30px;
  }
}



.Content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 30px;
  max-width: 1500px;
  padding-left: 30px;
  padding-right: 30px;
  margin: 70px auto;
/*   background-color: #ffedba; */
}

.child {
/*   background-color: lightgreen; */
  color: white;
  place-items: left;

}

.child > p {
  color: black;
  font-family: helvetica-light;
  font-size: 1.5em;
  margin-bottom: 10px;
  line-height: 1.5em;

}


.child_2 {
  display: grid;
  place-items: top;
  background-color: pink;
  height: 700px;

}

img {
  width: 100%;
  height: 700px;
  object-fit: cover;
  border-radius: 15px;
}

/* Background Styles Only */

@import url('https://fonts.googleapis.com/css?family=Raleway');

* {
    font-family: Raleway;
}

Answer 1

尝试使用基本标签，如下所示：

<base href="/" target="_self">

并在 link href 的开始处添加斜杠，如下所示：

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

标签的文档在这里：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

Answer 2

正如用户 Taplar 所建议的，请先执行以下操作来调试您的问题。

在浏览器中打开您的开发者工具。
打开 Network 选项卡。
刷新您的页面。
在 Network 选项卡中查找您的 aboutstyle.css 请求。
检查请求头是否有错误。

如果您的文件没有被导入，这意味着 CSS 一开始就不会加载。要解决此问题，请检查文件的路径 href="aboutstyle.css"，并确保文件存在。

你的路径是aboutstyle.css;。由于没有 /，路径是相对于文件位置的，应该与您的 about.html 页面位于同一目录中。

如果您的文件正在导入，请检查您的选择器。我还看到有几种不同类型的选择器，例如 class、id 和 element 选择器中的 * 和 @media。检查您是否正在选择内容以按预期设置样式。您可以使用 developer tools inspector 检查您的元素是否正确继承了部分或全部样式。

如果部分或某些样式需要而其余部分没有，那么您的文档中的某些内容写错了，导致它损坏。检查损坏的选择器中的语法错误。从文档顶部的第一个损坏的选择器开始；这可能是罪魁祸首。

如果是您的 media queries 导致了问题，那么也有可能是您在其中插入了错误的样式。检查以确保所有将生效的选择器都属于那里。您可以使用 developer tools 更改尺寸以检查这一点。

* 影响文档中的所有元素，而 media queries 只会影响其参数特定的元素。如果内容在某些维度上比其他维度更有效，请检查以确保您的选择器位于右侧 media queries.

Answer 3

您代码中的媒体查询：

@media (max-device-width: 640px) and (min-device-width: 320px) { ...

...打开，但从未关闭。（即缺少结束 } 括号）

由于后续媒体查询 @media (max-width: 699px) {... 甚至嵌套在前一个中（如前所述，它永远不会关闭），这只会导致不稳定结果 - 如果 any.

因此 @media (max-device-width: 640px) and (min-device-width: 320px) { ... 之后的所有规则仅适用于较小的屏幕宽度（即移动设备），甚至根本不适用。

按照您的意愿修复媒体查询的右括号，您应该已设置好。

HTML 未链接到外部 CSS 样式表

HTML not linking to external CSS stylesheet

html

css

external

stylesheet

media-queries