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

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

Вы можете использовать <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>