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.