Podcast CSS – 006: Màu phần một
Màu sắc là một phần quan trọng của mọi trang web và trong CSS, có nhiều lựa chọn về loại màu, chức năng và cách xử lý.
Làm thế nào để bạn quyết định nên sử dụng loại màu nào? Làm thế nào để làm cho màu của bạn bán trong suốt? Trong bài học này, bạn sẽ tìm hiểu những lựa chọn mà bạn có để đưa ra quyết định đúng đắn cho dự án và nhóm của mình.
CSS có nhiều loại dữ liệu, chẳng hạn như chuỗi và số. Màu là một trong những loại này và sử dụng các loại khác, chẳng hạn như số cho các định nghĩa riêng.
Màu dạng số
Rất có thể việc bạn tiếp xúc với màu trong CSS lần đầu tiên là thông qua màu số. Chúng ta có thể làm việc với các giá trị màu dạng số ở một vài dạng khác nhau.
Màu hex
h1 {
color: #b71540;
}
Ký hiệu thập lục phân (thường được rút gọn thành thập lục phân) là cú pháp viết tắt cho RGB. Ký hiệu này gán một giá trị số cho màu xanh lục và màu xanh lam, đây là 3 màu chính.
Các dải thập lục phân là 0-9 và A-F. Khi được dùng trong chuỗi gồm 6 chữ số, các dải màu sẽ được chuyển đổi sang các dải số RGB có giá trị từ 0 đến 255 tương ứng với các kênh màu đỏ, xanh lục và xanh dương tương ứng.
Bạn cũng có thể xác định giá trị alpha bằng bất kỳ màu số nào.
Giá trị alpha là phần trăm độ trong suốt.
Trong mã hex, bạn thêm 2 chữ số khác vào chuỗi 6 chữ số, tạo thành một chuỗi 8 chữ số.
Ví dụ: để thiết lập màu đen trong mã hex, hãy viết #000000
.
Để thêm độ trong suốt 50%, hãy thay đổi thành #00000080
.
Do thang đo hex là 0-9 và A-F, nên các giá trị trong suốt có thể không hoàn toàn như bạn mong đợi.
Dưới đây là một số giá trị phổ biến chính được thêm vào mã hex màu đen, #000000
:
- 0% alpha — hoàn toàn trong suốt — là 00:
#00000000
- 50% alpha là 80:
#00000080
- 75% alpha là BF:
#000000BF
Để chuyển đổi thập lục phân có hai chữ số thành số thập phân, hãy lấy chữ số đầu tiên và nhân với 16 (vì thập lục phân là cơ số 16), sau đó cộng chữ số thứ hai. Sử dụng BF làm ví dụ cho 75% alpha:
- B bằng 11, khi nhân với 16 bằng 176
- F bằng 15
- 176 + 15 = 191
- Giá trị alpha là 191 — 75% của 255
RGB (Đỏ, Xanh lục, Xanh dương)
h1 {
color: rgb(183, 21, 64);
}
Màu RGB được xác định bằng hàm màu rgb()
, sử dụng số hoặc phần trăm làm tham số.
Các con số này phải nằm trong phạm vi 0-255 và tỷ lệ phần trăm nằm trong khoảng 0% đến 100%.
RGB hoạt động trên tỷ lệ từ 0 đến 255, vì vậy, 255 sẽ tương đương với 100% và 0 đến 0%.
Để đặt màu đen trong RGB, hãy xác định nó là rgb(0 0 0)
, không có màu đỏ, không màu xanh lục và không màu xanh lam.
Màu đen cũng có thể được định nghĩa là rgb(0%, 0%, 0%)
.
Màu trắng hoàn toàn trái ngược: rgb(255, 255, 255)
hoặc rgb(100%, 100%, 100%)
.
alpha được đặt trong rgb()
theo một trong 2 cách.
Thêm /
sau các tham số màu đỏ, xanh lục và xanh dương hoặc sử dụng hàm rgba()
.
Giá trị alpha có thể được xác định bằng phần trăm hoặc số thập phân trong khoảng từ 0 đến 1.
Ví dụ: để đặt màu đen alpha 50% trong các trình duyệt hiện đại, hãy viết: rgb(0 0 0 / 50%)
hoặc rgb(0 0 0 / 0.5)
.
Để được hỗ trợ rộng hơn, hãy sử dụng hàm rgba()
, hãy ghi: rgba(0, 0, 0, 50%)
hoặc rgba(0, 0, 0, 0.5)
.
HSL (Tím, Độ rực màu, Độ sáng)
h1 {
color: hsl(344, 79%, 40%);
}
HSL là từ viết tắt của màu sắc, độ bão hoà và độ sáng. Hue mô tả giá trị trên bánh xe màu, từ 0 đến 360 độ, bắt đầu bằng màu đỏ (là cả 0 và 360). Màu 180 (hoặc 50%) sẽ nằm trong phạm vi màu xanh dương. Đó là nguồn gốc của màu mà chúng ta thấy.
Độ rực màu là mức độ rực rỡ của màu sắc đã chọn. Màu khử bão hoà hoàn toàn (có độ bão hoà 0%
) sẽ xuất hiện trên thang màu xám.
Cuối cùng, độ sáng là tham số mô tả tỷ lệ từ trắng đến đen của ánh sáng bổ sung.
Độ sáng của 100%
sẽ luôn cho màu trắng.
Khi sử dụng hàm màu hsl()
, bạn xác định màu đen thực sự bằng cách viết hsl(0 0% 0%)
hoặc thậm chí là hsl(0deg 0% 0%)
.
Điều này là do tham số màu xác định độ trên bánh xe màu (nếu bạn sử dụng loại số) là 0-360.
Bạn cũng có thể sử dụng loại góc, tức là (0deg
) hoặc (0turn)
.
Cả độ bão hoà và độ sáng đều được xác định bằng tỷ lệ phần trăm.
Alpha được xác định trong hsl()
, theo cách tương tự như rgb()
bằng cách thêm /
sau các tham số màu sắc, độ bão hoà và độ sáng hoặc bằng cách sử dụng hàm hsla()
.
Giá trị alpha có thể được xác định bằng phần trăm hoặc số thập phân trong khoảng từ 0 đến 1.
Ví dụ: để đặt màu đen alpha 50%, hãy sử dụng: hsl(0 0% 0% / 50%)
hoặc hsl(0 0% 0% / 0.5)
.
Sử dụng hàm hsla()
, hãy viết: hsla(0, 0%, 0%, 50%)
hoặc hsla(0, 0%, 0%, 0.5)
.
Từ khóa màu
Có 148 màu được đặt tên trong CSS. Đây là những tên tiếng Anh thuần tuý như tím, cà chua và Goldenrod. Một số tên phổ biến nhất, theo Niên giám web, có màu đen, trắng, đỏ, xanh lam và xám. Các trò chơi được ưa thích gồm có Goldenrod, aliceblue và hotpink.
Ngoài các màu tiêu chuẩn, còn có các từ khóa đặc biệt có sẵn:
transparent
là màu hoàn toàn trong suốt. Đây cũng là giá trị ban đầu củabackground-color
currentColor
là giá trị động được tính toán theo bối cảnh của thuộc tínhcolor
. Nếu bạn có màu văn bản làred
và sau đó đặtborder-color
thànhcurrentColor
, thì màu này cũng sẽ có màu đỏ. Nếu phần tử mà bạn xác địnhcurrentColor
chưa xác định giá trị chocolor
, thìcurrentColor
sẽ được tính theo tầng thay thế
Nơi sử dụng màu trong quy tắc CSS
Nếu một thuộc tính CSS chấp nhận loại dữ liệu <color>
dưới dạng một giá trị, thì thuộc tính này sẽ chấp nhận bất kỳ phương thức nào ở trên để thể hiện màu sắc.
Để định kiểu cho văn bản, hãy sử dụng các thuộc tính color
, text-shadow
và text-decoration-color
. Tất cả đều chấp nhận màu sắc là giá trị hoặc màu sắc trong giá trị.
Đối với nền, bạn có thể đặt màu làm giá trị cho background
hoặc background-color
.
Bạn cũng có thể dùng màu trong hiệu ứng chuyển màu, chẳng hạn như linear-gradient
.
Chuyển màu là một loại hình ảnh có thể được xác định theo phương thức lập trình trong CSS.
Chuyển màu chấp nhận hai hoặc nhiều màu trong bất kỳ tổ hợp định dạng màu nào, chẳng hạn như hex, rgb hoặc hsl.
Cuối cùng, border-color
và outline-color
đặt màu cho đường viền và đường viền trên hộp.
Thuộc tính box-shadow
cũng chấp nhận màu sắc là một trong các giá trị.
Kiểm tra mức độ hiểu biết của bạn
Kiểm tra kiến thức của bạn về màu sắc
Màu nào sau đây là màu hợp lệ?
rbga(400 0 1)
#0f08
#OOFZ2
rgb(255, 0, 0)
hsl(180deg 50% 50%)
hotpink
Hãy phát hiện màu hsl không hợp lệ.
hsl(5, 0%, 90%)
hsl(.5turn 40% 60%)
hsl(0, 0, 0)
hsl(2rad 50% 50%)
hsl(0 0% 0% / 20%)