CSS DJANGO 和扩展模板

Posted

技术标签:

【中文标题】CSS DJANGO 和扩展模板【英文标题】:CSS DJANGO and extended templates 【发布时间】:2017-04-24 20:02:35 【问题描述】:

我已将引导程序加载到我的 base.html 模板中,该模板扩展了我的所有其他模板

<!DOCTYPE HTML>
% load staticfiles %
% load render_table from django_tables2 %
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="% static 'css/portal.css' %" type="text/css">
<link rel="stylesheet" href="% static 'django_tables2/themes/paleblue/css/screen.css' %" />
<html>
    <title>
    % block title %Test Portal% endblock %
    </title>
    <head>
        <div class="page-header">
            <img src="% static 'images/gd_logo_lg.jpg' %"  style="width:245;height:125px;"/>
            <div id="righty">
                <h1><a href="/home/">GD Portal</a></h1>
            </div>
        </div>
            </head>

    <body>
    <div class="content container">
    % block content %
    % endblock %
    </div>

    </body>

</html>

我的 CSS 文件 css/portal.css 中只有一些 CSS 有效,我尝试在网上查找,但我尝试的所有方法都不起作用。

.page-header 
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #932D42;
    margin-top: 0;
    padding: 10px 40px 20px 40px;


.page-header img 
    position:absolute;
    top:0px;
    left:0px;


.righty 
    float:right:


.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active 
    color: #ffffff;
    font-size: 32pt;
    font-family: "Courier New", monospace;
    font-weight: bold;
    text-decoration: none;


h1, h2, h3, h4 
    font-family: 'Impact', Sans-serif;

例如,page-header 可以正常工作,我可以更改它并做我想做的事,但是 righty 并没有任何影响。 我在扩展模板中尝试的任何 CSS 都不起作用。

谁能解释我做错了什么,因为我觉得我错过了一些超级基本的东西?

【问题讨论】:

试过我更新的答案了吗? @PrakharTrivedi 是的,它起作用了,它是错误的类/id 调用的组合,而且我在此之前错过了 .page-header 之一底部的 。所以这也没有帮助 很高兴您找到了解决方案。 【参考方案1】:

您需要了解如何通过 id 或 class 选择元素。 在您的 html 文件中:

<div id="righty">
    <h1><a href="/home/">GD Portal</a></h1>
</div>

但是你的 css 有这个代码:

.righty 
    float:right;

“div”的 id 属性为 righty。所以在 css 中,确切的代码应该是:

<style>
 #righty 
     float:right;
  

</style>

对于 id,css 和 javascript 元素选择器是 #,对于类,它是简单的点 (.)。

如果仍然无法使用,请使用此代码:

<style>
 .righty 
     text-align: right !important;
  

</style>

【讨论】:

还是不行,我也试过 ` 加点还是什么都没有。 : 也应该是分号 @Jim 按照 Sayse 的建议更新了我的答案。立即查看。

以上是关于CSS DJANGO 和扩展模板的主要内容,如果未能解决你的问题,请参考以下文章

CSS 字体仅适用于从相同基础扩展的一些 Django 模板

django 1.6.2:CSS 没有扩展到子模板

可以为 Django 中的扩展 html 模板定义一个单独的 css 文件吗?

如何在html文件中加载css文件已经在django中扩展了另一个html文件(base.html)

扩展 erlydtl

Django:覆盖和扩展应用程序模板