HTML: Зміна кольорів певних слів у рядку тексту


91

У мене є повідомлення нижче (трохи змінене):

"Участь у змаганнях до 30 січня 2011 р., І ти можеш виграти до $$$$ - включаючи дивовижні літні поїздки!"

На даний момент я маю:

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

форматування текстового рядка, але потрібно змінити колір "30 січня 2011 р." на # FF0000 та "літо" на # 0000A0.

Як це зробити суворо за допомогою HTML або вбудованого CSS?

Відповіді:


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

1
Це чудова відповідь! Легко демонструє, що крапки представляють теги всередині тегів абзацу. Це дійсно уточнює цю інформацію для всіх, хто працює зі <style>.
Джозеф Пуар'є,

44

Ви можете використовувати тег 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.


3
Шкода, що відповіді не присудили. Я б за це нагородив (і обрушився на тих, хто використовує браузери, які не підтримують HTML (чи є ще такі?))
Моуг каже відновити Моніку

Просте та ефективне рішення, яке робить ні більше, ні менше, ніж запитуваний OP.
Віктор Стоддард,

Тег позначки не призначений для використання для форматування.
Джессіка Б,

приємна альтернатива оригінальній відповіді!
Джозеф Пуаре

35
<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 вбудовані, таким чином, не порушують потоку абзацу, лише стиль між тегами.


20

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


16
<font color="red">This is some text!</font> 

Це найкраще працювало для мене, коли я хотів лише одне слово змінити на червоний колір у реченні.


<font color = "red"> Це якийсь текст! </font>
user8588011

3
Це не підтримується в HTML 5.
Стівен

2

Ви також можете зробити клас:

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

то у файлі css виконайте:

.mychangecolor{ color:#ff5 /* it changes to yellow */ }

2

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

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

-2

Ви можете використати довший нудний спосіб

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

ви отримуєте точку для решти

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.