Question

我对CSS / HTML比较陌生，我试图在无序列表中更改两个部分的字体。

这是我的HTML列表

<ul id="factlist">
    <li>Name: Roger George Moore</li>
    <li>Born: 14 October 1927</li>
    <li>Birth Place: Stockwell, London</li>
    <li>Famous For: Playing James Bond 1973-1985</li>
</ul>

和CSS

#factlist li {
/*Factlist contentright on Homepage*/
list-style-image: url('../images/bullets.png');
color: #ffffff;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: normal;
font-size: 1.9em;

}

我基本上希望列表以斜体显示“标题”，然后正常显示答案。就这样......

姓名：Roger Moore

Born ：14 ...

等等。

非常感谢。

Answer 1

您可以使用<em>代码（link）

<ul id="factlist">
  <li><em>Name:</em> Roger George Moore</li>
  <li><em>Born:</em> 14 October 1927</li>
  <li><em>Birth Place:</em> Stockwell, London</li>
  <li><em>Famous For:</em> Playing James Bond 1973-1985</li>
</ul>

或者，如果您更喜欢使用CSS，请使用<span>

<ul id="factlist">
  <li><span class="emphasize">Name:</span> Roger George Moore</li>
  <li><span class="emphasize">Born:</span> 14 October 1927</li>
  <li><span class="emphasize">Birth Place:</span> Stockwell, London</li>
  <li><span class="emphasize">Famous For:</span> Playing James Bond 1973-1985</li>
</ul>

li.emphasize {
  font-style: italic;
}

Answer 2

使用CSS font-style来完成。 W3Schools。 JSFiddle

HTML

<ul id="factlist">
    <li><span>Name</span>: Roger George Moore</li>
    <li><span>Born</span>: 14 October 1927</li>
    <li><span>Birth Place</span>: Stockwell, London</li>
    <li><span>Famous For</span>: Playing James Bond 1973-1985</li>
</ul>

<强> CSS

#factlist li {
    /*Factlist contentright on Homepage*/
    list-style-image: url('../images/bullets.png');
    color: #ffffff;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-weight: normal;
    font-size: 1.9em;
}

#factlist li span {
    font-style:italic;
}

或者您可以使用<em>。 W3Schools。 JSFiddle

<ul id="factlist">
  <li><em>Name:</em> Roger George Moore</li>
  <li><em>Born:</em> 14 October 1927</li>
  <li><em>Birth Place:</em> Stockwell, London</li>
  <li><em>Famous For:</em> Playing James Bond 1973-1985</li>
</ul>

无序列表中的不同字体样式

2 个答案: