Как отображать разные слова в предложении, отображать разные цвета, каков «правильный» способ разметки (для разметки HTML-почты)

Question

Если я добавлю новый тег

, например:

<p>lorem ipsem blah blah blah <p class="special-colour">special phrase</p><p> lorem ipsem blah blah blah</p>

Я получаю переводы строки, а это не то, что я хочу.

Также нужно ли явно возвращаться к стилю, который я использовал, или он будет принят, если не будет переопределен атрибутом class = "foo-bar"?

Я понимаю, что этот вопрос, вероятно, касается специфики, которую мне еще предстоит решить, поскольку я действительно не знаю, какие иерархии естественным образом существуют в документах HTML / CSS, я просто вникаю во все это ATM.

Answer 1

Используйте <span>:

<p>first part <span class="special-colour">special phrase</span><p> next part</p>

, это "встроенный" элемент, поэтому не будет вызывать перевод строки.

И да, текст next part автоматически "вернется""к стилю, примененному к элементу p.

Ваш css для span будет выглядеть примерно так:

span.special-colour {
    color: #ff7766;
}

Кроме того, я могу сказать, что вы англо-английскийдинамик - будьте очень осторожны при использовании color против colour!

Answer 2

вместо

<p class="special-colour">`special phrase</p>

использование

<span class="special-colour">special phrase</span>

Тег span отображается в строке без разрывов строки.

Answer 3

Вы можете использовать <span> (возможно, с классом, или вы можете определить общее правило для всех интервалов, содержащихся в абзаце).Вы также можете использовать <strong> или <em>, если хотите придать слову или фразе больший вес или дополнительную значимость, например, это основной предмет страницы.Также можно использовать <i> и <b>.

http://html5doctor.com/i-b-em-strong-element/ содержит больше информации о том, когда использовать каждый

Answer 4

Поскольку вы пометили этот вопрос как html-email. Единственный способ заставить его работать - это создать таблицу, скажем, с 3 столбцами, поместить соответствующее содержимое в три столбца и затем стилизовать каждый td из table, давая inline-css. Нет никакого способа, которым вы можете достичь этого любым другим способом.

Exernal CSS никогда не работает для html-писем.