如何让 CSS 显示在 HTML 中
How to get CSS to show in 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 路径都会得到这个问题的一些变化,除非我包含目录 name:css 文件名,但即使这样 HTML 文件也不会继承 CSS造型。
我正在开发侧边栏导航,这就是名称保持原样的原因,但我只是在下面添加了一条我正在使用的测试线:
.html 文件:
<!DOCTYPE html>
<html lang="en">
<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 中打开项目。其他一切似乎都正常。
代码看起来不错,没有错字。确保 CSS 文件和 HTML 文件位于同一文件夹中,并且它们不是文本文件并且具有扩展名,当然,文件已保存。
test3
是父目录吗?
它只是 HTML 和 CSS 还是 Django 项目?
在 HTML 文件的开头添加:
{% load static %}
并改变
<link href="sidebar.css" rel="stylesheet" type="text/css">
像这样:
<link href="{% static 'sidebar.css' %}" rel="stylesheet" type="text/css">
由于 CSS 文件在同一个文件夹中,您可以尝试这样的操作:
<link href="./sidebar.css" rel="stylesheet" type="text/css">
圆点告诉浏览器在与 HTML 相同的文件夹中搜索。
我在主项目目录中创建了一个名为 "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 = [
"full folder path to static folder"
]
然后在HTML文件中我输入:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</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 rel="stylesheet" type="text/css" href="{% static 'css/sidebar.css' %}">
</head>
关键部分是顶部的 load static
和 {% static 'css/sidebar.css' %}
的 href。
我无法将 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 路径都会得到这个问题的一些变化,除非我包含目录 name:css 文件名,但即使这样 HTML 文件也不会继承 CSS造型。
我正在开发侧边栏导航,这就是名称保持原样的原因,但我只是在下面添加了一条我正在使用的测试线:
.html 文件:
<!DOCTYPE html>
<html lang="en">
<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 中打开项目。其他一切似乎都正常。
代码看起来不错,没有错字。确保 CSS 文件和 HTML 文件位于同一文件夹中,并且它们不是文本文件并且具有扩展名,当然,文件已保存。
test3
是父目录吗?
它只是 HTML 和 CSS 还是 Django 项目?
在 HTML 文件的开头添加:
{% load static %}
并改变
<link href="sidebar.css" rel="stylesheet" type="text/css">
像这样:
<link href="{% static 'sidebar.css' %}" rel="stylesheet" type="text/css">
由于 CSS 文件在同一个文件夹中,您可以尝试这样的操作:
<link href="./sidebar.css" rel="stylesheet" type="text/css">
圆点告诉浏览器在与 HTML 相同的文件夹中搜索。
我在主项目目录中创建了一个名为 "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 = [
"full folder path to static folder"
]
然后在HTML文件中我输入:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</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 rel="stylesheet" type="text/css" href="{% static 'css/sidebar.css' %}">
</head>
关键部分是顶部的 load static
和 {% static 'css/sidebar.css' %}
的 href。