атрибут css после списка отсутствует

Question

В следующем примере у меня есть встроенный тег css, который определяет стиль, цвет и размер шрифта. Тем не менее, все после списка не отображает атрибуты тега css. Что я делаю не так?

 <div class="Content"><p style="font-family:verdana;color:#2137C2;font-size:14px;"> 
     Try the kit for at least 30 days and if you aren’t completely satisfied, you can 
     return it to us in the original packaging and, once we receive it, we will gladly  
     refund your money*.<br> 

     <strong>Important Tips and Recommendations:</strong> 

     <ul> 
     <li>Use only 1-2 tablespoons of liquid HE detergent</li> 
     <li>Never use powdered soap</li> 
     </ul><br> 

     Please note that shipping charges are non-refundable 
     if you elected to have your kit sent to you by Priority or Express shipping.<strong> 
     Returns must be sent within 60 days of the original order date.</strong> </p></div> 

Answer 1

Вы указываете встроенный стиль на элементе p. Элемент ul неявно заканчивает этот элемент p непосредственно перед ним, поэтому стили из элемента p не будут применяться к ul, его дочерним элементам или чему-либо, что следует за ним.

Если вы хотите применить стили ко всему тексту в своем элементе div, укажите его на элементе div. Вы должны предпочтительно сделать это в таблице стилей, однако:

div.Content { 
    font-family: Verdana; 
    font-size: 14px; 
    color: #2137C2; 
} 

Вы также должны создать еще один p элемент, окружающий второй блок текста, который приходит после ul, так как ul закрывает первый p.

Answer 2

Вы указали стиль на тег абзаца <p>, а не весь div.

Это должно работать:

<div class="Content" style="font-family:verdana;color:#2137C2;font-size:14px;"><p> 
     Try the kit for at least 30 days and if you aren’t completely satisfied, you can 
     return it to us in the original packaging and, once we receive it, we will gladly  
     refund your money*.<br> 

     <strong>Important Tips and Recommendations:</strong> 

     <ul> 
     <li>Use only 1-2 tablespoons of liquid HE detergent</li> 
     <li>Never use powdered soap</li> 
     </ul><br> 

     Please note that shipping charges are non-refundable 
     if you elected to have your kit sent to you by Priority or Express shipping.<strong> 
     Returns must be sent within 60 days of the original order date.</strong></p></div> 

Вы также можете применить стиль к Content класса, добавив это в CSS стилей:

.content { 
    font-family:verdana; 
    color:#2137C2; 
    font-size:14px; 
} 

Answer 3

Для лучшей практики не используют встроенные стили.

Когда вы устанавливаете стиль в элементе p как встроенный, только этот конкретный элемент получит стиль, упомянутый в то время как другие элементы не будут.

Вот fiddle, показывающий, как это сделать, используя отдельный CSS.

Answer 4

Это потому, что браузер предполагает, что вы хотите закрыть свой абзац перед списком и не позволит вам иметь элементы списка в качестве дочерних элементов абзацев, поскольку абзацы предназначены только для содержания фразинга (например, в виде тегов, например, диапазон и текст). Чтобы узнать больше об этом, вы можете проверить paragraph definitions или this StackOverflow post.

Чтобы устранить проблему, я предлагаю окончание свой абзац перед списком и начиная новую с тем же стилем после списка, как показано ниже:

<div class="Content"><p style="font-family:verdana;color:#2137C2;font-size:14px;"> 
    Try the kit for at least 30 days and if you aren’t completely satisfied, you can 
    return it to us in the original packaging and, once we receive it, we will gladly  
    refund your money*.<br> 

    <strong>Important Tips and Recommendations:</strong> </p> 

    <ul> 
    <li>Use only 1-2 tablespoons of liquid HE detergent</li> 
    <li>Never use powdered soap</li> 
    </ul><br> 

    <p style="font-family:verdana;color:#2137C2;font-size:14px;">Please note that shipping charges are non-refundable 
    if you elected to have your kit sent to you by Priority or Express shipping.<strong> 
    Returns must be sent within 60 days of the original order date.</strong> </p></div> 

Демонстрация здесь: http://jsfiddle.net/FpvYM/

Чтобы избежать переписывания стиль абзаца, вы всегда можете создать класс для него:

<p class="fancy">text here</p> 

с CSS:

.fancy { 
    font-family:verdana; 
    color:#2137C2; 
    font-size:14px; 
} 

Или даже:

.Content p { 
    font-family:verdana; 
    color:#2137C2; 
    font-size:14px; 
} 

Обратите внимание, что последний пример будет влиять на все параграфы DIV с классом "Содержание".