【问题标题】:CSS file not loading when using WAMP server使用 WAMP 服务器时未加载 CSS 文件
【发布时间】:2015-12-02 07:34:04
【问题描述】:

WAMP 服务器加载 index.html 很好,但不加载任何额外的 css 样式表和脚本文件。

这些我都试过了

<link rel="stylesheet" href="wamp/www/AngularJS_Practice/css/style.css"/>
<link rel="stylesheet" href="/css/style.css"/>
<link rel="stylesheet" href="css/style.css"/>

编辑

我当前的 index.html 页面是

<!DOCTYPE HTML>
<html lang='en'>
<head>

<title>Electronic Components</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>
<h2>Lorem Ipsum</h2>


</body>
</html>

编辑 2 css

h2 {

color: orange;
font-style: italic;

 }

【问题讨论】:

  • 向我们展示您的文件树
  • 索引文件的文件树为 C:\wamp\www\AngularJS_Practice\index.html,css 文件的文件树为 C:\wamp\www\AngularJS_Practice\css\style。 CSS
  • 最好写成 ,也可以是UTF-8(大写)
  • 你的html文件似乎是正确的,css文件可能有错误,你也可以添加style.css吗?
  • 刚刚添加了css文件(很短,因为我是第一次使用WAMP)

标签: apache wamp localserver


【解决方案1】:

你忘了使用类型

<link rel="stylesheet" type="text/css" href="css/style.css">

另请注意

 <link ....>  // this is right
 <link ..../> // avoid this

您的 HTML 文件似乎正确,尝试在 css 文件夹中制作这个小 css 文件并链接到它

body{background-color:blue;}

测试一下

【讨论】:

  • 另外请记住,您必须在 标记中链接它。如果您的工作目录中有一个包含 style.css 的文件夹 css,那么这应该可以正常工作。
  • 我尝试添加 type="text/css" 但 css 仍然没有出现,是的,它在 head 标签中
  • 还看到你粘贴的代码有 这是不正确的检查你的 index.html。最好把index.html的代码上传上来更好理解。
  • 我刚刚发布了上面的索引内容
  • type 是可选的。 XHTML 中需要 XHTML 样式的自闭合标签,并且在 HTML 5 中是允许的。
【解决方案2】:

刷新浏览器缓存。按“Ctrl+F5” 这样就可以了。

【讨论】:

    【解决方案3】:

    我遇到了同样的问题,对我有用的是这个

    <link rel="stylesheet" type="text/css" href="./css/style.css">
    

    享受

    【讨论】:

      【解决方案4】:

      从 url 栏中选择完整的 url,然后按 ENTER... 它有效! ;)

      【讨论】:

      • 欢迎来到 Stack Overflow!对我来说,尚不清楚这将如何解决 OP 的问题。请扩展并阐明这些步骤及其工作原理。
      • 当您选择 url 然后按 ENTER 时,标头信息将重新发送到服务器(无论是您的本地服务器还是远程服务器)...因为新的标头信息被重新发送到服务器一个新的页面是从服务器请求的,因此您的页面将被刷新,一切都会正常运行...如果这不起作用,请尝试重新启动您的服务器...希望它有所帮助
      【解决方案5】:

      这对我有用:

      <link rel="stylesheet" href=".\style.css">
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2015-10-05
        • 2021-02-09
        • 2016-11-11
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多