Mã màu văn bản HTML

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

Văn bản đóng một vai trò quan trọng trên các trang web của chúng tôi. Điều này là do nó giúp người dùng tìm hiểu nội dung của trang web và họ có thể làm gì ở đó

Khi bạn thêm văn bản vào các trang web của mình, văn bản này mặc định có màu đen. Nhưng đôi khi bạn sẽ muốn thay đổi màu chữ để cá tính hơn

Ví dụ: giả sử bạn có màu tối hơn làm nền cho trang web của mình. Trong trường hợp đó, bạn sẽ muốn làm cho màu văn bản sáng hơn, sáng hơn để cải thiện khả năng đọc và khả năng truy cập trang web của bạn

Trong bài viết này, bạn sẽ học cách thay đổi màu sắc của văn bản trong HTML. Chúng ta sẽ xem xét các phương pháp khác nhau và chúng ta sẽ thảo luận phương pháp nào là tốt nhất

Cách thay đổi màu văn bản trước HTML5

Trước khi giới thiệu HTML5, bạn sẽ sử dụng để thêm văn bản vào trang web. Thẻ này nhận thuộc tính

// Using inline CSS

Welcome to freeCodeCamp!

// Using internal/external CSS selector { color: value; }
0, chấp nhận màu dưới dạng giá trị tên hoặc mã hex

 Welcome to freeCodeCamp. 

// Or

 Welcome to freeCodeCamp.  

Thẻ này không được dùng nữa khi HTML5 được giới thiệu. Điều này có ý nghĩa vì HTML là ngôn ngữ đánh dấu, không phải ngôn ngữ tạo kiểu. Khi xử lý bất kỳ kiểu tạo kiểu nào, tốt nhất nên sử dụng CSS, CSS có chức năng chính là tạo kiểu

Điều này có nghĩa là để bạn thêm màu sắc cho các trang web của mình, bạn cần sử dụng CSS

Trong trường hợp bạn đang vội xem cách bạn có thể thay đổi màu của văn bản, thì đây là

// Using inline CSS

Welcome to freeCodeCamp!

// Using internal/external CSS selector { color: value; }

Giả sử bạn không vội. Hãy đi sâu vào ngay

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

Bạn có thể sử dụng thuộc tính màu CSS để thay đổi màu văn bản. Thuộc tính này chấp nhận các giá trị màu như mã Hex, RGB, HSL hoặc tên màu

Ví dụ: nếu bạn muốn thay đổi màu văn bản thành xanh da trời, bạn có thể sử dụng tên

// Using inline CSS

Welcome to freeCodeCamp!

// Using internal/external CSS selector { color: value; }
1, mã hex
// Using inline CSS

Welcome to freeCodeCamp!

// Using internal/external CSS selector { color: value; }
2, mã thập phân RGB
// Using inline CSS

Welcome to freeCodeCamp!

// Using internal/external CSS selector { color: value; }
3 hoặc giá trị HSL
// Using inline CSS

Welcome to freeCodeCamp!

// Using internal/external CSS selector { color: value; }
4

Có ba cách bạn có thể thay đổi màu văn bản của mình bằng CSS. Chúng đang sử dụng kiểu dáng bên trong, bên trong hoặc bên ngoài

Cách thay đổi màu văn bản trong HTML bằng CSS nội tuyến

CSS nội tuyến cho phép bạn áp dụng các kiểu trực tiếp cho các thành phần HTML của mình. Điều này có nghĩa là bạn đang đặt trực tiếp CSS vào thẻ HTML

Bạn có thể sử dụng thuộc tính style chứa tất cả các kiểu bạn muốn áp dụng cho thẻ này

Welcome to freeCodeCamp!

Bạn sẽ sử dụng thuộc tính màu CSS cùng với giá trị màu ưa thích của mình

// Color Name Value

Welcome to freeCodeCamp!

// Hex Value

Welcome to freeCodeCamp!

// RGB Value

Welcome to freeCodeCamp!

// HSL Value

Welcome to freeCodeCamp!

Nhưng kiểu nội tuyến không phải là lựa chọn tốt nhất nếu ứng dụng của bạn trở nên lớn hơn và phức tạp hơn. Vì vậy, hãy nhìn vào những gì bạn có thể làm thay vì

Cách thay đổi màu văn bản trong HTML bằng CSS bên trong hoặc bên ngoài

Một cách ưa thích khác để thay đổi màu văn bản của bạn là sử dụng kiểu dáng bên trong hoặc bên ngoài. Hai cái này khá giống nhau vì cả hai đều sử dụng bộ chọn

Đối với kiểu dáng bên trong, bạn thực hiện trong thẻ

// Using inline CSS

Welcome to freeCodeCamp!

// Using internal/external CSS selector { color: value; }
5 của tệp HTML. Trong thẻ
// Using inline CSS

Welcome to freeCodeCamp!

// Using internal/external CSS selector { color: value; }
5, bạn sẽ thêm thẻ
// Using inline CSS

Welcome to freeCodeCamp!

// Using internal/external CSS selector { color: value; }
7 và đặt tất cả các kiểu dáng CSS của bạn ở đó như bên dưới



  
    
  

  // ...


Trong khi đối với kiểu dáng bên ngoài, tất cả những gì bạn phải làm là thêm kiểu dáng CSS vào tệp CSS của mình bằng cú pháp chung

selector {
  color: value;
}

Bộ chọn có thể là thẻ HTML của bạn hoặc có thể là

// Using inline CSS

Welcome to freeCodeCamp!

// Using internal/external CSS selector { color: value; }
8 hoặc
// Using inline CSS

Welcome to freeCodeCamp!

// Using internal/external CSS selector { color: value; }
9. Ví dụ

// HTML

Welcome to freeCodeCamp!

// CSS p { color: skyblue; }

Hoặc bạn có thể sử dụng một

// Using inline CSS

Welcome to freeCodeCamp!

// Using internal/external CSS selector { color: value; }
8

// HTML

Welcome to freeCodeCamp!

// CSS .my-paragraph { color: skyblue; }

Hoặc bạn có thể sử dụng một

Welcome to freeCodeCamp!

1

// HTML

Welcome to freeCodeCamp!

// CSS #my-paragraph { color: skyblue; }

Ghi chú. Như bạn đã thấy trước đó, với CSS nội tuyến, bạn có thể sử dụng tên màu, mã Hex, giá trị RGB và giá trị HSL với kiểu dáng bên trong hoặc bên ngoài

kết thúc

Trong bài viết này, bạn đã học cách thay đổi phông chữ/màu văn bản của phần tử HTML bằng CSS. Bạn cũng đã học cách các nhà phát triển đã làm điều đó trước khi giới thiệu HTML5 với thẻ và các thuộc tính màu

Ngoài ra, hãy nhớ rằng việc tạo kiểu cho các phần tử HTML của bạn bằng kiểu bên trong hoặc bên ngoài luôn thích hợp hơn với kiểu nội tuyến. Điều này là do nó cung cấp sự linh hoạt hơn

Ví dụ: thay vì thêm các kiểu nội tuyến tương tự vào tất cả các thành phần thẻ

Welcome to freeCodeCamp!

3 của bạn, bạn có thể sử dụng một CSS duy nhất
// Using inline CSS

Welcome to freeCodeCamp!

// Using internal/external CSS selector { color: value; }
8 cho tất cả chúng

Kiểu nội tuyến không được coi là phương pháp hay nhất vì chúng dẫn đến nhiều lần lặp lại - bạn không thể sử dụng lại kiểu ở nơi khác. Để tìm hiểu thêm, bạn có thể đọc bài viết của tôi về Kiểu nội tuyến trong HTML. Bạn cũng có thể tìm hiểu cách thay đổi kích thước văn bản trong bài viết này và màu nền trong bài viết này

Tôi hy vọng hướng dẫn này cung cấp cho bạn kiến ​​thức để thay đổi màu sắc của văn bản HTML của bạn để làm cho nó trông đẹp hơn

Chúc các bạn code vui vẻ

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO


Mã màu văn bản HTML
Joel Olawanle

Nhà phát triển Frontend & Người viết kỹ thuật


Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu