2012-05-05 3 views
13

<pre> 블록 내에서 개별 단어의 색을 설정하고 싶습니다 (구문 강조 표시가있는 코드를 표시하는 경우). <font> 태그는 CSS 사용에 유리하므로 더 이상 사용되지 않습니다. 필요한 구문은 무엇입니까? 특히 단어가 감싸 져야하는 요소는 무엇입니까? 이전에 <div>을 사용하여 CSS 스타일에 텍스트 덩어리를 표시했지만 전체 단락을 표시하는 데만 적합하다고 보입니다.CSS로 한 단어 만 색칠

답변

23

가장 단순하고 가장 일반적인 inline 요소 (<span>)를 사용해야합니다. 각 토큰 유형에 대해 하나 이상의 적절한 클래스를 스팬에 제공하십시오. 예 :

<span class="type">int</span> 
<span class="name">foo</span> 
<span class="op">=</span> 
<span class="number literal">42</span> 

See it in action.

업데이트 : StackOverflow는 코드 강조 표시도합니다. 위의 코드가 강조 표시되어 있습니다! 그 모양을위한 HTML은 무엇입니까? 소스 HTML보기 첫 번째 줄은

<span class="tag">&lt;span</span> 
<span class="pln"> </span> 
<span class="atn">class</span> 
<span class="pun">=</span> 
<span class="atv">"type"</span> 
<span class="tag">&gt;</span> 
<span class="pln">int</span> 
<span class="tag">&lt;/span&gt;</span> 

// and it goes on 
+0

예, 기존 형광펜은 ''이라는 클래스를 사용했습니다. – delicateLatticeworkFever

5

<span>

이 HTML 요소를 사용하여 본질적으로 아무것도 나타내지 않는 말씨의 콘텐츠에 대한 일반적인 인라인 용기, 입니다 강조 표시되어 있는지 보여줍니다. 스타일을 목적으로 (클래스 또는 id 속성을 사용하여) 요소를 그룹화하는 데 사용할 수 있습니다. 또는 은 속성 값 (예 : lang)을 공유하기 때문에 그룹화하는 데 사용할 수 있습니다. 다른 의미 요소가 적절하지 않은 경우에만 을 사용해야합니다. <span>은 매우 과 매우 비슷하지만 <div> 요소와 비슷하지만 <div>은 블록 수준 요소이며 a <span>은 인라인 요소입니다.

+6

대신 https://developer.mozilla.org/en/HTML/Element/span – jack

5

스타일 속성이있는 범위를 사용하십시오. 마찬가지로 :

This is a <span style="color:#f00;">sentence</span>. 
3

사용 <span class="red">text</span>.red { color: red; }

편집과 같은 몇 가지 기본적인 CSS : 통지 클래스 이름 "빨강"여기에는 마크 업 마술은 없다 좋은 방법

+4

색상과 같은 것을 클래스 이름으로 사용하지 않는 것이 가장 좋습니다. 앞으로 요소를 파란색으로 채색하려는 경우 HTML에서 해당 범위의 모든 항목을 편집하거나 의미가없는 클래스 이름을 지정해야합니다. – shanethehat

+0

내가 찾은 가장 간단한 예제를 보여 주었지만, 정확함에 감사드립니다. – zessx

0

되지 않습니다 : 당신이 어떤 인라인을 사용할 수 있습니다 마크 업을하고 CSS에서 마술 (채색 또는 다른 형식)을 수행합니다. 기술적으로 모든 인라인 마크 업은 pre 안에 유효하지는 않지만 브라우저는 실제로 신경 쓰지 않습니다. 일부 인라인 마크 업에는 기본 렌더링 또는 기능이 더 중요합니다. 당신이 어떤 기본 렌더링을하지 않으려면

, 그들이 속성이 없을 때 당신은 아무것도에 영향을 미치지 않는다 a 또는 font 또는 span 마크 업을 사용할 수 있습니다 그리고 그들은 스타일되지 않습니다. 기본 렌더링을 원하면 굵게는 b, 밑줄에는 u과 같은 해당 마크 업을 사용할 수 있습니다. 즉, 스타일 시트를 사용하지 않아도 특별한 프리젠 테이션이 적용됩니다.

대부분의 사람들은 다른 답변에서 제안 된대로 span을 사용하기로 결정했습니다. 그것은 간단합니다. 아무도 없기 때문에 "잘못된 의미"가 있다고 주장 할 수 없습니다. 그러나 마술은 실제로 CSS에 있으며 마크 업을 사용하여 요소의 일부 시퀀스를 요소로 구별하므로 단위로 스타일을 지정할 수 있습니다.

대부분의 사람들이 말하는 것과는 반대로, 실제로 글꼴 설정을 할 때 font을 사용할 때 본질적으로 잘못된 것은 없습니다. 그러나 예전 스타일 사용에는 실질적인 문제가 있습니다 (예 : <font color=red>). 그런 gazillion 태그가 있고 사장님이나 고객 또는 아내가 다른 빨간색 음영을 사용하라고 말하면 수십 개의 파일에서 무수히 많은 태그를 변경해야합니다. 그러나 <font class=keyword> 또는 <a class=keyword> 또는 원하는 경우 <span class=keyword>을 작성하고 모든 HTML 파일에서 언급 된 CSS 파일을 사용하는 경우 해당 CSS 파일에서 하나의 값만 변경해야합니다.