覆盖Python日历HTMLCalendar的CSS

Question

我想要修改默认的Python日历样式。现在我正在使用calendar.HTMLCalendar这个类，想要改变它的默认样式。

有没有什么聪明的方法可以用来修改这个默认样式呢？任何帮助或建议都非常感谢。

我想使用我自己的日历样式。

-Keoko

下面是我正在使用的模板标签的示例：

  def formatday(self, day, weekday):
       if day != 0:
           cssclass = self.cssclasses[weekday]
           if date.today() == date(self.year, self.month, day):
           cssclass += ' today'
       if day in self.readings:
           cssclass += ' filled'
           body = ['<ul>']
           for reading in self.readings[day]:
              body.append('<li>')
              body.append('<a href="%s">' % reading.get_absolute_url())
              body.append(esc(reading.series.primary_name))
              body.append('</a></li>')
           body.append('</ul>')
           return self.day_cell(cssclass, '<span class="dayNumber">%d</span> %s' %  (day, ''.join(body)))
        return self.day_cell(cssclass, '<span class="dayNumberNoReadings">%d</span>' % (day))
    return self.day_cell('noday', '&nbsp;')

再次感谢。

Answer 1

Chrome浏览器的开发者工具可以让你查看网页上的各种元素。你只需要右键点击网页，然后选择“检查”，这样就会在右边弹出一个窗口。通过这个窗口，你可以轻松看到每个表格元素的类名，只需将鼠标悬停在你想查看的区域上。

下面的CSS是一个示例，确保这些CSS标签适合你的日历。

.filled{
    background-color: pink;
}
.today {
    background-color: #66ccff;
}
.noday{
    background-color: #f0f0f5;
}
.month {
    border:1px solid navy;
    width: 70%;
    text-align: center;
}
.month th {
    text-align: center;
    width:100px;
    height:20px;
}
.month td {
    width: 100px;
    height: 100px;
    vertical-align: top;
    text-align: right;
    border: 1px solid #c6c6ec;
}

然后记得把这个.css文件导入到你的模板中哦！

<link rel='stylesheet' href="location-of-your-css-here" type='text/css' media='all'/>

Answer 2

在不知道你需要覆盖的具体规则之前，你的CSS规则必须比现有的规则更具体。有几种方法可以做到这一点，但具体方法取决于已经存在的规则。

作为入门，可以看看这个链接：http://css-tricks.com/specifics-on-css-specificity/。它会给你一些关于如何最好地覆盖你想要更改的样式的建议。

假设你有以下来自Python日历的CSS样式：

.calendar .day {
    background-color: #ccc;
}

要覆盖这个样式，你可以这样做：

table.calendar .day  // or

.calendar td.day  // or

table.calendar td.day

日历会输出一个<table>标签来显示月份，表格上有一个CSS类叫'month'，而<th>标签也用'month'。所以，要覆盖这个样式，你可以这样做：

table.month th.month {
  // your style here
}

不过，这样的选择器效率不高，因为在应用样式之前，DOM会搜索所有的表格标签。一个更有效的选择器是把日历包裹在一个带有id的目标div标签里：

#mycalendar .month .month {
  // your style
}

这样就可以专门针对id为"mycalendar"的div，这样就不需要遍历所有标签。

你需要覆盖来自Python日历CSS代码的特定性。上面的例子提供了一个更具体的选择器。这是层叠样式表的最基本原则之一（注意“层叠”这个词的重要性）。

Answer 3

根据你的示例代码。假设我们在 < ul > 标签中添加一个类名，像这样：

def formatday(self, day, weekday):
       if day != 0:
           cssclass = self.cssclasses[weekday]
           if date.today() == date(self.year, self.month, day):
           cssclass += ' today'
       if day in self.readings:
           cssclass += ' filled'
           body = ['<ul class="sample">'] //<---------add class
           for reading in self.readings[day]:
              body.append('<li>')
              body.append('<a href="%s">' % reading.get_absolute_url())
              body.append(esc(reading.series.primary_name))
              body.append('</a></li>')
           body.append('</ul>')
           return self.day_cell(cssclass, '<span class="dayNumber">%d</span> %s' %  (day, ''.join(body)))
        return self.day_cell(cssclass, '<span class="dayNumberNoReadings">%d</span>' % (day))
    return self.day_cell('noday', '&nbsp;')

然后，在你的 CSS 代码中，你可以简单地写：

<style>
.sample {
    background:red;
    font-weight: bold;
}
</style>