Cách thay đổi màu phông chữ HTML

Khi nói đến tùy chỉnh trang web của bạn, màu chữ thường bị bỏ qua. Trong hầu hết các trường hợp, chủ sở hữu trang web để lại 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 nội dung 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 lý do tại sao bạn muốn làm điều đó ngay từ đầu.

Xem Video Hướng dẫn Thay đổi Màu Phông chữ HTML của Chúng tôi

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 để màu phông chữ là màu đen sẽ gây khó khăn cho việc đọc văn bản trên trang web của bạn.

Một lý do khác mà 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.

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

Cách xác định màu

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 chúng hoạt động như thế nào.

Tên màu

Tên màu là cách dễ nhất để xác định màu trong các 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ố đó theo phong cách của mình. Ví dụ: bạn có thể sử dụng “blue” để đặt màu cho một phần tử 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ất cả các tên màu đều đượ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àu trên bảng màu thực tế.

Giá trị RGB có dạng như sau: 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ể đang ở 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 đại diện cho độ 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 có dạng như sau: # 800080. Hai chữ cái đầu tiên cho biết cường độ của màu đỏ, hai số ở giữa chỉ ra cường độ của màu xanh lá cây, và hai chữ cái cuối cùng chỉ ra 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 bánh xe màu tiêu chuẩn, màu đỏ ở khoảng 0/360, màu xanh lá cây ở mức 120 và màu xanh lam ở mức 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 sắc. 0 đại diện cho màu đen và trắng, và 100 đại diện cho màu sắc đầ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ẽ giống như thế này trong HSL: hsl(276, 100%, 50%) .

HSL, 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: hsl(276, 100%, 50%, .85) .

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

Cũ: <font> Tags

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ách sử dụ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 color để đặt màu văn bản. color được chỉ định bằng tên của nó hoặc bằng mã hex của nó.

Dưới đây là một ví dụ về cách mã này trông như thế nào với mã màu hex:

<font color="#800080">This text is purple.</font>

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.

<font color="purple">This text is purple.</font> 

Tuy nhiên, <font> không được chấp nhận 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 đó, sẽ có lý khi các <font> không còn được hỗ trợ trong HTML5.

Vậy nếu thẻ <font> không còn được hỗ trợ, bạn làm cách nào để thay đổi màu chữ HTML? Câu trả lời là với Trang tính kiểu xếp tầng hoặc CSS.

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 phông chữ.

CSS nội tuyến

CSS nội tuyến được thêm trực tiếp vào tệp HTML của bạn. Bạn sẽ sử dụng thẻ HTML, chẳng hạn như <p> và sau đó tạo kiểu bằng thuộc tính màu CSS như sau:

<p style="color: purple">This is a purple paragraph.</p>

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

<p style="color:#800080">This is a purple paragraph.</p>

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

<p style="color:RGB(153,0,255)">This is a purple paragraph.</p>

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:

<p style="color:hsl(276, 100%, 50%)">This is a purple paragraph.</p>

Các ví dụ trên chỉ cho bạn cách thay đổi màu của một đoạn vă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 các tiêu đề cũng như các liên kết.

Ví dụ: thay thế <p> ở trên bằng <h2> sẽ thay đổi màu của văn bản tiêu đề đó, trong khi thay thế bằng thẻ <a> sẽ thay đổi màu của liên kết đó. Bạn cũng có thể sử dụng phần tử <span> để tô màu bất kỳ lượng văn bản nào.

Nếu bạn muốn thay đổi màu nền của toàn bộ đoạn văn hoặc một 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 background-color và sử dụng tên màu, giá trị hex, RGB hoặc HSL để đặt màu. Đây là một ví dụ: 

<p style="background-color: purple">

CSS nhúng

CSS được nhúng nằm trong các <style> và được đặt ở giữa các thẻ head 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:

<!DOCTYPE html> <html> <head> <style> <p> { color: purple; } </style> </head>

Đ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 các tiêu đề và liên kết của mình.

Nếu bạn muốn sử dụng mã hex, đây là cách mã sẽ trông như thế nào:

<!DOCTYPE html> <html> <head> <style> <p> { color: #800080; } </style> </head>

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

<!DOCTYPE html> <html> <head> <style> <p> { color: RGB(153,0,255,0.75), } </style> </head>

Và mã HSL sẽ giống như sau:

<!DOCTYPE html> <html> <head> <style> <p> { color: hsl(276, 100%, 50%), } </style> </head>

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 phông 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 biệt, thường được gọi là style.css hoặc stylesheet.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ề, khoảng đệm, họ phông chữ, màu nền và hơn thế nữa. 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ữ với CSS bên ngoài, bạn sẽ sử dụng bộ chọn để tạo kiểu cho các phần HTML mà bạn muốn. Ví dụ: mã này sẽ thay đổi tất cả nội dung trên trang web của bạn:

body {color: purple;}

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 hay Bên ngoài?

Vì vậy, bây giờ bạn đã biết cách bạn có thể 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ã này 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 để sửa chữa nhanh chóng. Nếu bạn muốn thay đổi màu của một đoạn văn hoặc tiêu đề cụ thể trên một trang, thì 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, các 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ì thời gian tải trang web của bạn 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.

CSS nhúng được đặt giữa các thẻ <head> và trong các thẻ <style>. Giống như CSS nội tuyến, nó rất tốt để sửa nhanh và ghi đè các kiểu được chỉ định trong biểu định kiểu bên ngoài.

Một điểm khác biệt đáng chú ý giữa kiểu nội tuyến và kiểu nhúng là chúng sẽ áp dụng cho bất kỳ trang nào mà các thẻ tiêu đề được tải, trong khi kiểu nội dòng chỉ áp dụng cho trang cụ thể mà chúng đang ở trên, 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 một 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 một 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 giữa 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à kiểu 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 của chúng.

Ưu điểm và nhược điểm của thẻ phông chữ HTML

Thẻ phông chữ HTML rất dễ sử dụng, vì vậy đó là một ưu điểm của nó. Nói một cách 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õ ra <font color="purple"> . 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ữ.

Mặc dù thẻ phông chữ dễ sử dụ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 chấp nhận 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à hoạt động không chính xác, hoặc tệ hơn là 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ó. Lợi thế quan trọng nhất của việc sử dụng CSS là đây 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 bả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 để học 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, đây là một vài mẹo sẽ giúp bạn.

Sử dụng một công cụ chọn màu

Thay vì chọn màu một cách 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 công cụ 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. Chúng 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 màu sắc của trang web của bạn có thể truy cập đượ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à bạn thích trên một trang web, bạn có thể kiểm tra mã để nhận 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ỏ đến phần của 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ở ra bảng kiểm tra mã, nơi bạn có thể thấy mã HTML của trang web và các kiểu tương ứng.

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 các kiểu 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, RGB và giá trị HSL.

Chúng tôi cũng đã đề cập đến cách bạn có thể thay đổi màu phông chữ với CSS nội tuyến, nhúng và bên ngoài cũng như sử dụng thẻ phông chữ và những ưu và nhược điểm của từng phương pháp. Bây giờ, bạn đã hiểu rõ bạn nên sử dụng phương pháp nào để thay đổi màu phông chữ HTML, vì vậy việc duy nhất cần làm bây giờ là thực hiện các mẹo này trên trang web của bạn.

Suy nghĩ của bạn về việc thay đổi màu phông chữ bằng CSS và thẻ phông chữ? Cho chúng tôi biết trong phần ý kiến!