将内部CSS移到单独的文件中时，它的工作方式不同 – 现在已解决。

huangapple
go评论87阅读模式
英文:

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 &lt;style&gt; section into different css file by replacing the section with &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;, 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.

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4.   &lt;meta charset=&quot;UTF-8&quot;&gt;
  5.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6.   &lt;title&gt;Data Provider Site&lt;/title&gt;
  7.   &lt;style&gt;
  8.     /* Add your custom styles here */
  9.     body {
  10.       font-family: Arial, sans-serif;
  11.       margin: 0;
  12.       padding: 0;
  13.     }
  15.     header {
  16.       background-color: #ffffff;
  17.       color: #e2b931;
  18.       padding: 20px;
  19.       text-align: center;
  20.     }
  22.     h1 {
  23.       margin: 0;
  24.     }
  26.     nav {
  27.       background-color: #c8beb8;
  28.       padding: 10px;
  29.     }
  31.     nav ul {
  32.       list-style-type: none;
  33.       margin: 0;
  34.       padding: 0;
  35.       overflow: hidden;
  36.     }
  38.     nav ul li {
  39.       display: inline-block;
  40.     }
  42.     nav ul li a {
  43.       display: block;
  44.       padding: 10px;
  45.       text-decoration: none;
  46.       color: #333;
  47.     }
  49.     nav ul li a:hover {
  50.       background-color: #ddd;
  51.     }
  53.     main {
  54.       padding: 20px;
  55.     }
  57.     footer {
  58.       background-color: #333;
  59.       color: #fff;
  60.       padding: 10px;
  61.       text-align: center;
  62.     }
  63.   &lt;/style&gt;
  64. &lt;/head&gt;
  65. &lt;body&gt;
  66.   &lt;header&gt;
  67.     &lt;h1&gt;Data Provider Site&lt;/h1&gt;
  68.   &lt;/header&gt;
  69.   &lt;nav&gt;
  70.     &lt;ul&gt;
  71.       &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
  72.       &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
  73.       &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Pricing&lt;/a&gt;&lt;/li&gt;
  74.       &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
  75.       &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
  76.     &lt;/ul&gt;
  77.   &lt;/nav&gt;
  78.   &lt;main&gt;
  79.     &lt;!-- Add your content here --&gt;
  80.     &lt;h2&gt;Welcome to Our Data Provider Site&lt;/h2&gt;
  81.     &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et iaculis arcu. Duis sed nulla eu enim ullamcorper ultricies.&lt;/p&gt;
  82.   &lt;/main&gt;
  83.   &lt;footer&gt;
  84.     &lt;p&gt;&amp;copy; 2023 Your Company. All rights reserved.&lt;/p&gt;
  85.   &lt;/footer&gt;
  86. &lt;/body&gt;
  87. &lt;/html&gt;

Original page
将内部CSS移到单独的文件中时，它的工作方式不同 – 现在已解决。

Page with separate .css file
将内部CSS移到单独的文件中时，它的工作方式不同 – 现在已解决。

styles.css

  1. body {
  2.     font-family: Arial, sans-serif;
  3.     margin: 0;
  4.     padding: 0;
  5. }
  7. header {
  8.   background-color: #1e155e;
  9.   color: #fff;
  10.   padding: 20px;
  11.   text-align: center;
  12. }
  14. h1 {
  15.   margin: 0;
  16. }
  18. nav {
  19.   background-color: #f4f4f4;
  20.   padding: 10px;
  21. }
  23. nav ul {
  24.   list-style-type: none;
  25.   margin: 0;
  26.   padding: 0;
  27.   overflow: hidden;
  28. }
  30. nav ul li {
  31.   display: inline-block;
  32. }
  34. nav ul li a {
  35.   display: block;
  36.   padding: 10px;
  37.   text-decoration: none;
  38.   color: #333;
  39. }
  41. nav ul li a:hover {
  42.   background-color: #ddd;
  43. }
  45. main {
  46.   padding: 20px;
  47. }
  49. footer {
  50.   background-color: #333;
  51.   color: #fff;
  52.   padding: 10px;
  53.   text-align: center;
  54. }

index.html

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4.   &lt;meta charset=&quot;UTF-8&quot;&gt;
  5.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6.   &lt;title&gt;Temp&lt;/title&gt;
  7.   &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot; type=&quot;text/css&quot;&gt;
  8. &lt;/head&gt;
  9. &lt;body&gt;
  10.   &lt;header&gt;
  11.     &lt;h1&gt;Temp&lt;/h1&gt;
  12.   &lt;/header&gt;
  13.   &lt;nav&gt;
  14.     &lt;ul&gt;
  15.       &lt;li&gt;&lt;a href=&quot;data.html&quot;&gt;Data&lt;/a&gt;&lt;/li&gt;
  16.       &lt;li&gt;&lt;a href=&quot;lesson.html&quot;&gt;Lesson&lt;/a&gt;&lt;/li&gt;
  17.       &lt;li&gt;&lt;a href=&quot;about.html&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
  18.     &lt;/ul&gt;
  19.   &lt;/nav&gt;
  20.   &lt;main&gt;
  21.     &lt;!-- Add your content here --&gt;
  22.     &lt;h2&gt;Welcome to Our Data Provider Site&lt;/h2&gt;
  23.     &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et iaculis arcu. Duis sed nulla eu enim ullamcorper ultricies.&lt;/p&gt;
  24.   &lt;/main&gt;
  25.   &lt;footer&gt;
  26.     &lt;p&gt;&amp;copy; 2023 . All rights reserved.&lt;/p&gt;
  27.   &lt;/footer&gt;
  28. &lt;/body&gt;
  29. &lt;/html&gt;

答案1

得分: 1

您的代码对我很有效。这是我附上的工作代码和从代码生成的屏幕截图。

您可以尝试清除浏览器缓存。有时浏览器缓存也可能是问题。

将内部CSS移到单独的文件中时，它的工作方式不同 – 现在已解决。

<!-- 开始代码片段：js 隐藏：false 控制台：true babel：false -->

<!-- 语言：lang-css -->

  1. body {
  2.     font-family: Arial, sans-serif;
  3.     margin: 0;
  4.     padding: 0;
  5. }
  7. header {
  8.   background-color: #1e155e;
  9.   color: #fff;
  10.   padding: 20px;
  11.   text-align: center;
  12. }
  14. h1 {
  15.   margin: 0;
  16. }
  18. nav {
  19.   background-color: #f4f4f4;
  20.   padding: 10px;
  21. }
  23. nav ul {
  24.   list-style-type: none;
  25.   margin: 0;
  26.   padding: 0;
  27.   overflow: hidden;
  28. }
  30. nav ul li {
  31.   display: inline-block;
  32. }
  34. nav ul li a {
  35.   display: block;
  36.   padding: 10px;
  37.   text-decoration: none;
  38.   color: #333;
  39. }
  41. nav ul li a:hover {
  42.   background-color: #ddd;
  43. }
  45. main {
  46.   padding: 20px;
  47. }
  49. footer {
  50.   background-color: #333;
  51.   color: #fff;
  52.   padding: 10px;
  53.   text-align: center;
  54. }

<!-- 语言：lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4.   &lt;meta charset=&quot;UTF-8&quot;&gt;
  5.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6.   &lt;title&gt;Temp&lt;/title&gt;
  7.   &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot; type=&quot;text/css&quot;&gt;
  8. &lt;/head&gt;
  9. &lt;body&gt;
  10.   &lt;header&gt;
  11.     &lt;h1&gt;Temp&lt;/h1&gt;
  12.   &lt;/header&gt;
  13.   &lt;nav&gt;
  14.     &lt;ul&gt;
  15.       &lt;li&gt;&lt;a href=&quot;data.html&quot;&gt;Data&lt;/a&gt;&lt;/li&gt;
  16.       &lt;li&gt;&lt;a href=&quot;lesson.html&quot;&gt;Lesson&lt;/a&gt;&lt;/li&gt;
  17.       &lt;li&gt;&lt;a href=&quot;about.html&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
  18.     &lt;/ul&gt;
  19.   &lt;/nav&gt;
  20.   &lt;main&gt;
  21.     &lt;!-- 在此处添加您的内容 --&gt;
  22.     &lt;h2&gt;欢迎访问我们的数据提供者网站&lt;/h2&gt;
  23.     &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et iaculis arcu. Duis sed nulla eu enim ullamcorper ultricies.&lt;/p&gt;
  24.   &lt;/main&gt;
  25.   &lt;footer&gt;
  26.     &lt;p&gt;&amp;copy; 2023 . 版权所有。&lt;/p&gt;
  27.   &lt;/footer&gt;
  28. &lt;/body&gt;

<!-- 结束代码片段 -->

英文:

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.

将内部CSS移到单独的文件中时，它的工作方式不同 – 现在已解决。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. body {
  2.     font-family: Arial, sans-serif;
  3.     margin: 0;
  4.     padding: 0;
  5. }
  7. header {
  8.   background-color: #1e155e;
  9.   color: #fff;
  10.   padding: 20px;
  11.   text-align: center;
  12. }
  14. h1 {
  15.   margin: 0;
  16. }
  18. nav {
  19.   background-color: #f4f4f4;
  20.   padding: 10px;
  21. }
  23. nav ul {
  24.   list-style-type: none;
  25.   margin: 0;
  26.   padding: 0;
  27.   overflow: hidden;
  28. }
  30. nav ul li {
  31.   display: inline-block;
  32. }
  34. nav ul li a {
  35.   display: block;
  36.   padding: 10px;
  37.   text-decoration: none;
  38.   color: #333;
  39. }
  41. nav ul li a:hover {
  42.   background-color: #ddd;
  43. }
  45. main {
  46.   padding: 20px;
  47. }
  49. footer {
  50.   background-color: #333;
  51.   color: #fff;
  52.   padding: 10px;
  53.   text-align: center;
  54. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4.   &lt;meta charset=&quot;UTF-8&quot;&gt;
  5.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6.   &lt;title&gt;Temp&lt;/title&gt;
  7.   &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot; type=&quot;text/css&quot;&gt;
  8. &lt;/head&gt;
  9. &lt;body&gt;
  10.   &lt;header&gt;
  11.     &lt;h1&gt;Temp&lt;/h1&gt;
  12.   &lt;/header&gt;
  13.   &lt;nav&gt;
  14.     &lt;ul&gt;
  15.       &lt;li&gt;&lt;a href=&quot;data.html&quot;&gt;Data&lt;/a&gt;&lt;/li&gt;
  16.       &lt;li&gt;&lt;a href=&quot;lesson.html&quot;&gt;Lesson&lt;/a&gt;&lt;/li&gt;
  17.       &lt;li&gt;&lt;a href=&quot;about.html&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
  18.     &lt;/ul&gt;
  19.   &lt;/nav&gt;
  20.   &lt;main&gt;
  21.     &lt;!-- Add your content here --&gt;
  22.     &lt;h2&gt;Welcome to Our Data Provider Site&lt;/h2&gt;
  23.     &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et iaculis arcu. Duis sed nulla eu enim ullamcorper ultricies.&lt;/p&gt;
  24.   &lt;/main&gt;
  25.   &lt;footer&gt;
  26.     &lt;p&gt;&amp;copy; 2023 . All rights reserved.&lt;/p&gt;
  27.   &lt;/footer&gt;
  28. &lt;/body&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月28日 21:12:04
  • 转载请务必保留本文链接：https://go.coder-hub.com/76351675.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定