Раскраска одного слова с помощью CSS

Ответ 1

Вы должны использовать простейший, самый общий встроенный элемент: <span>. Для каждого типа токена укажите один или несколько подходящих классов для диапазона. Например:

<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

Ответ 2

<span>

Этот HTML-элемент является общим встроенным контейнером для фразирования содержимого, который по сути не представляет ничего. Он может использоваться для группировки элементы для стилизации (с использованием атрибутов класса или идентификатора) или потому что они разделяют значения атрибутов, такие как lang. Он должен использоваться только тогда, когда нет другого семантического элемента. <span> очень как элемент <div>, но <div> является элементом уровня блока, тогда как a <span> является встроенным элементом.

Ответ 3

Используйте span с атрибутом стиля на нем. Как:

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

Ответ 4

Используйте <span class="red">text</span> и некоторый базовый CSS, например .red { color: red; }

Изменить: отметить имя класса "красный" не является хорошей практикой

Ответ 5

Здесь нет волшебства разметки: вы можете использовать любую встроенную разметку, и вы делаете магию (окраску или другое форматирование) в CSS. Технически, не вся встроенная разметка действительна внутри pre, но браузеры действительно не заботятся. Более важно то, что некоторые встроенные разметки имеют определенный рендеринг или функциональность по умолчанию.

Если вы не хотите рендеринга по умолчанию, вы можете использовать разметку a или font или span, которые не влияют ни на что, когда у них нет атрибутов, и они не имеют стиля. Если вам нужен рендеринг по умолчанию, вы можете использовать соответствующую разметку, если она существует, например b для жирного шрифта или u для подчеркивания. Это означает, что применяется специальная презентация, даже если ваша таблица стилей не используется.

Большинство людей предпочитают использовать только span, как это предлагается в других ответах. Его просто, и никто не может утверждать, что он имеет "неправильную семантику", потому что он не имеет. Но магия действительно в CSS, и вы используете разметку, чтобы различать некоторую последовательность символов как элемент, чтобы его можно было создать как единицу.

Вопреки тому, что вы, вероятно, слышали большинство людей, говорящих, нет ничего неправильного в использовании font, когда вы действительно выполняете некоторые настройки шрифта. Но есть практическая проблема в использовании старого стиля, например <font color=red>. Если у вас есть такие теги gazillion, и ваш босс, или клиент или жена говорит вам использовать другой оттенок красного, вам придется менять мириады тегов, возможно, в десятках файлов. Но если вы написали <font class=keyword> или <a class=keyword> или, если хотите, <span class=keyword>, и вы используете файл CSS, упомянутый во всех ваших HTML файлах, вам нужно будет изменить только одно значение в этом файле CSS.