Question

我正在构建一个基本的html5网站，有5页用于练习，因为我正在重新学习html5和CSS。

我有一个ID为“education”和class“content-list”的div。在这个div里面是一个Caption和一个无序列表Class“content-ul”（注意：Caption包含在“content-list”中）。该列表包含3个列表项。

我想将标题的font-weight设置为粗体，而不是无序列表。

这就是我所拥有的：

HTML：

HTML:
<div id="education" class="content-list">
<caption>Education:</caption>
<ul class="content-ul">
<li>Tafe</li>
<li>College</li>
<li>High School</li>
</ul>
</div>

CSS：

.content-list {
... styles
font-weight:bold; /* Sets caption and list to bold */
.... styles
}

.content-ul {
.... styles
font-weight:normal; /* Sets list back to normal */
.... styles
}

这实现了预期的结果，但我想知道是否有更好/更有效的方法。

请注意，5个页面中有4个使用此代码。出于这个原因，我选择不使用在线样式，因为我总共要做4次。这样就不需要将列表设置为粗体，然后再次恢复正常，但仍然会使用比所选方法更多的代码。

任何帮助/建议都会很棒。

Answer 1

通过您的示例，我可以看到您只希望Education为粗体，而不是除此之外的其他内容。简单来说，就像

一样

caption{
    font-weight:bold
}

不需要OP中的CSS。

Answer 2

caption用于表格，即h4列表

＆＃13;

<div id="education" class="content-list">
  <h4>Education:</h4>
  <ul class="content-ul">
    <li>Tafe</li>
    <li>College</li>
    <li>High School</li>
  </ul>
</div>

＆＃13;

附注，正确使用时标题字样设计

＆＃13;

table, th, td {
    border: 1px solid black;
}
table caption {
    color: red;
    font-weight: bold;
}

＆＃13;

<table>
  <caption>Caption</caption>
  <tr>
    <th>Header</th>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
</table>

＆＃13;

设置CSS字体权重的正确方法？

2 个答案: