如何让 CSS 在 HTML 中显示

我在将 CSS 链接到 HTML 页面时遇到问题。两个文件都在同一个目录中,但是当我在 Chrome 的本地端口上运行时,我在终端中得到了这个文件(“test3”是 html 文件):


Not Found: /test3/sidebar.css

[15/Apr/2020 17:57:52] "GET /test3/sidebar.css HTTP/1.1" 404 8233

无论我如何更改 href 路径,除非我包含目录名:css 文件名,否则此问题都会出现一些变化,但即使如此,HTML 文件也不会继承 CSS 样式。


我正在开发侧边栏导航,这就是为什么名称是这样的,但我只是包含了我在下面使用的测试线:


.html 文件:


<!DOCTYPE html>

<html>

<head>


    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Testang</title>

    <link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

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


</head>

<body>


<h1> Test </h1>


</body>

</html>

如果我输入 href 像


<link href="requests:sidebar.css" rel="stylesheet" type="text/css"> 

我没有收到错误,但仍然没有看到 CSS 更改(“requests”是目录的名称)。


.css 文件:


h1 {

  color: red;

  font-size: 50px;

}

我刚刚从 PyCharm 切换过来。设置 Atom 后,我从 PyCharm 文件夹中打开 Atom 中的项目。其他一切似乎都工作正常。


青春有我
浏览 55回答 4
4回答

达令说

在 HTML 文件的开头添加:{%&nbsp;load&nbsp;static&nbsp;%}并改变&nbsp;&nbsp;&nbsp;&nbsp;<link&nbsp;href="sidebar.css"&nbsp;rel="stylesheet"&nbsp;type="text/css">像这样的事情:<link&nbsp;href="{%&nbsp;static&nbsp;'sidebar.css'&nbsp;%}"&nbsp;rel="stylesheet"&nbsp;type="text/css">

小唯快跑啊

由于 CSS 文件位于同一文件夹中,您可以尝试如下操作:<link&nbsp;href="./sidebar.css"&nbsp;rel="stylesheet"&nbsp;type="text/css">点告诉浏览器在与 HTML 相同的文件夹中进行搜索。

沧海一幻觉

代码看起来不错,没有错别字。确保 CSS 文件和 HTML 文件位于同一文件夹中,并且它们不是文本文件并且具有扩展名,当然,文件已保存。test3是父目录吗?它只是 HTML 和 CSS 还是一个 Django 项目?

森林海

我在主项目目录中创建了一个名为“static”的文件夹,然后在其中创建了一个名为“css”的目录。然后,这是我所缺少的一件大事,进入项目的 settings.py 并创建STATICFILES_DIRS该新文件夹的路径。根据我所读到的内容,当我将其投入生产时,我需要一些额外的工作。# Static files (CSS, JavaScript, Images)https://docs.djangoproject.com/en/3.0/howto/static-files/STATIC_URL = '/static/'STATICFILES_DIRS = [&nbsp; &nbsp; "full folder path to static folder"]然后在 HTML 文件中输入:{% load static %}<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="utf-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1">&nbsp; &nbsp; <title>Test</title>&nbsp; &nbsp; <link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">&nbsp; &nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>&nbsp; &nbsp; <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>&nbsp; &nbsp; <link rel="stylesheet" type="text/css" href="{% static 'css/sidebar.css' %}"></head>关键部分是load static顶部的 和 href to {% static 'css/sidebar.css' %}。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5