html - 我的 css 文件更改仅适用于 index.html 而不适用于其他 html 文件

问题描述

我在原子代码编辑器中输入了以下代码。我有一个名为HTML-Personal Site的文件夹，里面有我的index.html文件以及其他链接的 html 文件，名为Hobbies.html和Contact Info.html。在 HTML-Personal Site 文件夹中，我还有一个名为styles.css的 css 文件，我已将其链接到主 html 文件（index.html）。问题是我对我的 css 文件所做的更改仅适用于我的index.html文件，而不适用于其他 html 文件（链接到 index.html）。

这就是我将 index.html 链接到 styles.css（我的 css 文件）的方式：（请忽略代码中的大表）

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

<head>
  <meta charset="utf-8">
  <title> Soham's Personal Site</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <table cellspacing="20">
    <tr>
      <td><img src="Attack-on-titan-circle.png" alt="Attack on Titan"></td>
      <td>
        <h1>Soham dengra</h1>
        <p><em>A boy learning to code and make his <strong><a href="https://www.google.com/">1st website</a></strong>.</em></p>
        <p>I like reading  and listening to music music .</p>
      </td>
    </tr>
  </table>


  <hr>
  <h3>Education</h3>
  <ul>
    <li><a href="http://nalandapublicschool.org/">Nalanda Public School</a></li>
    <li>Secondary Section</li>
    <ul>
      <li>Class 10</li>
    </ul>
  </ul>

  <hr>

  <h3>Work experience</h3>
  <table cellspacing="10">
    <thead>
      <tr>
        <th>Dates</th>
        <th>Places</th>
      </tr>

    </thead>
    <tbody>

    </tbody>
    <tfoot>

    </tfoot>
    <tr>
      <td>2014-15</td>
      <td>Scouts and Guides</td>
    </tr>
    <tr>
      <td>2015-16</td>
      <td>Scouts and Guides</td>
    </tr>
  </table>

  <hr>

  <h3>Skills</h3>

  <table cellspacing="10">
    <tr>
      <td>Reading</td>
      <td>⭐⭐⭐⭐⭐&lt;/td>
    </tr>
    <tr>
      <td>General Knowledge</td>
      <td>⭐⭐⭐⭐</td>
    </tr>
    <tr>
      <td>Sports</td>
      <td>⭐⭐⭐&lt;/td>
    </tr>
    </tbody>
  </table>

  <hr>

  <a href="Hobbies.html">Hobbies</a><br>
  <a href="Contact Info.html">Contact Information</a>
</body>

</html>

这是我的 css 文件（styles.css）：

body {
  background-color: #EAF6F6;
}



h1 {
  color: #66BFBF;
}

h3 {
  color: #66BFBF;
}

hr {
  border-style: none;
  border-top-style: dotted;
  border-color: grey;
  border-width: 5px;
  width: 5%;
}

这是我的另一个 html 文件（Contact Info.html）：

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

<head>
  <meta charset="utf-8">
  <title>Contact Me</title>
</head>

<body>
  <h1><em>This is my contact information.</em></h1>


  <ol>
    <li>Phone No : 123456789</li>
    <li>Email address : abcd@gmail.com</li>
    <li>Facebook : contact.facebook.com</li>
  </ol>
  <hr>
  <form class="" action="mailto:sohamdengra05@gmail.com" method="post" enctype="text/plain">
    <label>Your Name:</label>
    <input type="text" name="YourName" value=""><br>
    <label>Your Email:</label>
    <input type="email" name="YourEmail" value=""><br>
    <label>Your Message:</label><br>
    <textarea name="name" rows="10" cols="30"></textarea><br>
    <input type="submit" name="">
  </form>



</body>

</html>

这是我的第三个 html 文件（Hobbies.html）

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

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <h3>Hobbies</h3>
  <ol>
    <li>Reading</li>
    <ol type="i">
      <li>Fiction </li>
      <li>Sci-fi</li>
      <li>Fantasy</li>
      <li>Mystery</li>

    </ol>
    <li><a href="https://www.imdb.com/">Movies</a></li>
    <ol>
      <li>Sci-fi</li>
      <li>Mystery</li>
      <li>Adventure</li>
    </ol>
  </ol>


</body>

</html>

有人告诉我，链接问题是由 atom 中的错误引起的，我需要重新安装它，但后来我尝试在另一台电脑上运行 atom 中的相同文件，但仍然遇到同样的问题。所以请告诉我代码出了什么问题。我已经尝试解决问题，但我无法做到（我是编码的初学者）。希望你能够理解我的问题。谢谢

标签： htmlcssatom-editor

html - 我的 css 文件更改仅适用于 index.html 而不适用于其他 html 文件

问题描述

解决方案

推荐阅读