NỘI DUNG BÀI VIẾT
Giới thiệu
Có 2 cách thường được dùng để quy định màu sắc trong CSS:
- Sử dụng tên của màu sắc. Chẳng hạn là “red” (đỏ) hoặc “green” (xanh lá cây)
- Sử dụng giá trị RGB (Red Green Blue). Chẳng hạn là “rgb(255, 0, 0)” hoặc giá trị HEX. Chẳng hạn là “#ff0000”
Màu Sắc Theo Tên
CSS hỗ trợ 140 tên màu khác nhau. Các tên được lấy từ tiếng Anh và được viết theo kiểu chữ in thường.
Ví dụ dưới đây liệt kê một số tên màu thường được sử dụng phổ biến trong thiết kế web:
Màu Sắc Theo Giá Trị
Có ba cách khác nhau khi biểu diễn một giá trị màu sắc đó là sử dụng kiểu RGB, HEX hoặc HSL. Trong bài học này chúng ta tìm hiểu hai kiểu giá trị màu được sử dụng nhiều trong CSS là màu RGB và màu HEX.
Màu RGB
Giá trị màu RGB được xác định dựa trên sự kết hợp của ba màu đó là màu đỏ (Red), màu xanh lá cây (Green) và màu xanh da trời (Blue).
Cú pháp giá trị màu RGB trong CSS:
rgb(red, green, blue)Trong đó giá trị của các màu red, green và blue dao động từ 0 tới 255, thể hiện độ độ đậm của chúng để hình thành nên màu sắc cuối cùng (với độ đậm cao nhất là 255 và thấp nhất là 0).
Màu HEX
Giá trị màu HEX tương tự như RGB được hình thành từ sự kết hợp của ba màu: màu đỏ, màu xanh lá cây và , màu xanh da trời. Tuy nhiên HEX sử dụng các số trong hệ cơ số 16 cho giá trị của mỗi màu này thay vì các số từ 0 tới 255 như ở màu RGB.
Cú pháp giá trị màu HEX trong CSS:
#rrggbbCode language: CSS (css)Trong đó:
- rr là giá trị của màu đỏ biểu diễn ở cơ số 16.
- gg là giá trị của màu xanh lá cây biểu diễn ở cơ số 16.
- bb là giá trị của màu xanh da trời biểu diễn ở cơ số 16.
Ở cơ số 16, giá trị mỗi màu trong ba màu trên dao động từ 00 tới FF, khoảng giá trị này tương ứng với khoảng giá trị từ 0 tới 255 ở hệ cơ số thập phân sử dụng cho giá trị màu RGB.
Chuyển đổi giá trị HEX (ở hệ cơ số 10) qua giá trị ở hệ cơ số 10 (hệ thập phân):
- Đổi 0 từ hệ cơ số 10 qua hệ cơ số 16 sẽ là 00. Cụ thể: 0 = 0 x 16^1 + 0 x 16^0.
- Đổi 255 từ hệ cơ số 10 qua hệ cơ số 16 sẽ là FF. Cụ thể: 255 = 15 (F) x 16^1 + 15 (F) x 16^0.
Lưu ý: Hệ cơ số 16 bao gồm 16 số 0 tới 10 và 5 ký tự a, b, c, d, e, f. Theo đó khi chuyển đổi từ cơ số 16 qua cơ số 10 thì a, b, c, d, e, f lần lượt sẽ nhận các giá trị tương ứng là 10, 11, 12, 13, 14 và 15.
Kết luận
Qua đây là một số chia sẻ về CSS, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về CSS.
Các bạn có thể tham khảo các bài viết hay về CSS tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
