Question

我想覆盖默认的Python Calendar CSS。我目前正在使用类calendar.HTMLCalendar并希望覆盖默认的python calendar css。

覆盖默认css的最聪明方法是什么？任何帮助或建议将不胜感激。

我想使用我的日历css。

-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

如果没有确切地看到您需要覆盖的规则，您的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类为“月”，<th>标记的“月份”。因此，要覆盖样式，您可以这样做：

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

但这不是一个非常有效的选择器，因为在应用样式之前，DOM将搜索所有表标签。一个更有效的选择器是将日历包装在带有div的目标id标记中：

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

专门针对id为“mycalendar”的div，因此不必遍历所有标记。

您必须覆盖来自他们提供给您的Python日历CSS代码的CSS的特殊性。上面的示例提供了更具体的选择器。这是 Cascading 样式表的最基本原则之一（注意强调“层叠”部分）

Answer 2

从您的示例代码中。假设我们在＆lt;中添加类名。 ul＆gt;像这样：

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>

Answer 3

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'/>

覆盖Python日历HTMLCalendar CSS

3 个答案: