Python 如何为我的表单更改css文件中的某些内容？_Python_Html_Css_Django

Python 如何为我的表单更改css文件中的某些内容？

python html css django

Python 如何为我的表单更改css文件中的某些内容？,python,html,css,django,Python,Html,Css,Django,我有一个扩展基本HTML文件的文件，该文件包含一个表单。我想为表单创建一个边距，并更改提交按钮和表单文本框的颜色，以匹配我网站的主题。如何在CSS文件中执行此操作？到目前为止，边距似乎不起作用，我也不确定我将如何改变我前面提到的颜色 search.html文件 {% extends 'base.html' %} {%load static%} <link rel="stylesheet" type= "text/css" href="{

我有一个扩展基本HTML文件的文件，该文件包含一个表单。我想为表单创建一个边距，并更改提交按钮和表单文本框的颜色，以匹配我网站的主题。如何在CSS文件中执行此操作？到目前为止，边距似乎不起作用，我也不确定我将如何改变我前面提到的颜色

search.html文件

{% extends 'base.html' %}
{%load static%}
 <link rel="stylesheet" type= "text/css"  href="{% static 'css/form.css' %}" >

  <body>

    {% block content %}

        <container >  
        <center>
            <form action="/searchoutput/" method="post">
              {% csrf_token %}
              Input Text:
              <input type="text" name="param" required> <br><br>
              {{data_external}}<br><br>
              {{data}}
              <br><br>
              <input type="submit" value="Check for Service">

              </form>
        </container>
        </center>
    {% endblock %}


  </body>

base.html

{%load static%}
<!DOCTYPE html>
<html>
<head>
<title>TweetyBird</title>


    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type= "text/css"  href="{% static 'css/main.css' %}" >
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



  </head>
 
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="/">TweetyBird</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="/search">Search by Tweet <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Twitter Bot</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">To be added</a>
        </li>
      </ul>
    </div>

  </nav>
  {% block content %}
  {% endblock %}

</body>
</html>

在base.html（{%block staticfiles%}）中的head标记下方添加一个块标记

现在在search.html中，将css添加到staticfiles块中

由于扩展了base.html，因此只有search.html的块内容将被base.html块中的内容替换

由于链接标记在块之外，因此css甚至不会被拾取

另外，最好在base.html中使用body标记，而不是search.html

您的base.html是什么？您可能需要在base.html中为css和js添加块标记，并在这些模板标记内的search.html中使用您的css和js。我在问题中添加了base.html和main.css的代码。我不太理解您的问题。您说您想在css文件中进行一些编辑。我无法将css应用于search.html文件。我想为提交按钮和文本框添加边距并更改颜色，但我无法这样做。

{%load static%}
<!DOCTYPE html>
<html>
<head>
<title>TweetyBird</title>


    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type= "text/css"  href="{% static 'css/main.css' %}" >
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



  </head>
 
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="/">TweetyBird</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="/search">Search by Tweet <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Twitter Bot</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">To be added</a>
        </li>
      </ul>
    </div>

  </nav>
  {% block content %}
  {% endblock %}

</body>
</html>

body 
{
background-color: lightblue;
}