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
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ế
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ã 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
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.
2HSL, 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.
3Bâ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ẻ
This text is purple.
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 HTML5So 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:
1HTML Font color Products
This is demo content.
Nếu bạn muốn sử dụng giá trị hex, mã của bạn sẽ trông như thế này
2HTML Font color Products
This is demo content.
Nếu bạn định sử dụng giá trị RGB, bạn sẽ viết nó như thế này
3HTML Font color Products
This is demo content.
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
4HTML Font color Products
This is demo content.
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
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 10 tag will change the color of that link. You can also use the element to color any amount of text.HTML Font color Products
This is demo content.
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
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.
9HTML Font color Products
This is demo content.
CSS nhúng
CSS nhúng nằm trong các thẻ
12 và được đặt ở giữa các thẻ đầu của tài liệu HTML của bạnHTML Font color Products
This is demo content.
Mã sẽ trông như thế này nếu bạn muốn sử dụng tên màu
1HTML Articles
Đ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ã
2HTML Articles
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ờ
3HTML Articles
Và mã HSL sẽ như thế này
This text is purple.
0CSS 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.
1Hã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 tags. Like inline CSS, it’s good for quick fixes and overriding the styles specified in an external stylesheet.
Một điểm khác biệt đáng chú ý giữa kiểu nội tuyến và kiểu được nhúng là chúng sẽ áp dụng cho bất kỳ trang nào mà thẻ đầu được tải trên đó, trong khi kiểu nội tuyến chỉ áp dụng cho trang cụ thể mà chúng đang truy cập, thường là phần tử mà chúng đang nhắm mục tiêu trên trang đó
Phương pháp cuối cùng, CSS bên ngoài, sử dụng biểu định kiểu chuyên dụng để xác định kiểu trực quan của bạn. Nói chung, tốt nhất là sử dụng biểu định kiểu bên ngoài để giữ tất cả các kiểu của bạn ở một nơi duy nhất, từ đó chúng có thể dễ dàng chỉnh sửa. Điều này cũng tách biệt phần trình bày và thiết kế, vì vậy mã dễ quản lý và bảo trì
Hãy nhớ rằng các kiểu nội tuyến và được nhúng có thể ghi đè các kiểu được đặt trong biểu định kiểu bên ngoài
Thẻ phông chữ hoặc Kiểu CSS. Ưu và nhược điểm
Hai phương pháp chính để thay đổi màu phông chữ HTML là sử dụng thẻ phông chữ hoặc kiểu CSS. Cả hai phương pháp này đều có ưu và nhược điểm
Thẻ phông chữ HTML Ưu và nhược điểm
Thẻ phông chữ HTML rất dễ sử dụng, vì vậy đó là ưu điểm của nó. Thông thường, CSS phức tạp hơn và mất nhiều thời gian để học hơn là gõ
13. Nếu bạn có một trang web cũ hơn không sử dụng HTML5, thì thẻ phông chữ là một phương pháp khả thi để thay đổi màu phông chữHTML Font color Products
This is demo content.
Mặc dù thẻ phông chữ rất dễ sử dụng nhưng bạn không nên sử dụng nó nếu trang web của bạn sử dụng HTML. Như đã đề cập trước đó, thẻ phông chữ không được dùng trong HTML5. Nên tránh sử dụng mã không dùng nữa vì các trình duyệt có thể ngừng hỗ trợ nó bất cứ lúc nào. Điều này có thể dẫn đến việc trang web của bạn bị hỏng và không hoạt động chính xác hoặc tệ hơn là hoàn toàn không hiển thị cho khách truy cập của bạn
Ưu và nhược điểm của CSS
CSS, giống như thẻ phông chữ, có ưu và nhược điểm của nó. Ưu điểm đáng kể nhất của việc sử dụng CSS là đó là cách thích hợp để thay đổi màu phông chữ và chỉ định tất cả các kiểu khác cho trang web của bạn
Như đã đề cập trước đó, nó tách biệt phần trình bày khỏi thiết kế, giúp mã của bạn dễ quản lý và bảo trì hơn
Mặt khác, CSS và HTML5 có thể mất thời gian để tìm hiểu và viết đúng cách so với cách viết mã cũ
Hãy nhớ rằng với CSS, bạn có nhiều cách khác nhau để thay đổi màu phông chữ và mỗi phương pháp đó đều có ưu và nhược điểm riêng, như đã thảo luận trước đó
Mẹo để thay đổi màu phông chữ HTML
Bây giờ bạn đã biết cách thay đổi màu phông chữ HTML, sau đây là một số mẹo sẽ giúp bạn
Sử dụng Bộ chọn màu
Thay vì chọn màu ngẫu nhiên, hãy sử dụng công cụ chọn màu để chọn đúng màu. Lợi ích của bộ chọn màu là nó sẽ cung cấp cho bạn tên màu và các giá trị hex, RGB và HSL chính xác mà bạn cần sử dụng trong mã của mình
Kiểm tra độ tương phản
Văn bản tối với nền tối cũng như văn bản sáng với nền sáng không hoạt động tốt với nhau. Họ sẽ làm cho văn bản trên trang web của bạn khó đọc. Tuy nhiên, bạn có thể sử dụng công cụ kiểm tra độ tương phản để đảm bảo trang web của bạn có thể truy cập được màu sắc và văn bản dễ đọc
Tìm màu bằng phương pháp kiểm tra
Nếu bạn thấy màu mình thích trên một trang web, bạn có thể kiểm tra mã để lấy giá trị hex, RGB hoặc HSL của màu đó. Trong Chrome, tất cả những gì bạn phải làm là trỏ con trỏ vào phần trang web bạn muốn kiểm tra, nhấp chuột phải và chọn Kiểm tra. Thao tác này sẽ mở bảng kiểm tra mã, nơi bạn có thể xem mã HTML của trang web và các kiểu tương ứng
Bạn muốn thay đổi màu phông chữ trên trang web của mình? . Hướng dẫn này sẽ giúp bạn bắt đầu ⬇️Nhấp để Tweet
Bản tóm tắt
Thay đổi màu phông chữ HTML 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. Nó cũng có thể giúp bạn thiết lập tính nhất quán của thương hiệu trong phong cách trang web của bạn
Trong hướng dẫn này, bạn đã học về bốn cách khác nhau để thay đổi màu phông chữ HTML. với tên màu, mã hex, giá trị RGB và HSL
Chúng tôi cũng đã đề cập đến cách bạn có thể thay đổi màu phông chữ bằng CSS nội tuyến, được nhúng và bên ngoài, đồng thời sử dụng thẻ phông chữ cũng như ưu và nhược điểm của từng phương pháp. Đến bây giờ, bạn đã hiểu rõ về phương pháp nào bạn nên sử dụng để thay đổi màu phông chữ HTML, vì vậy điều duy nhất còn lại cần làm bây giờ là triển khai các mẹo này trên trang web của bạn
Bạn nghĩ gì về việc thay đổi màu phông chữ bằng CSS và thẻ phông chữ?
Tiết kiệm thời gian, chi phí và tối đa hóa hiệu suất trang web với
- Trợ giúp tức thì từ các chuyên gia lưu trữ WordPress, 24/7
- Tích hợp doanh nghiệp Cloudflare
- Tiếp cận đối tượng toàn cầu với 35 trung tâm dữ liệu trên toàn thế giới
- Tối ưu hóa với Giám sát hiệu suất ứng dụng tích hợp của chúng tôi
Tất cả những điều đó và hơn thế nữa, trong một gói không có hợp đồng dài hạn, hỗ trợ di chuyển và bảo đảm hoàn tiền trong 30 ngày. Kiểm tra các gói của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm gói phù hợp với bạn