HTML: изменение цвета определенных слов в текстовой строке - PullRequest
Новая
       56

HTML: изменение цвета определенных слов в текстовой строке

75 голосов
/ 07 января 2011

У меня есть следующее сообщение (слегка изменено):

"Примите участие в конкурсе до 30 января 2011 года, и вы можете выиграть до $$$$ - включая удивительные летние поездки! "

У меня сейчас есть: 

<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">

форматирует текстовую строку, но хочет изменить цвет «30 января 2011 года» на # FF0000 и «лето» на # 0000A0.

Как мне сделать это строго с помощью HTML или встроенного CSS?

Ответы [ 9 ]

90 голосов
/ 07 января 2011 
<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">
  Enter the competition by 
  <span style="color: #ff0000">January 30, 2011</span>
  and you could win up to $$$$ — including amazing 
  <span style="color: #0000a0">summer</span> 
  trips!
</p>

Или вместо этого вы можете использовать классы CSS: 

<html>
  <head>
    <style type="text/css">
      p { 
        font-size:14px; 
        color:#538b01; 
        font-weight:bold; 
        font-style:italic;
      }
      .date {
        color: #ff0000;
      }
      .season { /* OK, a bit contrived... */
        color: #0000a0;
      }
    </style>
  </head>
  <body>
    <p>
      Enter the competition by 
      <span class="date">January 30, 2011</span>
      and you could win up to $$$$ — including amazing 
      <span class="season">summer</span> 
      trips!
    </p>
  </body>
</html>
35 голосов
/ 15 декабря 2012

Вы можете использовать тег HTML5 <mark>: 

<p>Enter the competition by 
<mark class="red">January 30, 2011</mark> and you could win up to $$$$ — including amazing 
<mark class="blue">summer</mark> trips!</p>

И использовать это в CSS: 

p {
    font-size:14px;
    color:#538b01;
    font-weight:bold;
    font-style:italic;
}

mark.red {
    color:#ff0000;
    background: none;
}

mark.blue {
    color:#0000A0;
    background: none;
}

Тег <mark> имеет цвет фона по умолчанию.. хотя бы в Chrome.

31 голосов
/ 07 января 2011 
<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">
    Enter the competition by <span style="color:#FF0000">January 30, 2011</span> and you could win up to $$$$ — including amazing <span style="color:#0000A0">summer</span> trips!
</p>

Элементы span являются встроенными, поэтому не нарушают поток абзаца, а только стиль между тегами.

18 голосов
/ 07 января 2011

использовать пролеты.пр) <span style='color: #FF0000;'>January 30, 2011</span>

12 голосов
/ 10 сентября 2017 
<font color="red">This is some text!</font>

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

1 голос
/ 19 июня 2016

Адаптируйте этот код, как бы вы ни подходили под ваши потребности, вы можете выбрать текст? в абзаце указывается, какой шрифт или стиль вам нужен! 

<head>
<style>
p{ color:#ff0000;font-family: "Times New Roman", Times, serif;} 
font{color:#000fff;background:#000000;font-size:225%;}
b{color:green;}
</style>
</head>
<body>
<p>This is your <b>text. <font>Type</font></strong></b>what you like</p>
</body>
0 голосов
/ 19 января 2019

Если вы хотите использовать библиотеку, Azle делает это легко. Просто target class и instance class вашего текстового элемента. Например, если мой блок текста находится внутри элемента с классом «my_text», и это первый экземпляр этого класса: 

az.style_word('my_text', 1, {
    "this_class" : "colored_word", 
    "word" : "deploy",
    "color" : "red",
    "word_instance" : 2
})

Ниже показано, как мы можем закрасить каждый экземпляр слова или нацелить на 1-й, 2-й или 3-й экземпляр слова , в частности :

enter image description here

Вот это FIDDLE

0 голосов
/ 20 ноября 2015

Вы также можете сделать класс:

<span class="mychangecolor"> I am in yellow color!!!!!!</span>

, затем в файле CSS сделать: 

.mychangecolor{ color:#ff5 /* it changes to yellow */ }
0 голосов
/ 17 ноября 2015

Вы можете использовать более длинный способ Boringer 

<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">Enter the competition by</p><p style="font-size:14px; color:#ff00; font-weight:bold; font-style:italic;">summer</p>

вы получаете очко за остальное

...