HTML : 텍스트 문자열에서 특정 단어의 색상 변경

91

아래 메시지가 있습니다 (약간 변경됨).

"2011 년 1 월 30 일까지 대회에 참가하면 놀라운 여름 여행을 포함하여 최대 $$$$까지 우승 할 수 있습니다!"

나는 현재 :

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

텍스트 문자열 형식을 지정하지만 "January 30, 2011"의 색상을 # FF0000으로 변경하고 "summer"를 # 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>

— Jacob
소스

1

이것은 훌륭한 대답입니다! 점이 단락 태그 내부의 태그를 나타내는 것을 쉽게 보여줍니다. <style>을 사용하는 모든 사람에게이 정보를 명확히 설명합니다.

— Joseph Poirier

44

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>

그리고 이것을 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;
}

태그 에는 최소한 Chrome에서 기본 배경색이 있습니다.

— 후안 파블로 피네도
소스

3

답변이 주어지지 않은 것이 유감입니다. 나는이에 수여 한 것이다 (그리고 HTML을 지원하지 않는 브라우저를 사용하는 사람에 따라 헛소리는 (여전히 어떤있다)?)

— Mawg는 분석 재개 모니카 말한다

요청한 OP보다 더 많거나 적지 않은 간단하고 효과적인 솔루션입니다.

— Victor Stoddard 2016

마크 태그는 형식화에 사용하기위한 것이 아닙니다.

— Jessica B

원래 답변에 대한 좋은 대안!

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

범위 요소는 인라인이므로 단락의 흐름을 끊지 않고 태그 사이의 스타일 만 지정합니다.

— 데미안 라이트
소스

20

스팬을 사용하십시오. 전의)January 30, 2011

— brian_d
소스

16

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

이것은 문장에서 한 단어 만 빨간색으로 바꾸고 싶을 때 가장 효과적이었습니다.

— 사용자 8588011
소스

이것은 텍스트입니다!

— user8588011

3

HTML 5에서는 지원되지 않습니다.

— Stephen

2

수업을 만들 수도 있습니다.

 I am in yellow color!!!!!!

그런 다음 css 파일에서 다음을 수행하십시오.

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

— JayMcpeZ_
소스

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>

스 니펫 확장

당신은 나머지에 대한 요점을 얻습니다

— 오티스 대답
소스