Как установить разные цвета в HTML в одном выражении?

Я имею в виду разный цвет текста в одной строке. Как это могло быть возможно?

<p style="color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20"> My Name is: 

 <"color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20"> Tintincute </p>

Я хотел бы иметь другой цвет для Tintincute, но в одной строке проблема с этим, имя пошло вниз на один пробел.

Вот пример кода:

<p style="color:#4C4C4C;font-weight:bold">All fields marked with   <style="color:#FF0000;font-weight:bold">*</color> <style="color:#4C4C4C;font-weight:bold">are required</p>

Обновить

@Phil: я пытался использовать код, но он не работал. Сам код был показан на странице. Вот как я это сделал:

<div style="color:red">[+validationmessage+]</div>
p.detail {color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20 }
span.name {color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20 }
<p class="detail">My Name is: <span class="name">Tintincute</span> </p>

Ответы

Ответ 1

Вы можете использовать CSS для этого и создать классы для элементов. Итак, у вас будет что-то вроде этого

p.detail { color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20 }
span.name { color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20 }

Затем ваш HTML-код будет читать:

<p class="detail">My Name is: <span class="name">Tintinecute</span> </p>

Это много более аккуратных, чем встроенных таблиц стилей, легче поддерживать и обеспечивает большее повторное использование.

Здесь полный HTML, чтобы продемонстрировать, что я имею в виду:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <style type="text/css">
    p.detail { color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20 }
    span.name { color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20 }
    </style>
</head>
<body>
    <p class="detail">My Name is: <span class="name">Tintinecute</span> </p>
</body>
</html>

Вы увидите, что у меня есть классы стилей в теге стиля в заголовке, а затем я применяю только эти классы в коде, например <p class="detail"> ... </p>. Пройдите через учебник w3schools, это займет всего пару часов и действительно повернет вас, когда дело доходит до стилизации ваших HTML-элементов. Если вы вырезаете и вставляете это в документ HTML, вы можете редактировать стили и видеть, какой эффект они имеют при открытии файла в браузере. Экспериментировать таким образом - отличный способ узнать.

Ответ 2

Используйте тег span

<style>
    .redText
    {
        color:red;
    }
    .blackText
    {
        color:black;
        font-weight:bold;
    }
</style>

<span class="redText">My Name is:</span>&nbsp;<span class="blackText">Tintincute</span>

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

Ответ 3

Как насчет использования тега FONT?

Как

H<font color="red">E</font>LLO.

Невозможно показать пример здесь, потому что этот сайт не позволяет использовать тег шрифта.

Стиль Span также быстрый и легкий.

Ответ 4

.rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<h2><span class="rainbow">Rainbows are colorful and scalable and lovely</span></h2>