HTML文档不使用外部CSS样式表

Question

I am starting to learn CSS and after trying to implement an external stylesheet, i found I was unable to change the color of my html document. 我开始学习CSS，并尝试实现外部样式表后，发现无法更改html文档的颜色。 I am using Visual Studio Code and my html templates are using Djangos inheritance. 我正在使用Visual Studio Code，而我的html模板正在使用Django继承。

I have tried double checking that everything is saved, I have checked spelling for the href, and i even restarted VSC. 我尝试仔细检查所有内容是否已保存，检查了href的拼写，甚至重新启动了VSC。 So far nothing. 到目前为止，什么都没有。

Here is the base html sheet 这是基本的html表

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
        {% block style %}
        {% endblock %}
     <title>
         {% block title %}
         {% endblock %}
     </title>
</head>
<body>
  {% block content %}
  {% endblock %}
</body>

</html>

Here is an html sheet that should use the styling: 这是应该使用样式的html表：

{% extends 'student_view_base.html' %}


{% block title %}
    Socrates Home Page
{% endblock %}

{% block style %}
<link rel="stylesheet" type="text/css" 
 href="css/sidebar.css">    
{% endblock %}


{% block content %}
    <h1>Socrates Home Page</h1>
    <div>
        <a href="{% url 'login' %}">Login</a>
    </div>
    <a href="{% url 'admin:index' %}">Admin Login</a>
{% endblock %}

Here is the css sheet: 这是css表：

h1{
    color: blue;
}

As you can tell, I am pretty new to Web Dev in general and this was mostly to experiment and make sure I could implement it properly. 如您所知，我一般对Web Dev还是陌生的，这主要是为了试验并确保我可以正确实现它。

As far as I can tell the h1 tags text should be turning blue. 据我所知，h1标签的文本应该变成蓝色。 Currently it remains black. 目前它保持黑色。

EDIT: I can confirm that the href is linked to the proper document, ctrl clicking takes me to the right document. 编辑：我可以确认href链接到正确的文档，单击Ctrl可以将我带到正确的文档。

Answer 1

You are better off placing your html code on templates and your css on static when you use django. 使用django时，最好将html代码放在模板上，而css放在静态上。 Create a templates and static folders on your project as here. 如下所示，在您的项目上创建模板和静态文件夹。 enter image description here 在此处输入图片说明

Then edit settings.py 'DIRS': [os.path.join(BASE_DIR, 'templates')] , inside TEMPLATES. 然后在TEMPLATES内编辑settings.py'DIRS 'DIRS': [os.path.join(BASE_DIR, 'templates')] 。 Also add the following code to your settings.py : 还将以下代码添加到您的settings.py中：

STATIC_URL = '/static/'

STATIC_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

STATIC_ROOT = os.path.join(BASE_DIR, 'static')


MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

You should be good to go. 你应该很好。

HTML文档不使用外部CSS样式表

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-07-16 04:11:58

HTML文档不使用外部CSS样式表

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-07-16 04:11:58

解决方案1
2 已采纳 2019-07-16 04:11:58