Question

我是Stack Overflow和Web开发的新用户。

我一直在寻找原因，为什么这个脚本不能正常运行但却没有得出结论。 CSS不会改变文本的颜色，位置，也不会改变字体系列。但是，html非常好。

我不知道为什么CSS不起作用，但我使用的是Mac OS X和Atom文本编辑器。

有人可以指导我解决这个问题吗？代码如下：

body {
  font-family: "Open Sans", sans-serif;
}

h1.title {
  color: #ccc;
  font-weight: 300;
}

figure {
  margin: auto;
}

.title {
  padding: 100px 0;
  max-width: 640px;
  text-align: center;
}

编辑，因为人们要求提供HTML。谢谢你的询问！这是：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="assets/stylesheets/Homepage Styling.css">
    <meta charset="UTF-8" />
    <meta name="author" content="Adrian" />
    <meta name="description" content="A portfolio of past works." />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Adrian's Portfolio</title>
  </head>

  <body>
    <div class="title">
      <h1>Clothing Store</h1>
      <hr />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nullam imperdiet urna ut purus ornare consequat.
        Donec sed mauris non urna bibendum rhoncus. Sed dignissim leo id pulvinar
        laoreet. Nam at finibus urna. Mauris fermentum quam nec tempor consequat.
        Aenean congue eros ipsum, ac fermentum lorem consectetur sit amet.
        Quisque porttitor ex eros, in feugiat nunc pretium sit amet.
        Vivamus dapibus nulla id eros malesuada varius.
      </p>
    </div>
  </body>
</html>

Answer 1

此CSS代码不会更改 H1 的颜色或重量，因为您使用“ title ”类将颜色应用于 H1 。但是在 H1 标记中没有“ title ”类。我认为其他属性工作正常。

将以下内容替换为正确的内容。

h1.title{
  color: red;
  font-weight: 300;
}

解决方案一：

h1{
  color: red;
  font-weight: 300;
}

解决方案二：

.title h1{
  color: red;
  font-weight: 300;
}

Answer 2

您尝试链接的样式表名称中有一个空格。再次使用下划线

我的CSS不会加载它的属性

2 个答案: