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 中的扩展 html 模板定义一个单独的 css 文件吗?