Tô màu một từ bằng CSS

Question

Tôi muốn đặt màu của từng từ riêng lẻ trong một khối <pre> (gần như nói, để hiển thị mã có tô sáng cú pháp). Thẻ <font> không còn được dùng để sử dụng CSS, đủ công bằng; cú pháp bắt buộc là gì? Đặc biệt, trong những yếu tố nào các từ nên được bọc? Trước đây tôi đã sử dụng <div> để đánh dấu các đoạn văn bản để tạo kiểu CSS, nhưng điều đó dường như chỉ phù hợp để đánh dấu các đoạn văn đầy đủ.

Answer 1

Bạn nên sử dụng phần tử đơn giản nhất, chung nhất inline: <span>. Đối với mỗi loại mã thông báo, hãy cung cấp một hoặc nhiều lớp thích hợp cho khoảng. Ví dụ:

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

See it in action.

Cập nhật: StackOverflow cũng làm nổi bật mã - mã ở trên được đánh dấu! HTML trông như thế nào? Xem HTML nguồn cho thấy dòng đầu tiên được đánh dấu bằng

<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>

phần tử HTML Đây là một container inline chung cho nội dung phân nhịp, mà không vốn đã đại diện cho bất cứ điều gì. Nó có thể được sử dụng để nhóm các phần tử cho mục đích tạo kiểu (sử dụng thuộc tính lớp hoặc id) hoặc vì chúng chia sẻ các giá trị thuộc tính, chẳng hạn như lang. Nó chỉ nên được sử dụng chỉ khi không có phần tử ngữ nghĩa nào khác phù hợp. <span> là rất giống như một yếu tố <div>, nhưng <div> là phần tử cấp khối trong khi một <span> là phần tử nội tuyến.

Answer 3

Sử dụng khoảng có thuộc tính kiểu trên đó. Giống như:

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

Answer 4

Sử dụng <span class="red">text</span> và một số CSS cơ bản như .red { color: red; }

Edit: thông báo tên lớp "đỏ" không phải là một thực hành tốt

Answer 5

Không có ma thuật đánh dấu ở đây: bạn có thể sử dụng bất kỳ nội tuyến đánh dấu, và bạn thực hiện phép thuật (tô màu hoặc định dạng khác) trong CSS. Về mặt kỹ thuật, không phải tất cả đánh dấu nội tuyến đều hợp lệ bên trong pre, nhưng trình duyệt không thực sự quan tâm. Điều quan trọng hơn là một số đánh dấu nội tuyến có một số chức năng hoặc hiển thị mặc định.

Nếu bạn không muốn bất kỳ hiển thị mặc định nào, bạn có thể sử dụng đánh dấu a hoặc font hoặc span, không ảnh hưởng đến bất cứ điều gì khi chúng không có thuộc tính và chúng không được tạo kiểu. Nếu bạn muốn một số hiển thị mặc định, bạn có thể sử dụng đánh dấu tương ứng, nếu nó tồn tại, chẳng hạn như b cho chữ đậm hoặc u cho gạch dưới. Điều này có nghĩa là một số bản trình bày đặc biệt được áp dụng ngay cả khi biểu định kiểu của bạn không được sử dụng.

Hầu hết mọi người quyết định chỉ sử dụng span, như được đề xuất trong các câu trả lời khác. Nó đơn giản, và không ai có thể tuyên bố rằng nó có "ngữ nghĩa sai", bởi vì nó không có. Nhưng ma thuật thực sự là trong CSS, và bạn sử dụng đánh dấu chỉ để phân biệt một số chuỗi ký tự như một phần tử, để nó có thể được tạo kiểu như một đơn vị.

Trái với những gì bạn có thể nghe hầu hết mọi người nói, không có gì sai khi sử dụng font khi bạn thực sự đang thực hiện một số cài đặt phông chữ. Nhưng có một vấn đề thực tế trong việc sử dụng kiểu cũ như <font color=red>. Nếu bạn có các thẻ gazillion như vậy và sếp hoặc khách hàng hoặc vợ của bạn cho bạn biết sử dụng một màu đỏ khác, bạn sẽ phải thay đổi các thẻ, có lẽ trong hàng tá tệp. Nhưng nếu bạn đã viết <font class=keyword> hoặc <a class=keyword> hoặc nếu bạn thích, <span class=keyword> và bạn sử dụng tệp CSS được đề cập trong tất cả các tệp HTML của mình, bạn sẽ chỉ cần thay đổi một giá trị trong tệp CSS đó.