Color trong CSS

Trong hướng dẫn này, bạn sẽ tìm hiểu các phương pháp khác nhau để xác định các giá trị màu trong CSS.

Thuộc tính color

Thuộc tính color xác định màu chữ (màu foreground nói chung) của một phần tử.

Ví dụ: thuộc tính color được chỉ định trong bộ chọn body xác định màu văn bản mặc định cho toàn bộ trang web. Hãy thử ví dụ sau để xem nó hoạt động như thế nào:

body {
    color: #ff5722;
}

Lưu ý: Thuộc tính color thường được thừa hưởng các giá trị màu từ phần tử cha của nó, trừ trường hợp phần tử <a>. Ví dụ: nếu bạn chỉ định color cho phần tử body, nó sẽ tự động được chuyển xuống các tiêu đề, đoạn văn, v.v.

Xác định giá trị màu sắc

Màu sắc trong CSS thường được chỉ định nhất ở các định dạng sau:

• Tên màu – như red, green, blue, transparent, v.v.
• Giá trị HEX – như #ff0000, #00ff00, v.v.
• Giá trị RGB – như rgb(255, 0, 0), rgb(255, 255, 0), v.v.

CSS3 đã giới thiệu một số định dạng màu khác như HSL, HSLA và RGBA cũng hỗ trợ độ trong suốt alpha. Chúng ta sẽ tìm hiểu chi tiết hơn về chúng trong chương màu sắc trong CSS3.

Bây giờ, hãy theo dõi các phương pháp cơ bản để xác định các giá trị màu:

Từ khóa màu sắc

CSS xác định một số từ khóa màu cho phép bạn chỉ định các giá trị màu sắc một cách dễ dàng.

Các từ khóa màu cơ bản này là: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white và yellow. Tên màu không phân biệt chữ hoa chữ thường.

h1 {
    color: red;
}
p {
    color: purple;
}

Tuy nhiên, các trình duyệt web hiện đại thực tế hỗ trợ nhiều tên màu hơn những gì được định nghĩa trong tiêu chuẩn CSS, nhưng để an toàn hơn, bạn nên sử dụng các giá trị màu HEX.

Xem phần tham khảo về tên màu sắc trong CSS để biết danh sách đầy đủ các tên màu có thể sử dụng.

Giá trị màu HEX

Hex (viết tắt của Hexadecimal) cho đến nay là phương pháp xác định màu được sử dụng phổ biến nhất trên web.

Hex đại diện cho màu sắc sử dụng một mã số có sáu chữ số, bắt đầu bằng dấu thăng (#), giống như #rrggbb, trong đó rr, gg và bb đại diện cho thành phần màu đỏ, xanh lá cây và màu xanh dương của màu sắc tương ứng.

Giá trị của mỗi thành phần có thể thay đổi từ 00 (không có màu) và FF (đủ màu) trong ký hiệu thập lục phân, hoặc 0 và 255 trong ký hiệu thập phân. Do đó #ffffff đại diện cho màu trắng và #000000 đại diện cho màu đen. Hãy xem ví dụ sau:

h1 {
    color: #ffa500;
}
p {
    color: #00ff00;
}

Lưu ý: Hệ thập lục phân hoặc Hex đề cập đến một lược đồ đánh số sử dụng 16 ký tự làm cơ sở của nó. Nó sử dụng các số từ 0 đến 9 và các chữ cái A, B, C, D, E và F tương ứng với các số thập phân 10, 11, 12, 13, 14 và 15 tương ứng.

Mẹo: Nếu mã thập lục phân của một màu có các cặp giá trị giống nhau, thì nó cũng có thể được viết bằng ký hiệu viết tắt để tránh phải nhập thêm, ví dụ: giá trị màu thập lục phân #ffffff cũng có thể được viết là #fff, #000000 là #000, #00ff00 là #0f0, #ffcc00 là #fc0, v.v.

Giá trị màu RGB

Màu sắc có thể được xác định trong mô hình RGB (Đỏ, Xanh lá cây và Xanh dương) bằng cách sử dụng hàm rgb().

Hàm rgb() chấp nhận ba giá trị cách nhau bằng dấu phẩy, trong đó quy định ba thành phần của màu sắc là màu đỏ, xanh lá cây và màu xanh dương. Các giá trị này thường được chỉ định là số nguyên từ 0 đến 255, trong đó 0 đại diện cho không có màu và 255 đại diện cho màu đầy đủ.

Ví dụ sau chỉ định màu giống như trong ví dụ trước nhưng ở ký hiệu RGB.

h1 {
    color: rgb(255, 165, 0);
}
p {
    color: rgb(0, 255, 0);
}

Lưu ý: Bạn cũng có thể chỉ định các giá trị RGB bên trong hàm rgb() theo tỷ lệ phần trăm, trong đó 100% biểu thị màu đầy đủ và 0% (hoặc đơn giản là 0) biểu thị không có màu. Ví dụ: bạn có thể chỉ định màu đỏ là rgb(255, 0, 0) hoặc rgb(100%, 0%, 0%).

Mẹo: Nếu R, G và B đều được đặt thành 255, tức là rgb(255, 255, 255) màu sẽ là trắng. Tương tự như vậy, nếu tất cả các kênh được đặt thành 0, tức là rgb(0, 0, 0) màu sẽ là màu đen.

Ảnh hưởng của màu sắc với border và outline

Thuộc tính color không chỉ dành cho nội dung văn bản, mà còn cho bất cứ phần tử nào ở foreground nhận một giá trị màu sắc. Ví dụ: nếu giá trị của border-color hoặc outline-color không được xác định rõ ràng cho phần tử, giá trị màu sẽ được sử dụng thay thế. Hãy xem một ví dụ:

p.one {
    color: #0000ff;
    border: 2px solid;
}
p.two {
    color: #00ff00;
    outline: 2px solid;
}