内联样式工作但不在样式头中（在 CS50 项目 2 上工作）答案

【问题标题】：Inline styles working but not in style head (working on CS50 project 2)内联样式工作但不在样式头中（在 CS50 项目 2 上工作）
【发布时间】：2022-07-03 23:53:37
【问题描述】：

我正在开发 CS50 项目 2，并且有一个显示活动列表的网页。我想对css添加一些更改，但是当我在head中添加对样式的更改时没有任何反应，但是内联样式有效。如何让它以头部样式工作？

{% extends "auctions/layout.html" %}
<head>
{% block style %}
    <style>
       .text {
           font-size: 10%;
       }
    </style>
{% endblock %}
</head>
{% block body %}
    <h2>Active Listings</h2>

    {% for listing in listings %}
        <img src ="{{ listing.image }}" style = "height: 10%; width: 10%;">
        <h4 class = "text" style = "color: aqua;">{{ listing.title }}</h4>
        <h6>Description: {{ listing.description }}</h6>
        <h6>Category: {{ listing.category }}</h6> 
        <h6>Price: ${{ listing.bid }}</h6>
        
    {% endfor %}
{% endblock %}

这是代码。字体大小没有变化，但是会因为内联样式而改变颜色。

如果我将颜色样式添加到头部样式中，而不是在内联中，则不会发生任何事情。就是这个代码。

<head>
{% block style %}
    <style>
       .text {
           font-size: 50%;
           font-family: fantasy;
           color: aqua;
       }
    </style>
{% endblock %}
</head>
{% block body %}
    <h2>Active Listings</h2>

    {% for listing in listings %}
        <img src ="{{ listing.image }}" style = "height: 10%; width: 10%;">
        <h4 class = "text">{{ listing.title }}</h4>
        <h6>Description: {{ listing.description }}</h6>
        <h6>Category: {{ listing.category }}</h6> 
        <h6>Price: ${{ listing.bid }}</h6>
        
    {% endfor %}
{% endblock %}

在这段代码中，样式根本没有改变。

这是渲染的 html 代码。

{% block body %}
    <h2>Active Listings</h2>

    {% for listing in listings %}
        <img src ="{{ listing.image }}" style = "height: 10%; width: 10%;">
        <h4 class = "text">{{ listing.title }}</h4>
        <h6>Description: {{ listing.description }}</h6>
        <h6>Category: {{ listing.category }}</h6> 
        <h6>Price: ${{ listing.bid }}</h6>
        
    {% endfor %}
{% endblock %}

【问题讨论】：

对我来说很好用，默认字体大小为 16 像素，因此 10% 的字体大小为 1.6 像素，并且因为它是 acqua，它在白色背景上几乎看不到，基本上是一条小的 acqua 线跨度>
我什么都没发生。你知道如何解决这个问题吗？
从我在您的问题中看到的情况来看，您的代码应该可以工作，如果您在问题中添加更多信息，我可能会提供更多帮助
添加视图会有帮助吗？
def index(request): return render(request, "auctions/index.html",{ "listings": Listings.objects.all() }) 这是视图代码，@Zach Jenz

标签： html css django css-selectors cs50

【解决方案1】：

因为这是一个 Django 模板，您可以链接存储在静态文件夹中的样式表。这个link 是一个视频，解释了如何做到这一点。

【讨论】：