CSS未显示在HTML中(新使用Atom文本编辑器)

问题描述 投票:-1回答:4

刚开始使用Atom时,我无法将CSS链接到html页面-两个文件都在同一目录中,但是在终端中出现以下错误。无论我如何更改href路径,除非包含目录名称:css文件名,否则我都会不断遇到此问题,但即使这样html文件也不会继承css样式...我正在侧边栏上工作导航(这就是名称按其原样使用的原因,但是我在下面仅包括了我正在使用的测试行)。非常感谢您的帮助。

这是当我在Chrome的本地端口上运行时错误的终端给我的信息('test3'是html文件):

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

。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中的项目。其他所有内容似乎都可以正常工作,但目前我还不知道...

html css atom-editor
4个回答
0
投票

该代码看起来不错,其中没有错字。只要确保您在同一文件夹中有css文件和html文件即可。确保它们不是文本文件,并且具有扩展名,并且当然要保存文件。 test3是父目录吗?

是只是html和CSS还是django项目?


0
投票

在您的html文件的开头添加此:

{% load static %}

并更改:

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

到这样的东西:

<link href="{% static 'sidebar.css' %}" rel="stylesheet" type="text/css">

0
投票

由于CSS文件位于同一文件夹中,因此您可以尝试执行以下操作:

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

圆点表示浏览器在html所在的文件夹中进行搜索。


0
投票

最终使它工作:)-在主项目目录中创建了名为static的文件夹。然后在名为css的目录中创建一个目录。然后,这对我来说是最重要的事情,进入项目的settings.py并创建指向该新文件夹的STATICFILES_DIRS路径。从我阅读的内容来看,当我将其推送到生产环境时,我将需要做一些额外的工作,但是很高兴最终看到我的css文件在我的html中工作,即使它只是在本地端口服务器上也是如此:

# 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文件中,我输入了以下内容(关键部分是顶部的静态加载和{%static'css / sidebar.css'%}的href} >>

{% 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>

感谢您以前的回答和评论,我相信它们都是有效的,它们确实对我的整体理解有所帮助,我只是无法让它们为我工作。无论如何,希望这可以帮助其他人。

© www.soinside.com 2019 - 2024. All rights reserved.