我的 css 文件更改仅适用于 index.html 而不适用于其他 html 文件
My css file changes are only applying to index.html and not to other html files
我在原子代码编辑器中输入了以下代码。我有一个名为 HTML-Personal Site 的文件夹,里面有我的 index.html 文件以及其他名为 Hobbies.html[=42= 的链接 html 文件] 和 联系 Info.html。在 HTML-Personal Site 文件夹中,我还有一个名为 styles.css 的 css 文件我已经链接到主 html 文件 (index.html) 的链接。问题是我对 css 文件所做的更改仅适用于我的 index.html 文件,并且不是其他 html 文件(链接到 index.html)。
这就是我将 index.html 链接到 styles.css 的方式(我的 css 文件):(请忽略代码中的大 table)
<!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 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 文件(联系 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>
这是我的第 3 个 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 中的相同文件,但仍然遇到同样的问题.
所以请告诉我 code.I 出了什么问题我已经尝试解决这个问题但我做不到(我是编码的初学者)。希望你能理解我的问题。
谢谢
您的 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 文件
我在原子代码编辑器中输入了以下代码。我有一个名为 HTML-Personal Site 的文件夹,里面有我的 index.html 文件以及其他名为 Hobbies.html[=42= 的链接 html 文件] 和 联系 Info.html。在 HTML-Personal Site 文件夹中,我还有一个名为 styles.css 的 css 文件我已经链接到主 html 文件 (index.html) 的链接。问题是我对 css 文件所做的更改仅适用于我的 index.html 文件,并且不是其他 html 文件(链接到 index.html)。
这就是我将 index.html 链接到 styles.css 的方式(我的 css 文件):(请忽略代码中的大 table)
<!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 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 文件(联系 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>
这是我的第 3 个 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 中的相同文件,但仍然遇到同样的问题. 所以请告诉我 code.I 出了什么问题我已经尝试解决这个问题但我做不到(我是编码的初学者)。希望你能理解我的问题。 谢谢
您的 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 文件