CSS 基本文件未加载 HTML

Question

这是非常基本的代码，因为我还是个初学者，我无法通过 OSX.

上的括号将其加载到 Chrome

当我在本地加载文件时，它会显示所有内容，但 CSS 未加载，其他一切正常。

到目前为止我的故障排除：

index.html 和我的 tutoringservices.html 与 style.css.
我已经保存并重新启动了我的计算机，以确保这不是刷新问题
清除了 Chrome 的缓存以确保 CSS 被正确加载
我已经从 w3schools.com 和其他基本网站复制粘贴了 CSS 代码，以确保基本代码能够正常运行。除了 .button 样式，我删除了所有内容，因为这是我最初尝试解决的问题，而不是字体导入。

我不知道如何通过 Brackets 打开 Firefox，所以我没有加载 Firebug。

我还没有将 CSS 链接到我的 index.html，因为理论上它应该可以在 tutoringservices.html 上正常工作。这是我的代码：

tutoringservices.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Contact</title>
    
    <link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
   
    <link href="./style.css" rel="stylesheet" type="text/css" media="screen, projection"/>
    
    
</head>

<body>
    
    <header>
      <a href="index.html">Home</a>

    </header>
  <main>
      <h1>Get in Touch</h1>
      <hr>
      <p>
          Thank you for your interest. Inquiries usually receive a response within 24 hours. 
          <br>If you do not receieve a timely response, please feel free to send another!</p>
      
    <form class="contact-form" action="contactform.php" method="post">
      <input type="text" name="name" placeholder="Full name">
        <br><br>
      <input type="text" name="mail" placeholder="Your E-Mail">
        <br><br>
      <input type="text" name="phone" placeholder="Phone Number (optional)">
        <br><br>
      <input type="text" name="subject" placeholder="Subject">
        <br><br>
      <textarea name="message" placeholder="Message"></textarea>
        <br><br>
      <button type="submit" name="submit">SEND</button>
    </form>
  </main>
</body>
</html>

style.css

@charset "UTF-8";

.paragraph {
    font-size: 50px;
    line-height: 62px;
    font-family: 'Amatic SC', cursive;
}

font-family: 'Amatic SC', cursive;

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

很乐意回答任何其他问题，感谢您抽出时间。

Answer 1

css 文件中的 .name 表示它正在为 class 设置样式，但 classes 未在 HTML 文件中使用。所以 .button 意味着它为按钮 class 而不是按钮元素设置样式。两个选项：

通过移除点
来设置元素样式而不是 class

将 class 添加到 css 文件，例如在按钮上：

  <button class="button" type="submit" name="submit">SEND</button>

Answer 2

好的，我看到的问题（假设 css 文件的目录是正确的）是您在 css 代码中引用 classes ".paragraph"和 html 代码中不存在的“.button”。当您在 css 中引用 html 的某些部分时，您可以按如下方式进行：

对于 id ex:

html

<div id="my_id">

css

#my_id{}

- "." class

html

`<div class="my_id">`

css

`.my_id{}`

- 只是标签本身的标签名称

html

`<div>`

css

`div {}`

you must be careful when referring by tag names.

Answer 3

在您的 HTML 代码中使用类。例如，在 CSS 中使用 .paragraph - 所以在 HTML 中也使用它：<p class="paragraph">，按钮也是如此。
第二个问题更难发现，但更容易修复。您在 style.css 文件的第 9 行的任何选择器之外有一个任性的 CSS 声明。只需将其删除：

font-family: 'Amatic SC', 草书;

完成这两个修复，你就会成功。

Answer 4

如果 ./ 在 href="style.css" 的同一目录中，您不需要 ./。对于段落和按钮，您的 css 通过添加“.”将它们称为类。在他们面前。如果您只想通过 html 标签

来调用它们

p {
 // put style for all paragraph tags here
}
 
button {
 // put styling for all buttons here
}

CSS 基本文件未加载 HTML

CSS file not loading in basic HTML

html

css

loading

对于 id ex: