我的CSS文件更改仅适用于index.html,不适用于其他html文件

问题描述

我已经在原子代码编辑器中键入了以下代码我有一个名为 HTML-Personal Site 文件夹,并且在其中有我的 index.html 文件以及其他链接的名为 Hobbies.html Contact Info.html 的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>⭐⭐⭐⭐⭐</td>
    </tr>
    <tr>
      <td>General KNowledge</td>
      <td>⭐⭐⭐⭐</td>
    </tr>
    <tr>
      <td>Sports</td>
      <td>⭐⭐⭐</td>
    </tr>
    </tbody>
  </table>

  <hr>

  <a href="Hobbies.html">Hobbies</a><br>
  <a href="Contact Info.html">Contact @R_918_4045@ion</a>
</body>

</html>

@H_502_30@

这是我的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%;
}

@H_502_30@

这是我的另一个html文件(联系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 @R_918_4045@ion.</em></h1>


  <ol>
    <li>Phone No : 123456789</li>
    <li>Email address : [email protected]</li>
    <li>Facebook : contact.facebook.com</li>
  </ol>
  <hr>
  <form class="" action="mailto:[email protected]" 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>

@H_502_30@

这是我的第三个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>

@H_502_30@

有人告诉我,链接问题是由原子中的错误引起的,我需要重新安装它,但随后我尝试在另一台PC上的原子中运行相同的文件,但仍然面临相同的问题。 因此,请告诉我代码出了什么问题。我已经尝试解决问题,但是我无法做到(我是编码方面的初学者)。希望您能够理解我的问题。 谢谢

解决方法

您的Contact.html文件不包含样式表文件。您需要添加到所有应使用该样式表的文件。

,

您必须为每个文件添加<link rel="stylesheet" href="css/styles.css">

,

将此代码从索引页面添加到其他页面。 进入头部。 例子

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

<head>
<link rel="stylesheet" href="css/styles.css">
  <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>
,

添加:

<link rel="stylesheet" href="css/styles.css">

访问所有三个html文件