英文:
When moving internal CSS to separate file, it works different -- now resolved
问题
I cut and pasted the <style> section from the code below into a different CSS file by replacing the section with <link rel="stylesheet" href="styles.css">, but it renders differently. Please tell me how to secure the original style even when I move them into a .css file.
现在我看到它正常工作了。对于混淆，对不起。
英文:
From the code below, I cut and pasted the <style> section into different css file by replacing the section with <link rel="stylesheet" href="styles.css">, but it renders differently. Please tell me how do I secure original style even when I moved them into a .css file.
--> Now I see it works fine. Sorry for the confusion folks.
Disclaimer: This code was generated by ChatGPT.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Provider Site</title>
<style>
/* Add your custom styles here */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #ffffff;
color: #e2b931;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
}
nav {
background-color: #c8beb8;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
nav ul li a:hover {
background-color: #ddd;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Data Provider Site</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<!-- Add your content here -->
<h2>Welcome to Our Data Provider Site</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et iaculis arcu. Duis sed nulla eu enim ullamcorper ultricies.</p>
</main>
<footer>
<p>&copy; 2023 Your Company. All rights reserved.</p>
</footer>
</body>
</html>
Original page
Page with separate .css file
styles.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #1e155e;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
}
nav {
background-color: #f4f4f4;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
nav ul li a:hover {
background-color: #ddd;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temp</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<header>
<h1>Temp</h1>
</header>
<nav>
<ul>
<li><a href="data.html">Data</a></li>
<li><a href="lesson.html">Lesson</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<main>
<!-- Add your content here -->
<h2>Welcome to Our Data Provider Site</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et iaculis arcu. Duis sed nulla eu enim ullamcorper ultricies.</p>
</main>
<footer>
<p>&copy; 2023 . All rights reserved.</p>
</footer>
</body>
</html>
答案1
得分: 1
您的代码对我很有效。这是我附上的工作代码和从代码生成的屏幕截图。
您可以尝试清除浏览器缓存。有时浏览器缓存也可能是问题。
<!-- 开始代码片段：js 隐藏：false 控制台：true babel：false -->
<!-- 语言：lang-css -->
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #1e155e;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
}
nav {
background-color: #f4f4f4;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
nav ul li a:hover {
background-color: #ddd;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
<!-- 语言：lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temp</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<header>
<h1>Temp</h1>
</header>
<nav>
<ul>
<li><a href="data.html">Data</a></li>
<li><a href="lesson.html">Lesson</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<main>
<!-- 在此处添加您的内容 -->
<h2>欢迎访问我们的数据提供者网站</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et iaculis arcu. Duis sed nulla eu enim ullamcorper ultricies.</p>
</main>
<footer>
<p>&copy; 2023 . 版权所有。</p>
</footer>
</body>
<!-- 结束代码片段 -->
英文:
Your code is working fine for me. Here I have attached my working code and the screenshot generated from the code.
You can try clearing the browser cache. Sometimes browser cache is the problem too.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #1e155e;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
}
nav {
background-color: #f4f4f4;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
nav ul li a:hover {
background-color: #ddd;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temp</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<header>
<h1>Temp</h1>
</header>
<nav>
<ul>
<li><a href="data.html">Data</a></li>
<li><a href="lesson.html">Lesson</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<main>
<!-- Add your content here -->
<h2>Welcome to Our Data Provider Site</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et iaculis arcu. Duis sed nulla eu enim ullamcorper ultricies.</p>
</main>
<footer>
<p>&copy; 2023 . All rights reserved.</p>
</footer>
</body>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论