使用CSS爲單個單詞着色

我想要設置<pre>塊內單個單詞的顏色（粗略地說，用於顯示帶有語法高亮顯示的代碼）。 <font>標籤不贊成使用CSS，不夠公平;需要什麼語法？特別是用什麼元素來包裝這些詞呢？我以前使用<div>來標記CSS樣式的文本塊，但這似乎只適用於標記完整段落。使用CSS爲單個單詞着色

來源

2012-05-05 rwallace

您應該使用最簡單，最通用的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

來源

2012-05-05 16:27:12 Jon

呀，現有熒光筆我見過使用類與''。 – delicateLatticeworkFever

<span>

這個HTML元素突出顯示爲措辭內容的通用直列容器，，其本身不表示任何東西。它可用於將元素用於樣式目的（使用類或ID屬性）或，因爲它們共享屬性值（例如lang）。只有在沒有其他語義元素是合適的時候才應該使用。 <span>非常類似於<div>元素，但<div>是塊級元素，而和<span>是內聯元素。

來源

2012-05-05 16:27:32 Marcx

而是https://developer.mozilla.org/en/HTML/Element/span – jack

使用帶有style屬性的span。像：

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

來源

2012-05-05 16:28:18

使用<span class="red">text</span>和一些基本的CSS像.red { color: red; }

編輯：通知類名「紅」是不是一個好的做法

來源

2012-05-05 16:28:43 zessx

最好是避免使用像顏色的類名稱。如果將來你想要顏色的元素藍，你要麼不得不修改跨度的所有occurances在HTML，或有一個類名是沒有意義的。 – shanethehat

我給出了我發現的最簡單的例子，但你說得對，謝謝你的精確度/提示。 – zessx

這裏沒有標記的魔法：你可以使用任何內嵌標記，並在CSS中執行魔術（着色或其他格式）。從技術上講，並非所有內聯標記在pre內都有效，但瀏覽器並不關心。更重要的是，某些內聯標記具有一些默認的呈現或功能。

如果你不希望任何默認渲染，你可以使用a或font或span標記，這對任何事情沒有影響時，他們不具備的屬性和他們沒有風格。如果您需要某種默認渲染，則可以使用相應的標記（如果存在），例如b用於粗體，或者u用於下劃線。這意味着即使沒有使用樣式表，也會應用一些特殊的表示。

大多數人決定只使用span，正如其他答案中所建議的。這很簡單，沒有人可以聲稱它有「錯誤的語義」，因爲它沒有。但是這個魔法真的在CSS中，而且你使用標記來區分一些字符序列作爲一個元素，以便它可以作爲一個單元來設置。

相反，你可能聽到很多人說，沒有什麼內在的錯誤使用font當你真的做一些字體設置。但是像<font color=red>這樣的舊式用法存在實際問題。如果你有極大數的標籤一樣，和你的老闆或客戶或妻子告訴你使用的紅色不同的色調，你將不得不改變的標籤無數，也許在很多文件。但是，如果你寫<font class=keyword>或<a class=keyword>或者，如果你願意，<span class=keyword>，並且使用中提到的所有的HTML文件的CSS文件，則需要在CSS文件來改變只是一個值。

來源

2012-05-05 19:31:21

使用CSS爲單個單詞着色

回答

相關問題