Cách để Dùng thẻ màu chữ trên HTML

Trong bài viết này:Dùng thẻ HTMLDùng phần tử CSS nội dòng

Hiện nay, lập trình viên web chuyên nghiệp ít khi sử dụng thẻ phông chữ HTML vì chúng đã lỗi thời.[1] Tuy rằng đây là cách dễ dàng để thay đổi màu sắc phông chữ cho những dự án cá nhân, nhưng không có gì bảo đảm rằng chúng sẽ hoạt động khi trình duyệt được cập nhật. Vì thế, để đạt kết quả tốt nhất, bạn nên áp dụng phương pháp CSS cuối bài viết này.

1
Dùng thẻ HTML

  1. 1
    Tạo thẻ phông chữ. Đặt thẻ <font> phía trước văn bạn mà bạn muốn đổi màu. Đặt thẻ đóng </font> phía sau văn bản.
    • Chẳng hạn:
      <font>Văn bản này sẽ có màu xanh dương.</font>
  2. 2
    Thêm thuộc tính màu sắc. Chèn color=" " vào trong thẻ mở phông chữ. Màu sắc mà bạn muốn sẽ nằm trong dấu ngoặc kép.
    • Ví dụ:
      <font>color=" "Văn bản này sẽ có màu xanh dương.</font>
  3. 3
    Chọn tên màu sắc. Tên màu sắc luôn là một từ và không có dấu cách. Hãy thử một cái tên đơn giản như "blue" (xanh dương), "red" (đỏ), hoặc tên mang tính miêu tả như "lightblue" (danh dương nhạt) hay "darkblue" (xanh dương đậm). Để có thêm nhiều lựa chọn, bạn hãy tra cứu danh sách từ khóa màu sắc được công nhận, trong đó bao gồm "maroon" (nâu sẫm), "steelblue" (xanh xám) và "lime" (vàng nhạt).[2]
    • Chẳng hạn:
      <font color="blue">Văn bản này sẽ có màu xanh dương.</font>
  4. 4
    Sử dụng mã màu hex. HTML cho phép bạn chọn trong số hàng triệu màu, nhưng không phải màu nào cũng có tên. Thay vào đó, chúng sử dụng một mã sáu ký tự được viết theo hệ đếm thập lục phân (hexadecimal). Trên mạng có nhiều trang web liệt kê mã màu hex hoặc cho bạn chọn một màu sắc trên màn hình và hiển thị giá trị hex. Mã này bắt đầu bằng dấu # và có sáu ký tự, trong đó gồm các số từ 0-9 hoặc chữ cái từ A-F.
    • <font color="FF0000">Mã #FF0000 tượng trưng cho màu đỏ.</font>
    • <font color="00FF00">Mã này tạo ra văn bản màu xanh lá.</font>
    • <font color="0000FF">Mã này tạo ra văn bản màu xanh dương.</font>
  5. 5
    Thử nghiệm với giá trị RGB. Không nhất thiết bạn phải biết cách mã màu hex hoạt động mới có thể sử dụng trình chọn màu trực tuyến. Tuy thế, nếu muốn trải nghiệm, bạn có thể bắt đầu từ cơ bản:
    • Mỗi mã sáu ký tự được chia thành các giá trị đỏ, xanh lá (green) và xanh dương ("RGB"). Ví dụ, mã #FF0000 có nghĩa là "red: FF green: 00 blue: 00."
    • Để thay đổi lượng màu đỏ, hãy đổi hai ký tự đầu tiên. Bạn có thể dùng bất kỳ giá trị từ 00 (không có màu đỏ) đến 99 (một chút đỏ) hoặc các chữ cái AA (hơi đỏ) cho đến FF (tối đa lượng màu đỏ).
    • Dùng hệ thống tương tự để thay đổi giá trị màu xanh lá (hai ký tự giữa) hoặc xanh dương (hai chữ số cuối).
  6. 6
    Hiểu sâu hơn về mã màu hex. Để lựa chọn màu sắc chính xác, bạn cần biết thêm hai khái niệm sau:
    • Mỗi ba giá trị màu là hai chữ số. Nếu muốn điều chỉnh không quá nhiều, bạn chỉ cần thay đổi chữ số thứ hai. Ví dụ, #850000#890000 khá giống nhau, còn màu #A50000 sẽ sáng hơn một chút.
    • Các giá trị RGB kết hợp bằng hệ màu cộng. Màu đỏ và xanh lá sẽ tạo ra màu vàng; xanh dương và xanh lá tạo thành màu lục lam; đỏ và xanh dương sẽ tạo ra màu đỏ tía.[3]

2
Dùng phần tử CSS nội dòng

  1. 1
    Chèn thuộc tính style vào thẻ HTML. Thuộc tính style=" " cho phép bạn sử dụng CSS trong tài liệu HML. Đây là cách dễ dàng để thiết lập màu phông chữ cho dù bạn không biết về CSS. Hãy thử đặt thuộc tính style vào một trong các thẻ HTML:
    • <p style=" ">Thẻ p dùng để xác định một đoạn văn bản.</p>
    • <a style=" " href="https://www.wikihow.com">Thẻ a dùng để tạo liên kết.</a>
    • <span style=" ">Sử dụng thẻ span để tô màu một phần của đoạn văn mà không làm thay đổi định dạng.</span>
  2. 2
    Chỉ định màu sắc. Chèn color: cùng với tên màu sắc hoặc mã thập lục bên trong dấu ngoặc kép.[4] Để biết thêm chi tiết về tên và mã màu, hãy xem phương pháp bên trên hoặc làm thử những ví dụ sau:
    • <span style="color:red">Mã này tạo thành văn bản màu đỏ.</span>
    • <span style="color:#556B2F">Mã này tạo ra màu xanh ô liu đậm.</span>
    • <span style="color:#745">CSS hỗ trợ rút ngắn 3 chữ số. Mã màu 745 là viết tắt của 774455.</span>
  3. 3
    Sử dụng các lớp CSS với những kiểu chữ mà bạn dùng thường xuyên. Nếu muốn tạo kiểu cho từng chú thích hình ảnh hay tiêu đề của phần nội dung trên một trang web lớn, bạn không cần phải gõ lại toàn bộ mã nhiều lần. Thay vì thế, hãy định nghĩa một lớp CSS ở đầu văn bản, như vậy, bạn có thể gọi lớp chỉ bằng một ký hiệu viết tắt mỗi khi muốn sử dụng kiểu định dạng ấy.[5] Sau đây là ví dụ cho thấy vài cách dùng mới của thuộc tính style:
    • Trong phần <head>của tài liệu HTML, hãy dán mã sau:
      <style type="text/css">
      .fancy {
      font-family: Cursive;
      color: darkgreen;
      font-size:150%;
      }
      </style>
    • Tiếp theo, trong phần nội dung chính của văn bản, dùng thuộc tính class="fancy" để thêm kiểu này như một thành phần. Chẳng hạn, <p class="fancy">đoạn văn này</p> sẽ có màu xanh lá cây đậm, phông chữ Cursive (chữ viết tay) kích thước lớn.
    • Lưu ý rằng bạn có thể dùng bất kỳ từ nào để thay cho từ "fancy" nhằm miêu tả một kiểu chữ.

Lời khuyên

  • Bạn nên cố gắng làm trang của mình dễ đọc. Màu chữ sáng sẽ khó đọc trên nền trắng, và màu chữ tối sẽ khó đọc trên nền đen.
  • Máy tính đời cũ hiển thị giới hạn khoảng 65,000 màu, còn máy tính cũ hơn nữa chỉ hiển thị giới hạn đến 256 màu. Tuy nhiên, trên 99% người dùng internet sẽ có thể thấy được màu sắc mà bạn chỉ định.[6]

Cảnh báo

  • Thành phần phông chữ không được hỗ trợ trên chuẩn XHTML 1.0 Strict DTD.

Thông tin Bài viết

Chuyên mục: Đa phương tiện

Ngôn ngữ khác:

English: Use Font Color Tags in HTML, Español: usar etiquetas de color de fuentes en HTML, Português: Usar as Tags de Cor de Fonte em HTML, Italiano: Usare i Tag Font e Color in HTML, Русский: использовать теги цвета шрифта в HTML, Deutsch: In HTML Tags für die Schriftfarbe verwenden, Français: utiliser les balises de couleur de police en HTML, Bahasa Indonesia: Menggunakan Tanda Fon Berwarna pada HTML, ไทย: ใช้แท็กสีฟอนต์ (Font Color Tags) ใน HTML, العربية: استخدام وسوم لون الخط في لغة اتش تي ام ال

Trang này đã được đọc 6.923 lần.
Bài viết này đã giúp ích cho bạn?