Question

我试图运行我的html文件，但它不知道css文件在哪里。我的桌面上有两个文件index.html和style.css。这就是我的index.html文件的样子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="./style.css" rel="stylesheet" type="text/css"/>
  </head>

  <section class="header">
    // lots of info here
  </section>

我的css有所需的所有东西。

但是html没有连接到css文件

这是我的style.css的一部分如何：

  .user {

& {
  width: 300px;
  margin-left: auto;

  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}

i {
  font-size: $large;

  &:hover {
    color: $white;
    cursor: pointer;
  }
}

&__notifications {}

&__inbox {}

 ...

Answer 1

如果文件位于同一目录中，则应使用style.css作为href（不带任何前导斜杠或点）。并且不要忘记在最后关闭<body>和<html>标记。

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>

  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <section class="header">
    //lots of info here
  </section>
</body>

</html>

＆＃13;

此外，看起来你的CSS实际上是用预处理语言（可能是SCSS）编写的。您应该删除所有变量（$...）并展平所有嵌套选择器（&）。

＆＃13;

.user {
  width: 300px;
  margin-left: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}

.user i {
  font-size: 10em; /* or whatever $large was */
}

.user i:hover {
  color: #fff; /* or whatever $white was */
  cursor: pointer;
}

.user__notifications {}

.user__inbox {}

＆＃13;

Answer 2

在<section>代码中的<head>代码后包裹您的<body>以及其他html元素。
将scss代码重新编译为css。

无法将html连接到css

2 个答案: