HTML : 텍스트에서 특정 단어의 색상 변경
아래 메시지가 있습니다 (약간 변경됨).
"2011 년 1 월 30 일까지 일까지 대회에 참가하면 멋진 여름 여행을 포함하여 최대 $$$$까지 이길 수 있습니다!"
나는 현재 :
<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">
텍스트는 형식을 지정하지만 "2011 년 1 월 30 일"의 색상을 # FF0000으로 변경하고 "여름"을 # 0000A0으로 변경합니다.
HTML 또는 인라인 CSS로 엄격하게 수행 수행?
<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>
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에서 기본 배경색이 있습니다.
<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 style='color: #FF0000;'>January 30, 2011</span>
<font color="red">This is some text!</font>
이 문장에서 한 단어 만 빨간색으로 바꾸고 싶을 때 가장 많은 문장에서.
이 코드를 필요에 맞게 조정하십시오. 텍스트를 선택할 수 있습니까? 단락에서 필요한 글꼴이나 스타일을 지정하십시오! :
<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>
라이브러리를 사용하려는 경우 Azle 은이를 쉽게 수행합니다. 텍스트 요소 의 클래스 및 클래스 인스턴스 를 대상으로 지정 하기 만하면 됩니다. 예를 들어, 텍스트 블록이 "my_text"클래스가있는 요소 내부에 있고 해당 클래스의 첫 번째 인스턴스 인 경우 :
az.style_word('my_text', 1, {
"this_class" : "colored_word",
"word" : "deploy",
"color" : "red",
"word_instance" : 2
})
다음은 단어의 모든 인스턴스에 색상을 지정 하거나 단어 의 첫 번째, 두 번째 또는 세 번째 인스턴스를 구체적으로 타겟팅하는 방법을 보여줍니다 .
여기 FIDDLE입니다
더 긴 지루한 방법을 사용할 수 있습니다.
<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> 당신은 나머지에 대한 요점을 얻습니다
수업을 만들 수도 있습니다.
<span class="mychangecolor"> I am in yellow color!!!!!!</span>
그런 다음 css 파일에서 다음을 수행하십시오.
.mychangecolor{ color:#ff5 /* it changes to yellow */ }
'ProgramingTip' 카테고리의 다른 글
| PIL을 사용하여 픽셀의 RGB 제공 (0) | 2020.10.12 |
|---|---|
| C #의 memset에 해당하는 것은 무엇입니까? (0) | 2020.10.11 |
| ab가 apr_socket_recv로 오류가 발생했습니다 : 연결이 거부되었습니다. (61). (0) | 2020.10.11 |
| React로 현재 전체 URL을 개발시겠습니까? (0) | 2020.10.11 |
| 저장소와 서비스의 차이점은 무엇입니까? (0) | 2020.10.11 |