Trong bài hướng dẫn tự học CSS này, bạn sẽ tìm hiểu các phương pháp định nghĩa các giá trị màu (color) khác nhau trong CSS.
Thiết lập thuộc tính color trong CSS
Thuộc tính color xác định màu văn bản (màu nền trước nói chung) của một phần tử.
Chẳng hạn, trong ví dụ bên dưới:
- Thuộc tính color được chỉ định trong bộ chọn CSS (Selector) body xác định màu văn bản mặc định cho toàn bộ trang.
Hãy thử chạy ví dụ sau trên trình duyệt để xem nó hoạt động như thế nào:
Mã HTML:
<body>
<h1>Đây là một tiêu đề H1</h1>
<p>Đây là một đoạn văn</p>
<div class="text-green">Đây làm một câu đơn giản.</div>
</body>Mã CSS:
body {
color: #ff5722;
}
.text-green {
color: #008000;
}Lưu ý: Thuộc tính color thường kế thừa giá trị màu từ phần tử cha của chúng, trừ trường hợp phần tử anchor (thẻ liên kết <a></a>). Ví dụ: Nếu bạn chỉ định màu cho phần tử body, nó sẽ tự động được chuyển xuống các h1, h2.., p, v.v.
Nếu bạn chưa biết cách liên kết file CSS với HTML thì nên đọc lại bài viết: Nhập môn CSS
3 Cách định nghĩa giá trị màu sắc trong CSS
Màu sắc trong CSS thường được chỉ định trong các định dạng sau:
- Một tên màu – ví dụ như ‘red’
- Một giá trị HEX – ví dụ như ‘#ff0000’
- Một giá trị RGB – ví dụ như ‘rgb (255, 0, 0)’
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 về chúng chi tiết hơn trong phần CSS3 color sau.
Bây giờ, hãy tìm hiểu và sử dụng các phương pháp cơ bản để xác định các giá trị màu:
#1: Cách định nghĩa màu trong CSS bằng tên màu
CSS đã định nghĩa sẵn một vài từ khóa (keyword) màu cho phép bạn chỉ định các giá trị màu 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.
Lưu ý: Tên màu không phân biệt chữ hoa chữ thường.
Hãy thử chạy ví dụ sau để hiểu cách sử dụng tên màu trong CSS.
Mã HTML:
<body>
<h1>Tự học CSS</h1>
<p>Cách định nghĩa màu sắc trong CSS</p>
</body>Mã CSS:
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 so với đị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 thay thế.
Tham khảo: 140 tên màu được hỗ trợ bởi CSS3
Bởi vì nhiều người vẫn dùng trình duyệt cũ, mà trình duyệt cũ thì không hỗ trợ các tên màu ngoài 16 màu đã liệt kê ở trên dẫn tới có thể bị sai màu.
#2: Cách định nghĩa màu trong CSS bằng mã màu HEX
Hex (viết tắt của Hexadecimal) cho đến nay là phương pháp định nghĩa màu sắc được sử dụng phổ biến nhất trên web.
Mã màu Hex biểu thị các màu bằng mã sáu chữ số, như #rrggbb, trong đó rr, gg và bb tương ứng là thành phần màu đỏ, xanh lục và xanh lam của màu.
Giá trị của mỗi thành phần có thể thay đổi từ 00 (không có màu) và FF (full color) trong ký hiệu thập lục phân hoặc 0 và 255 trong ký hiệu tương đương 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:
Mã HTML:
<body>
<h1>Tự học CSS</h1>
<p>Cách định nghĩa màu sắc trong CSS</p>
</body>Mã CSS:
h1 {
color: #ffa500;
}
p {
color: #00ff00;
}Lưu ý: Hệ thập lục phân hoặc Hex đề cập đến sơ đồ đánh số sử dụng 16 ký tự làm cơ sở. 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.
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 gõ thêm, ví dụ, giá trị màu hex #ffffff cũng có thể được viết là #fff, # 000000 dưới dạng # 000, # 00ff00 là # 0f0, # ffcc00 là # fc0, v.v.
#3: Cách định nghĩa màu trong CSS bằng mã màu RGB
Màu sắc trong CSS cũng có thể được định nghĩa bằng mã màu RGB (R = Red, G = Green và B= Blue) bằng cách sử dụng ký hiệu hàm rgb().
Hàm rgb() chấp nhận ba giá trị được phân tách bằng dấu phẩy, xác định lượng thành phần màu đỏ, xanh lục và xanh lam của màu.
Các giá trị này thường được chỉ định là số nguyên trong khoảng từ 0 đến 255, trong đó 0 không đại diện cho không có màu gì và 255 đại diện cho màu mạnh nhất.
Bạn có thể hiểu như là:
- R = 0 có nghĩa là màu đỏ có độ mạnh là 0.
- R = 255 có nghĩa là màu đỏ có độ mạnh cao nhất.
Ví dụ sau chỉ định màu giống như trong ví dụ HEX nhưng bây giờ là trong ký hiệu RGB.
Mã HTML:
<body>
<h1>Tự học CSS</h1>
<p>Cách định nghĩa màu sắc trong CSS</p>
</body>Mã CSS:
h1 {
color: rgb(255, 165, 0);
}
p {
color: rgb(0, 255, 0);
}Chú ý: Bạn cũng có thể xác định giá trị RGB bên trong hàm rgb() năng theo tỷ lệ, 100% màu mạnh nhất, và 0% (không chỉ đơn giản là 0) đại diện cho không có màu. Ví dụ, bạn có thể xác định màu đỏ, hoặc là rgb(255, 0, 0) … bằng(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à màu trắng. Tương tự, 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. Hãy thử thay đổi các giá trị RGB để hiểu cách thức hoạt động của nó hơn.
Ảnh hưởng của thuộc tính màu sắc tới border và outline như thế nào?
Thuộc tính màu không chỉ dành cho nội dung văn bản, mà cho bất kỳ thứ gì có giá trị màu.
Ví dụ: Nếu giá trị border-color hoặc outline-color không được định nghĩa rõ ràng cho phần tử, giá trị color sẽ được sử dụng thay thế.
Hãy xem một ví dụ sau.
Mã HTML:
<body>
<p class="one">Màu của đường viền giống với màu văn bản của phần tử.</p>
<p class="two">Màu của đường viền giống với màu văn bản của phần tử.</p>
</body>Mã CSS:
p.one {
color: #0000ff;
border: 2px solid;
}
p.two {
color: #00ff00;
outline: 2px solid;
}Hãy thử chạy ví dụ trên và bạn sẽ thấy, mặc dù border-color và outline-color không được định nghĩa. Nhưng nó đã có vì ảnh hưởng của thuộc tính color.
Bạn đã biết cách thiết lập, sử dụng thuộc tính color trong CSS chưa?
Bài viết này mình đã hướng dẫn bạn cách định nghĩa thuộc tính color trong CSS cũng như cách định nghĩa giá trị color bằng 3 cách.
Mình tin rằng nó rất dễ hiểu mà thôi. Còn cách thiết lập giá trị màu theo từng loại phần tử, … cụ thể thì tiếp tục học bạn sẽ dần dần được biết thêm.
Lưu ý: Nếu bạn muốn học một khóa học lập trình toàn diện để có thể đi làm thì hãy tham khảo Khóa học PHP (Fullstack) hoặc Khóa học Java (Fullstack) tại NIIT – ICT Hà Nội.
Chúc bạn học tốt.
Học tiếp: Thuộc tính background trong CSS
Đọc thêm: 9 bộ chọn CSS phổ biến