Kolorowanie pojedynczego słowa za pomocą CSS

Question

Chcę ustawić kolor pojedynczych słów w bloku <pre> (w przybliżeniu, aby wyświetlić kod z podświetlaniem składni). Znacznik <font> jest przestarzały na korzyść użycia CSS, wystarczająco dobry; jaka jest wymagana składnia? W szczególności, w jakim elemencie powinny być zawijane słowa? Wcześniej używałem <div> do zaznaczania fragmentów tekstu do stylizacji CSS, ale wydaje się, że jest to odpowiednie tylko do oznaczania pełnych akapitów.

Answer 1

Powinieneś użyć najprostszego, najbardziej ogólnego elementu: inline: <span>. Dla każdego typu tokena należy podać jedną lub więcej odpowiednich klas do zakresu. Na przykład:

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

See it in action.

Aktualizacja: StackOverflow również podświetla kod - kod tuż powyżej jest podświetlony! Jak wygląda kod HTML? Przedstawiamy HTML source pokazuje, że pierwsza linia jest podświetlona przy użyciu

<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 

Answer 2

<span>

tego elementu HTML jest ogólny pojemnik inline za treści frazowanie które z natury nie reprezentują niczego. Może być używany do grupowania elementów do celów stylizacji (przy użyciu atrybutów klasy lub identyfikatora) lub , ponieważ mają one wspólne wartości atrybutów, takie jak język. Należy go używać tylko wtedy, gdy nie jest odpowiedni inny element semantyczny. <span> to bardzo podobnie jak element <div>, ale <div> jest elementem blokowym, natomiast a <span> jest elementem wstawianym.

Answer 3

Użyj zakresu z atrybutem stylu na nim. Jak:

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

Answer 4

Zastosowanie <span class="red">text</span> i niektóre podstawowe CSS jak .red { color: red; }

Edit: Anons nazwa klasy „czerwony” nie jest dobrą praktyką

Answer 5

Nie ma znaczników magiczne tutaj: można użyć dowolnego inline znaczników, a ty robisz magię (kolorowanie lub inne formatowanie) w CSS. Z technicznego punktu widzenia nie wszystkie wbudowane znaczniki są ważne wewnątrz pre, ale przeglądarki naprawdę ich nie obchodzą. Ważniejsze jest to, że niektóre wbudowane znaczniki mają pewne domyślne renderowanie lub funkcję.

Jeśli nie chcemy żadnego domyślnego renderowania, można użyć a lub font lub span znaczników, które nie mają wpływu na nic, gdy nie mają atrybutów i nie są one urządzone. Jeśli chcesz uzyskać domyślne renderowanie, możesz użyć odpowiedniego znacznika, jeśli istnieje, np. b dla pogrubienia lub u dla podkreślenia. Oznacza to, że niektóre specjalne prezentacje są stosowane, nawet jeśli twój arkusz stylów nie jest używany.

Większość osób decyduje się na używanie tylko span, co sugerują inne odpowiedzi. To proste i nikt nie może twierdzić, że ma "złą semantykę", ponieważ nie ma żadnej. Ale magia jest naprawdę w CSS, a ty używasz znaczników tylko po to, by rozróżnić sekwencję znaków jako element, aby można było go stylizować jako jednostkę.

W przeciwieństwie do tego, co prawdopodobnie słyszysz, większość ludzi mówi, nie ma nic nieodwołalnego w używaniu font, kiedy naprawdę robisz jakieś ustawienia czcionek. Istnieje jednak praktyczny problem w używaniu w starym stylu, takim jak <font color=red>. Jeśli masz takie znaczniki gazillion, a twój szef lub klient lub żona poleci ci użycie innego odcienia czerwieni, będziesz musiał zmienić miriady tagów, być może w dziesiątkach plików. Ale jeśli napisałeś <font class=keyword> lub <a class=keyword> lub, jeśli wolisz, <span class=keyword> i używasz pliku CSS, o którym mowa we wszystkich twoich plikach HTML, będziesz musiał zmienić tylko jedną wartość w tym pliku CSS.