首页 > 解决方案 > CSS 引用许多样式表和可扩展性

问题描述

我的多重样式表引用有一些问题。基本上 style.css 上定义的类对我的 index.html 没有作用。可能是因为有多个样式表,其中有人覆盖了文件 style.css?

上次我遇到了类似的问题,我在这里问了一个问题,但几个小时后文件工作正常......现在我已经重新启动,除了 style.css 仍然什么都不做......

myapp/静态/style.css

h1 {
  color: blue;
  text-align: center;
 }

.box {
width:30%;
height:30%;
background-color: blue;
}

在我的 layout.html 上已通过以下方式定义了多个样式表引用

    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user- 
      scalable=no">

     <!-- Estilos de la master -->
     <link rel="stylesheet" href="{% static 'myapp/style.css' %}" type="text/css" >

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

     <link rel="stylesheet" 
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
            integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
            crossorigin="anonymous">

     <link rel="stylesheet" href="{% static 'js/sss/sss.css' %}" type="text/css" media="all">
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

     <!-- Estilos de los recursos adicionales -->
    <link rel="stylesheet" href="{% static 'fontawesome/web-fonts-with-css/css/fontawesome- 
        all.min.css' %}">

    <!-- Librerías adicionales -->

    <script src="{% static 'js/jquery.min.js'%}"></script>
    <script src="{% static 'js/sss/sss.min.js' %}"></script>

    <!-- Librerías de plugins -->

    <!-- Archivo personalizado de Javascript -->
    <script src=" {% static 'js/codejs.js' %}"></script>

    <title>{% block title %}{% endblock %}</title>
  </head>

最后是我的 index.html:

{% extends "myapp/layout.html" %}
{% load static %}

{% block body %}
<h1> Hola Mundo</h1>
  
  <div class="box">Hello world1</div>
  <div style="width:30%; height:30%; background-color: red;">Hello world2</div>

{% endblock %}

标签: pythonhtmlcssdjangoweb-applications

解决方案


推荐阅读