Mã CSS để thay đổi màu chữ là gì?

Chúng tôi sử dụng thuộc tính style để đặt màu phông chữ trong HTML. Thuộc tính style chỉ định kiểu nội tuyến cho một phần tử, với thuộc tính CSS color. Thuộc tính được sử dụng với HTML

thẻ, với màu thuộc tính CSS. HTML5 không hỗ trợ thẻ, vì vậy kiểu CSS được sử dụng để thêm màu phông chữ. Thẻ không được dùng trong HTML5

cú pháp

text…

Thí dụ

Trong ví dụ bên dưới, chúng tôi đặt màu phông chữ của văn bản bên trong

nhãn

HTML Font color Products

This is demo content.

Thí dụ

Sau đây là chương trình ví dụ để đặt màu phông chữ trong HTML

HTML Articles

Thí dụ. Chỉ định phong cách nội bộ

Chúng ta cũng có thể chỉ định kiểu nội bộ cho một phần tử, với thuộc tính CSS color để đặt màu phông chữ trong HTML. Sau đây là chương trình ví dụ cho biểu định kiểu nội bộ để đặt màu phông chữ trong HTML

Khi nói đến việc tùy chỉnh trang web của bạn, màu phông chữ thường bị bỏ qua. Trong hầu hết các trường hợp, chủ sở hữu trang web để màu phông chữ mặc định như màu đen hoặc bất kỳ kiểu chủ đề nào của họ đã xác định cho màu văn bản phần thân và tiêu đề

Tuy nhiên, bạn nên thay đổi màu phông chữ HTML trên trang web của mình vì một số lý do. Thay đổi màu phông chữ HTML có vẻ khó khăn, nhưng nó khá đơn giản. Có một số cách để thay đổi màu phông chữ trên trang web của bạn

Trong bài đăng này, chúng tôi sẽ chỉ cho bạn các cách khác nhau để thay đổi màu phông chữ trang web của bạn, cũng như thảo luận về lý do tại sao bạn muốn làm điều đó ngay từ đầu

Xem Hướng dẫn bằng video của chúng tôi để thay đổi màu phông chữ HTML

Tại sao thay đổi màu phông chữ HTML?

Bạn muốn thay đổi màu phông chữ vì làm như vậy có thể giúp cải thiện khả năng đọc và khả năng truy cập trang web của bạn. Ví dụ: nếu trang web của bạn sử dụng bảng màu tối hơn, việc để phông chữ màu đen sẽ khiến bạn khó đọc văn bản trên trang web của mình

Một lý do khác khiến bạn muốn xem xét thay đổi màu phông chữ là nếu bạn định sử dụng màu tối hơn từ bảng màu thương hiệu của mình. Đây là một cơ hội khác để củng cố thương hiệu của bạn. Nó xây dựng tính nhất quán của thương hiệu và đảm bảo rằng văn bản trên tất cả các kênh tiếp thị của bạn trông giống nhau

Ngoài cách đó, hãy xem cách bạn có thể xác định và thay đổi màu phông chữ HTML

Xem cách Kinsta chống lại đối thủ. So sánh

Khi nói đến việc tùy chỉnh trang web của bạn, màu phông chữ thường bị bỏ qua. nhưng đó là một chỉnh sửa đơn giản có thể thêm nhiều cá tính. ✨🎨Nhấp để Tweet

Các cách để xác định màu sắc

Có một số cách để xác định màu sắc trong thiết kế web, bao gồm tên, giá trị RGB, mã hex và giá trị HSL. Hãy cùng xem cách chúng hoạt động

Tên màu

Tên màu là cách dễ nhất để xác định màu trong kiểu CSS của bạn. Tên màu đề cập đến tên cụ thể cho màu HTML. Hiện tại, có 140 tên màu được hỗ trợ và bạn có thể sử dụng bất kỳ màu nào trong số đó trong kiểu của mình. Ví dụ: bạn có thể sử dụng “màu xanh lam” để đặt màu cho một thành phần riêng lẻ thành màu xanh lam

Mã CSS để thay đổi màu chữ là gì?
Tên màu HTML

Tuy nhiên, nhược điểm của phương pháp này là không phải tên màu nào cũng được hỗ trợ. Nói cách khác, nếu bạn sử dụng một màu không có trong danh sách các màu được hỗ trợ, bạn sẽ không thể sử dụng nó trong thiết kế của mình theo tên màu của nó

Giá trị RGB và RGBA

Tiếp theo, chúng ta có các giá trị RGB và RGBA. RGB là viết tắt của Red, Green và Blue. Nó xác định màu bằng cách trộn các giá trị đỏ, lục và lam, tương tự như cách bạn trộn một màu trên bảng màu thực tế

Mã CSS để thay đổi màu chữ là gì?
Giá trị RGB

Giá trị RGB trông như thế này. RGB(153,0,255). Số đầu tiên chỉ định đầu vào màu đỏ, số thứ hai chỉ định đầu vào màu xanh lá cây và số thứ ba chỉ định màu xanh lam

Giá trị của mỗi đầu vào màu có thể nằm trong khoảng từ 0 đến 255, trong đó 0 có nghĩa là màu hoàn toàn không có và 255 có nghĩa là màu cụ thể ở cường độ tối đa.

Giá trị RGBA thêm một giá trị nữa vào hỗn hợp và đó là giá trị alpha biểu thị độ mờ. Nó nằm trong khoảng từ 0 (không trong suốt) đến 1 (hoàn toàn trong suốt)

Giá trị HEX

Mã CSS để thay đổi màu chữ là gì?
Mã HEX là một tùy chọn lựa chọn màu dễ sử dụng khác

Mã màu hex hoạt động tương tự như mã RGB. Chúng bao gồm các số từ 0 đến 9 và các chữ cái từ A đến F. Mã hex trông như thế này. #800080. Hai chữ cái đầu tiên chỉ định cường độ của màu đỏ, hai số ở giữa chỉ định cường độ của màu xanh lá cây và hai chữ cái cuối cùng chỉ định cường độ của màu xanh lam

Giá trị HSL và HSLA

Một cách khác để xác định màu sắc trong HTML là sử dụng các giá trị HSL. HSL là viết tắt của màu sắc, độ bão hòa và độ sáng

Mã CSS để thay đổi màu chữ là gì?
Giá trị màu HSL

Hue sử dụng độ từ 0 đến 360. Trên một bánh xe màu tiêu chuẩn, màu đỏ là khoảng 0/360, màu xanh lá cây là 120 và màu xanh lam là 240

Độ bão hòa sử dụng tỷ lệ phần trăm để xác định mức độ bão hòa của màu. 0 đại diện cho màu đen và trắng và 100 đại diện cho màu đầy đủ

Cuối cùng, độ sáng sử dụng tỷ lệ phần trăm tương tự như độ bão hòa. Trong trường hợp này, 0% đại diện cho màu đen và 100% đại diện cho màu trắng

Ví dụ: màu tím mà chúng tôi đã sử dụng trong suốt bài viết này sẽ trông như thế này trong HSL.

This text is purple. 
2

HSL, giống như RGB, hỗ trợ độ mờ. Trong trường hợp đó, bạn sẽ sử dụng giá trị HSLA trong đó A là viết tắt của alpha và được xác định bằng một số từ 0 đến 1. nếu chúng tôi muốn giảm độ mờ của ví dụ màu tím, chúng tôi sẽ sử dụng mã này.

This text is purple. 
3

Bây giờ bạn đã biết cách xác định màu, hãy xem xét các cách khác nhau để thay đổi màu phông chữ HTML

Người già. This text is purple. 4 thẻ

Trước khi HTML5 được giới thiệu và đặt làm tiêu chuẩn mã hóa, bạn có thể thay đổi màu phông chữ bằng các thẻ phông chữ. Cụ thể hơn, bạn sẽ sử dụng thẻ phông chữ có thuộc tính màu để đặt màu văn bản.

This text is purple. 
5 được chỉ định với tên của nó hoặc với mã hex của nó

Đây là một ví dụ về giao diện của mã này với mã màu hex

This text is purple.

Và đây là cách bạn có thể đặt màu văn bản thành màu tím bằng cách sử dụng tên màu

This text is purple. 

Tuy nhiên, thẻ

This text is purple. 
4 không được dùng trong HTML5 và không còn được sử dụng nữa. Thay đổi màu phông chữ là một quyết định thiết kế và thiết kế không phải là mục đích chính của HTML. Do đó, điều hợp lý là các thẻ
This text is purple. 
4 không còn được hỗ trợ trong HTML5

So if the tag is no longer supported, how do you change the HTML font color? The answer is with Cascading Style Sheets or CSS.

Cái mới. Kiểu CSS

Để thay đổi màu phông chữ HTML bằng CSS, bạn sẽ sử dụng thuộc tính màu CSS được ghép nối với bộ chọn thích hợp. CSS cho phép bạn sử dụng tên màu, giá trị RGB, hex và HSL để chỉ định màu. Có ba cách sử dụng CSS để thay đổi màu chữ

CSS nội tuyến

Inline CSS is added directly to your HTML file. You’ll use the HTML tag such as

and then style it with the CSS color property like so:

HTML Font color Products

This is demo content.

1

Nếu bạn muốn sử dụng giá trị hex, mã của bạn sẽ trông như thế này

HTML Font color Products

This is demo content.

2

Nếu bạn định sử dụng giá trị RGB, bạn sẽ viết nó như thế này

HTML Font color Products

This is demo content.

3

Cuối cùng, bằng cách sử dụng các giá trị HSL, bạn sẽ sử dụng mã này

HTML Font color Products

This is demo content.

4

Các ví dụ trên cho bạn thấy cách thay đổi màu của một đoạn trên trang web của bạn. Nhưng bạn không bị giới hạn trong các đoạn văn một mình. Bạn có thể thay đổi màu phông chữ của tiêu đề cũng như liên kết

Đăng kí để nhận thư mới

Bạn muốn biết làm thế nào chúng tôi tăng lưu lượng truy cập của mình hơn 1000%?

Tham gia cùng hơn 20.000 người khác nhận bản tin hàng tuần của chúng tôi với các mẹo nội bộ về WordPress

Theo dõi ngay

For example, replacing the

This text is purple. 
8 tag above with
This text is purple. 
9 will change the color of that heading text, while replacing it with the

HTML Font color Products

This is demo content.

10 tag will change the color of that link. You can also use the element to color any amount of text.

Nếu bạn muốn thay đổi màu nền của toàn bộ đoạn văn hoặc tiêu đề, nó rất giống với cách bạn thay đổi màu phông chữ. Thay vào đó, bạn phải sử dụng thuộc tính

HTML Font color Products

This is demo content.

11 và sử dụng tên màu, giá trị hex, RGB hoặc HSL để đặt màu. Đây là một ví dụ.  

HTML Font color Products

This is demo content.

9

CSS nhúng

CSS nhúng nằm trong các thẻ

HTML Font color Products

This is demo content.

12 và được đặt ở giữa các thẻ đầu của tài liệu HTML của bạn

Mã sẽ trông như thế này nếu bạn muốn sử dụng tên màu

HTML Articles
1

Đoạn mã trên sẽ thay đổi màu của mọi đoạn trên trang thành màu tím. Tương tự như phương pháp CSS nội tuyến, bạn có thể sử dụng các bộ chọn khác nhau để thay đổi màu phông chữ của tiêu đề và liên kết của mình

Nếu bạn muốn sử dụng mã hex, đây là giao diện của mã

HTML Articles
2

Ví dụ bên dưới sử dụng các giá trị RBGA để bạn có thể xem ví dụ về cài đặt độ mờ

HTML Articles
3

Và mã HSL sẽ như thế này

This text is purple. 
0

CSS bên ngoài

Cuối cùng, bạn có thể sử dụng CSS bên ngoài để thay đổi màu chữ trên trang web của mình. CSS bên ngoài là CSS được đặt trong một tệp biểu định kiểu riêng, thường được gọi là kiểu. css hoặc biểu định kiểu. css

Biểu định kiểu này chịu trách nhiệm về tất cả các kiểu trên trang web của bạn và chỉ định màu phông chữ và kích thước phông chữ, lề, phần đệm, họ phông chữ, màu nền, v.v. Nói tóm lại, biểu định kiểu chịu trách nhiệm về cách trang web của bạn trông trực quan

Để thay đổi màu phông chữ bằng CSS bên ngoài, bạn sẽ sử dụng bộ chọn để tạo kiểu cho các phần của HTML mà bạn muốn. Ví dụ: mã này sẽ thay đổi tất cả văn bản nội dung trên trang web của bạn

Cần lưu trữ nhanh, đáng tin cậy và hoàn toàn an toàn cho trang web WordPress của bạn? . Kiểm tra kế hoạch của chúng tôi

This text is purple. 
1

Hãy nhớ rằng, bạn có thể sử dụng các giá trị RGB, hex và HSL chứ không chỉ tên màu để thay đổi màu phông chữ. Nếu bạn muốn chỉnh sửa biểu định kiểu, bạn nên làm như vậy trong trình chỉnh sửa mã

Nội tuyến, Nhúng hoặc Bên ngoài?

Vì vậy, bây giờ bạn đã biết cách sử dụng CSS để thay đổi màu phông chữ. Nhưng bạn nên sử dụng phương pháp nào?

Nếu bạn sử dụng mã CSS nội tuyến, bạn sẽ thêm mã trực tiếp vào tệp HTML của mình. Nói chung, phương pháp này phù hợp để khắc phục nhanh. Nếu bạn muốn thay đổi màu của một đoạn hoặc tiêu đề cụ thể trên một trang, phương pháp này là cách nhanh nhất và ít phức tạp nhất để thực hiện

Tuy nhiên, kiểu nội tuyến có thể làm cho kích thước tệp HTML của bạn lớn hơn. Tệp HTML của bạn càng lớn thì trang web của bạn sẽ tải càng lâu. Thêm vào đó, CSS nội tuyến có thể làm cho HTML của bạn trở nên lộn xộn. Do đó, phương pháp nội tuyến sử dụng CSS để thay đổi màu phông chữ HTML thường không được khuyến khích

Embedded CSS is placed between the tags and within the