简体   繁体   中英

I can't link CSS file in the html file on with django

I can't link the CSS file in the HTML file, I tried in another example html css alone without django it's work but in django I have problems.

'''
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First site</title>
    <link rel="stylesheet" type="text/css" href="styles/styles.css">
</head>
<body>
   <h1>WeLcome</h1>
   <hr>

   {% if latest_post_list %}
      <ul>
            {% for post in latest_post_list %}
                <h3 ><a href="/web//{{ post.id }}">{{ post.title }}</a></h3>
                <p>{{ post.body }}</p>
            {% endfor %}
        </ul>
    {% else %}
        <p>no post are availabel</p>
    {% endif %}
    
</body>
</html>

'''

'''
 @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
body{
    text-decoration: none;
    font-family: 'Raleway', ;
    max-width: 300;
    margin: auto;
    padding: 20px;
}
'''

enter image description here

first you want to add the css as a static file directory in settings.py, Below the BASE_DIR STATIC_DIR = os.path.join(BASE_DIR,'static') . Before that create a folder for static in same hierarchy of manage.py....

Above is for telling that django to search my style.css in these directory folders

then add this in your html file.Add load Staticfiles in the top of the html file

{% load staticfiles %}

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

First Add a new directory in your app with name static. in static folder add a new folder css. in css folder add new file style.css and fill with your css. now in your base.html add a line like below -->

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

in my css file i have simple property

h1 {
color:red;}

and here is the screenshot of the result Dear! click to see image

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM