14

ブロック内の個々の単語の色を設定したい<pre>（大まかに言えば、構文を強調表示してコードを表示するため）。この<font>タグはCSSを使用するために非推奨になりましたが、十分に公平です。必要な構文は何ですか？特に、単語はどの要素でラップする必要がありますか？以前はCSSスタイルのテキストのチャンクをマークするために使用しまし<div>たが、それは完全な段落をマークする場合にのみ適しているようです。

4

5 に答える 5

24

最も単純で最も一般的なインライン要素を使用する必要があります<span>。トークンのタイプごとに、スパンに1つ以上の適切なクラスを指定します。例えば：

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

実際の動作をご覧ください。

更新： 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-05T16:27:12.147 に答える
8

その上にスタイル属性を持つスパンを使用します。好き：

This is a <span style="color:#f00;">sentence</span>.
于 2012-05-05T16:28:18.687 に答える
5

<span>

このHTML要素は、コンテンツを表現するための一般的なインラインコンテナであり、本質的に何も表していません。これは、スタイリングの目的で（classまたはid属性を使用して）要素をグループ化するために、またはそれらがlangなどの属性値を共有するために使用できます。他のセマンティック要素が適切でない場合にのみ使用する必要があります。は要素<span>に非常によく似ていますが、ブロックレベルの要素であるのに対し、aはインライン要素です。<div><div><span>

于 2012-05-05T16:27:32.557 に答える
4

使用<span class="red">text</span>といくつかの基本的なCSSのような.red { color: red; }

編集：クラス名「赤」は良い習慣ではないことに注意してください

于 2012-05-05T16:28:43.343 に答える