Mã HTML cho Văn bản Màu – mã html để tô màu văn bản

Tự hỏi làm thế nào để thay đổi đúng màu sắc của văn bản khi viết mã trong HTML? Hãy để Career Karma chỉ cho bạn cách.

Bạn đang xem : mã html thành văn bản màu

Mã màu HTML ở định dạng thập lục phân gồm hai chữ số cho màu đỏ, xanh lam và xanh lục (#RRBBGG). Mã màu hệ thập lục phân đi từ 00 đến DD. Ví dụ: # FF0000 sẽ có màu đỏ và # 40E0D0 sẽ có màu xanh ngọc. Mã màu hệ thập lục phân được sử dụng trong HTML cho mọi thứ, từ văn bản đến nền.

Mã hóa trang web bằng HTML hoặc H yper T ext M arkup L anguage, là một trong những kỹ năng cơ bản nhất mà mọi lập trình viên phải thành thạo. ngôn ngữ đánh dấu này là cách chúng tôi tổ chức, sắp xếp và định dạng văn bản và tài liệu để sử dụng trên các trang web. Trong bài viết này, chúng ta sẽ xem xét kỹ lưỡng mã HTML cho văn bản màu, một yếu tố thiết kế quan trọng cho bất kỳ trang web nào. Sau đó, bạn có thể lấy những gì bạn đã học được trong bài viết này và thử nghiệm trong trình chỉnh sửa HTML.

Phương pháp Mã hóa Văn bản Màu bằng HTML

Trên thực tế, có 4 phương pháp khác nhau để mã hóa màu văn bản bằng HTML. Hãy xem xét 4 phương pháp và xem một số ví dụ về mỗi phương pháp.

1. Văn bản HTML màu với mã màu Hex

Phương pháp phổ biến nhất để thay đổi màu của văn bản là sử dụng mã màu hệ thập lục phân , còn được gọi là Mã màu hệ thập lục phân . Các mã này bao gồm các kết hợp của các số nguyên 0, 1, 2, 3, 4, 5, 6, 7, 8 và 9; và các chữ cái A, B, C, D, E và F. Vì vậy, mã màu có thể là # FF0000 hoặc # 33DDFF.

Mỗi mã màu hex tương ứng với một màu cụ thể. Ví dụ: hai ví dụ của chúng tôi ở trên tương ứng với các màu sau:

Ví dụ về mã màu hệ lục phân HTML

Để tìm mã màu hex mà bạn muốn sử dụng cho văn bản HTML của mình, bạn có thể sử dụng một trang web như Mã màu HTML , cung cấp các biểu đồ màu tương tác và cân trượt. Bạn cũng có thể sử dụng công cụ kẻ mắt để đối sánh mã màu hex của một phần tử trên màn hình của bạn với tiện ích mở rộng trình duyệt như ColorZilla .

Khi bạn biết mã màu hex của mình, việc thêm thuộc tính style để thay đổi màu văn bản HTML của bạn rất đơn giản. Chỉ cần sử dụng mã sau:

 & lt; body & gt;

  & lt; p style = "color: # FF9F35" & gt; Nghiệp Báo & lt; / p & gt;

& lt; / body & gt; 

Đoạn mã đó sẽ tạo ra văn bản có màu sau:

Xem Thêm  Hộp văn bản trong HTML - Thẻ HTML của trường nhập liệu - hộp nhập văn bản html

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Hãy so khớp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu tham gia bootcamp đến khi tìm được công việc đầu tiên của họ.

Nghiệp vụ

Và đó là tất cả những gì cần làm! Nó thật sự đơn giản. Hãy thử tự mình sử dụng trình chỉnh sửa mã trực tuyến miễn phí tại CodePen !

2. Văn bản HTML màu sử dụng tên màu

Có một cách thực sự dễ dàng khác để thay đổi màu văn bản của bạn trong HTML để có nhiều tùy chọn màu sắc. Tất cả những gì bạn phải làm là sử dụng các dòng mã tương tự từ ví dụ mã hex, nhưng thay vì mã HEX, bạn chỉ cần viết ra tên của màu. Bạn có thể tìm thấy danh sách đầy đủ 140 màu được đặt tên một lần nữa tại Mã màu HTML .

Để sao chép ví dụ trước của chúng tôi, mã màu văn bản HTML của chúng tôi sẽ trông giống như sau:

 & lt; body & gt;

  & lt; p style = "color: orange" & gt; Nghiệp Báo & lt; / p & gt;

& lt; / body & gt; 

Kết quả sẽ giống như sau:

Nghiệp vụ

Bây giờ, một người quan sát kỹ có thể nhận thấy rằng có một chút khác biệt trong màu cam ở đây. Đó là vì màu cam mà chúng tôi sử dụng cho biểu trưng Career Karma (# FF9F35) không tương ứng với một trong 140 màu có tên có sẵn. Vì vậy, trong trường hợp này, màu bạn nhận được khi sử dụng màu có tên là “cam” thực sự tương ứng với mã màu # FFA500.

[fasttrack_express_form]

3. Văn bản HTML màu có giá trị RGB

Giá trị RGB là một cách ngày càng phổ biến để thay đổi màu của văn bản trong HTML. Phương pháp này rất dễ sử dụng và nó hoạt động giống như HEX và tên màu. Chỉ cần tìm màu của bạn tại đây và chèn các giá trị RGB tương ứng vào văn bản bằng cách sử dụng các bước tương tự như trước đây. Mã của bạn sẽ trông giống như sau:

 & lt; body & gt;

  & lt; p style = "color: rgb (255,159,53)" & gt; Nghiệp Báo & lt; / p & gt;

& lt; / body & gt; 

Kết quả sẽ giống hệt với mã màu # FF9F35 của chúng ta:

Nghiệp vụ

Bạn cũng có thể thay đổi độ mờ của màu văn bản bằng cách sử dụng các giá trị RGB, đây là một lý do khác khiến phương pháp này trở nên rất phổ biến. Ví dụ dưới đây cho bạn thấy cách điều chỉnh độ mờ. Tăng hoặc giảm giá trị ‘0,5’ trong trình chỉnh sửa HTML để thấy sự khác biệt. Giá trị càng thấp, văn bản càng minh bạch.

Xem Thêm  Ánh xạ tên RGB sang màu (Triplet và Hex) - công cụ chuyển đổi tên rgb sang màu

Đối với ví dụ của chúng tôi, hãy làm cho văn bản cùng màu của chúng tôi trở nên trong suốt hơn nhiều:

 & lt; body & gt;

  & lt; p style = "color: rgb (255,159,53,0.5)" & gt; Nghiệp Báo & lt; / p & gt;

& lt; / body & gt; 

Và kết quả?

Nghiệp vụ

4. Văn bản HTML màu có giá trị HSL

Các giá trị HSL được sử dụng theo cách tương tự với các giá trị RGB và chúng là một lựa chọn tuyệt vời để tô màu văn bản trong HTML. Bạn cũng có thể sử dụng HSL để đặt giá trị cho độ đậm nhạt, màu sắc và độ mờ, điều này rất hữu ích cho công việc thiết kế tùy chỉnh. Màu HSL hoạt động theo cách tương tự như RGB, sự khác biệt chính là các tùy chọn cài đặt màu bổ sung mà nó cung cấp. Hãy thử ví dụ bên dưới.

Chúng ta hãy thử lại ví dụ ban đầu của chúng tôi, lần này với các giá trị HSL:

 & lt; body & gt;

  & lt; p style = "color: hsl (31,79%, 60%)" & gt; Nghiệp Báo & lt; / p & gt;

& lt; / body & gt; 

Mọi chuyện diễn ra như thế nào?

Nghiệp vụ

“Sự nghiệp Karma bước vào đời tôi khi tôi cần nhất và nhanh chóng giúp tôi đạt được một chiến thắng. Hai tháng sau khi tốt nghiệp, tôi đã tìm được công việc mơ ước phù hợp với giá trị và mục tiêu của tôi trong cuộc sống!”

Venus, Kỹ sư phần mềm tại Rockbot

Hoàn hảo! Bây giờ, khi bạn muốn thay đổi độ mờ bằng các giá trị HSL, chỉ cần thêm “a” vào cuối “hsl” và thêm giá trị từ 0 đến 1 sau dấu phẩy bổ sung trong các giá trị của bạn, như sau:

 & lt; body & gt;

  & lt; p style = "color: hsla (31,79%, 60%, 0,5)" & gt; Nghiệp Báo & lt; / p & gt;

& lt; / body & gt; 

Kết quả sẽ giống như sau:

Nghiệp vụ

Lời cuối cùng về mã hóa màu HTML

HTML là một ngôn ngữ mã hóa trang web cần thiết phải biết. Mặc dù nó khá cơ bản nhưng bạn vẫn có thể làm được nhiều việc hữu ích với nó. Nếu bạn muốn thử nghiệm HTML hoặc bắt đầu thực hiện dự án của riêng mình, hãy thử nghiệm với công cụ chỉnh sửa HTML, như CodePen .

Chúc bạn viết mã vui vẻ!

1 đánh giá


Xem thêm những thông tin liên quan đến chủ đề mã html để tô màu văn bản

HTML Tutorial 08 Changing the Background Color, Text Color and Font Color

  • Tác giả: Gaute Michel Ferstad
  • Ngày đăng: 2011-02-20
  • Đánh giá: 4 ⭐ ( 7873 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: All my videoes can be seen on my homepage www.gauteferstad.com. In this tutorial we see what is needed of code to change the background color of your document or website, change the color of your text and also just the color of a word.
Xem Thêm  Cách Căn trái, Phải & Căn giữa Văn bản trong HTML - cách căn chỉnh văn bản ngay trong html

Thiết lập màu nền trong HTML

  • Tác giả: tusach.thuvienkhoahoc.com
  • Đánh giá: 5 ⭐ ( 6835 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để thiết lập màu nền cho website trong HTML, bạn chỉ cần thay đổi thành tố phần “body” (thân) của thẻ

    . Các bước hướng dẫn sẽ thay

Cách để Đổi màu văn bản trong HTML

  • Tác giả: www.wikihow.vn
  • Đánh giá: 5 ⭐ ( 4459 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách để Đổi màu văn bản trong HTML. Mặc dù bạn có thể thay đổi màu sắc văn bản bằng cách sử dụng thẻ trong HTML, nhưng cách này không còn được hỗ trợ trên HTML5. Thay vào đó, bạn nên sử dụng CSS cơ bản để xác định màu sắc mà văn bản sẽ…

Table trong HTML

  • Tác giả: quantrimang.com
  • Đánh giá: 3 ⭐ ( 9137 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo bảng trong HTML thì cần những gì? Nó có phức tạp không? Muốn thêm màu cho đường viền bảng, thêm màu nền cho chữ trong bảng thì làm như thế nào? Trong bài viết này Quantrimang.com sẽ trả lời những câu hỏi đó và hướng dẫn bạn những thao tác cơ bản với bảng trên HTML, ngoài ra còn khuyến mại thêm cách tô màu xen kẽ cho các hàng trong bảng HTML. Mời các bạn cùng theo dõi.

Thiết lập màu trong HTML, Bảng mã màu trong HTML

  • Tác giả: hoclaptrinh.vn
  • Đánh giá: 4 ⭐ ( 9418 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết lập màu trong HTML, Bảng mã màu trong HTML. Màu tạo cảm giác về một vẻ bề ngoài đẹp cho trang web của bạn.

Thẻ định dạng văn bản trong HTML

  • Tác giả: hocjavascript.net
  • Đánh giá: 4 ⭐ ( 7195 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngoài việc hiển thị văn bản trong HTML theo cách thông thường, bạn có thể sử dụng các thẻ định dạng văn bản trong HTML

Định dạng trong Word: hướng dẫn cách tô màu chữ và màu nền chữ

  • Tác giả: gitiho.com
  • Đánh giá: 5 ⭐ ( 3512 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết hôm nay, Gitiho sẽ hướng dẫn bạn cách định dàng chữ văn bản trong Microsoft Word. Cụ thể hơn là cách để có thể tô màu cho chữ và màu nền cho chữ

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình