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?

html css text colors inline Mitch
sumber

Jawaban:

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

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 <mark>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)<span style='color: #FF0000;'>January 30, 2011</span>

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
<font color = "red"> Ini adalah teks! </font>
user8588011
3
Ini tidak didukung dalam HTML 5.
Stephen
2

Anda juga dapat membuat kelas:

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

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