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

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

10 голосов
/ 02 августа 2011

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

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

Обновление

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

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

Ответы [ 4 ]

20 голосов
/ 02 августа 2011

Вы можете использовать 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-документ, вы можете редактировать стили и видеть, как они влияют, когда вы открываете файл в браузере.Подобные эксперименты - отличный способ учиться.

10 голосов
/ 02 августа 2011

Используйте тег 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.

2 голосов
/ 23 января 2014

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

Like: 

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

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

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

1 голос
/ 02 сентября 2017 

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...