HTML: Mengubah warna kata tertentu dalam string teks

91

Saya memiliki pesan di bawah ini (sedikit berubah):

"Ikuti kompetisi sebelum 30 Januari 2011 dan Anda bisa memenangkan hingga $$$$ - termasuk perjalanan musim panas yang luar biasa!"

Saat ini saya memiliki:

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

memformat string teks, tetapi ingin mengubah warna "30 Januari 2011" menjadi # FF0000 dan "musim panas" menjadi # 0000A0.

Bagaimana saya melakukan ini secara ketat dengan HTML atau CSS sebaris?

— Mitch
sumber

116

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

Atau Anda mungkin ingin menggunakan kelas CSS sebagai gantinya:

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

— Yakub
sumber

1

Ini jawaban yang bagus! Dengan mudah menunjukkan bahwa titik-titik mewakili tag di dalam tag paragraf. Ini benar-benar mengklarifikasi informasi ini untuk siapa pun yang bekerja dengan <style>.

— Joseph Poirier

44

Anda dapat menggunakan Tag HTML5 :

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

Dan gunakan ini di 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;
}

Tag memiliki warna latar belakang default ... setidaknya di Chrome.

— Juan Pablo Pinedo
sumber

3

Sayang sekali jawabannya tidak diberikan. Saya akan memberikannya untuk ini (dan untuk mereka yang menggunakan browser yang tidak mendukung HTML (apakah masih ada?))

— Mawg mengatakan mengembalikan Monica

Solusi sederhana dan efektif yang tidak lebih, dan tidak kurang, dari yang diminta OP.

— Victor Stoddard

Tag tanda tidak dimaksudkan untuk digunakan untuk pemformatan.

— Jessica B

alternatif yang bagus untuk jawaban asli!

— Joseph Poirier

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>

Elemen span adalah sebaris sehingga tidak merusak alur paragraf, hanya gaya di antara tag.

— Damien-Wright
sumber

20

gunakan rentang. ex)January 30, 2011

— brian_d
sumber

16

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

Ini bekerja paling baik untuk saya ketika saya hanya ingin mengubah satu kata menjadi warna merah dalam sebuah kalimat.

— pengguna8588011
sumber

Ini adalah teks!

— user8588011

3

Ini tidak didukung dalam HTML 5.

— Stephen

2

Anda juga dapat membuat kelas:

 I am in yellow color!!!!!!

lalu di file css lakukan:

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

— JayMcpeZ_
sumber

2

Sesuaikan kode ini sesuka Anda dengan kebutuhan Anda, Anda dapat memilih teks? dalam paragraf menjadi font atau gaya apa yang Anda butuhkan !:

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

— Trevor Lee
sumber

-2

Anda bisa menggunakan cara boringer yang lebih panjang

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

Luaskan cuplikan

Anda mendapatkan poin untuk sisanya

— jawaban otis
sumber