Различные стили шрифтов в неупорядоченном списке

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;

}

Я хочу, чтобы список отображался курсивом с заголовками, а затем с нормальным ответом. Ну вот так...

Имя: Роджер Мур

Родился: 14...

и так далее.

Большое спасибо.

Answer 1

Чтобы сделать это с помощью 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>

Answer 2

Вы можете использовать <em> тег ( ссылка)

<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;
}