CSS - Màu sắc: Cuộc hành trình đầy màu sắc cho người mới bắt đầu
Xin chào các nhà thiết kế web tương lai! ? Tôi rất vui được dẫn bạn đi một cuộc hành trình đầy màu sắc trong thế giới của CSS colors. Là người đã dạy về điều này trong nhiều năm, tôi có thể告诉 bạn rằng việc hiểu màu sắc trong CSS giống như học cách vẽ với mã. Nó vui vẻ, sáng tạo và rất thỏa mãn khi bạn làm đúng!
Mục lục
- Các loại giá trị cho màu sắc trong CSS
- Màu nền trong CSS
- Màu chữ trong CSS
- Màu viền trong CSS
- Màu con trỏ trong CSS
- Từ khóa màu trong CSS
- Từ khóa kế thừa màu trong CSS
- Từ khóa màu trong suốt trong CSS
- Từ khóa
currentColortrong CSS - Xây dựng mã màu trong CSS
- Màu sắc an toàn cho trình duyệt trong CSS
Các loại giá trị cho màu sắc trong CSS
Hãy bắt đầu với những điều cơ bản. Trong CSS, chúng ta có nhiều cách để biểu thị màu sắc. Nó giống như có nhiều loại cọ khác nhau trong bộ công cụ của bạn. Dưới đây là bảng tóm tắt handy:
| Loại giá trị màu | Ví dụ | Mô tả |
|---|---|---|
| Từ khóa |
red, blue, green
|
Các tên màu đã xác định |
| Hexadecimal |
#FF0000, #00FF00
|
Mã 6 chữ số biểu thị giá trị RGB |
| RGB | rgb(255, 0, 0) |
Giá trị Red, Green, Blue (0-255) |
| RGBA | rgba(255, 0, 0, 0.5) |
RGB với kênh Alpha (độ mờ) |
| HSL | hsl(0, 100%, 50%) |
Màu sắc, Độ bão hòa, Độ sáng |
| HSLA | hsla(0, 100%, 50%, 0.5) |
HSL với kênh Alpha |
Bây giờ, hãy cùng tìm hiểu sâu hơn về từng loại này và xem chúng ta có thể sử dụng chúng để vẽ trang web của mình!
Màu nền trong CSS
Màu nền giống như canvas của trang web của bạn. Hãy bắt đầu với một ví dụ đơn giản:
body {
background-color: #87CEEB;
}Mã này đặt màu nền của toàn bộ trang của bạn thành một màu xanh trời tuyệt đẹp. #87CEEB là một mã màu hex. Hãy nghĩ về nó như một mã bí mật mà các trình duyệt hiểu để hiển thị màu sắc.
Nhưng nếu bạn muốn thêm màu nền cho một phần tử cụ thể? Không có vấn đề gì!
.highlight-box {
background-color: rgb(255, 255, 0);
}Điều này sẽ làm cho bất kỳ phần tử nào có lớp highlight-box có nền vàng rực rỡ. Tại đây, chúng ta sử dụng giá trị RGB, trong đó mỗi số đại diện cho cường độ của đỏ, xanh lá cây và xanh lam tương ứng.
Màu chữ trong CSS
Bây giờ chúng ta đã sơn nền, hãy màu chữ của mình:
p {
color: #333333;
}Điều này đặt tất cả văn bản đoạn thành màu xám đậm. Lưu ý rằng chúng ta sử dụng thuộc tính color cho văn bản, không phải text-color. Đây là một trong những đặc điểm kỳ lạ bạn sẽ quen thuộc!
Hãy làm cho mọi thứ thú vị hơn:
.warning {
color: rgba(255, 0, 0, 0.7);
}Điều này tạo ra một màu đỏ trong suốt cho các phần tử có lớp warning. Giá trị cuối cùng trong rgba() là kênh alpha, kiểm soát độ mờ từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn không trong suốt).
Màu viền trong CSS
Viền giống như khung của bức tranh của bạn. Hãy thêm một chút màu sắc cho chúng:
.box {
border: 2px solid #4CAF50;
}Điều này tạo ra một viền xanh lá cây rộng 2 pixel xung quanh các phần tử có lớp box.
Nhưng tại sao chỉ dừng lại ở một màu? Hãy làm cho mọi thứ trở nên sang trọng hơn:
.fancy-box {
border-top: 3px dotted red;
border-right: 3px dashed green;
border-bottom: 3px solid blue;
border-left: 3px double yellow;
}Bây giờ chúng ta có các màu và phong cách khác nhau cho mỗi bên của viền. Nó giống như một hộp nhỏ có彩虹!
Màu con trỏ trong CSS
Bạn có biết bạn có thể thay đổi màu sắc của con trỏ nhấp nháy trong các trường nhập liệu? Đó là điều caret-color được sử dụng để làm:
input {
caret-color: purple;
}Bây giờ khi bạn nhấp vào bất kỳ trường nhập liệu nào, bạn sẽ thấy một con trỏ tím tuyệt vời!
Từ khóa màu trong CSS
Đôi khi, bạn chỉ muốn giữ mọi thứ đơn giản. Đó là khi các từ khóa màu trở nên hữu ích:
.sky {
background-color: skyblue;
}
.grass {
background-color: limegreen;
}
.sun {
background-color: gold;
}Những tên màu đã xác định này dễ nhớ và sử dụng. Có 140 từ khóa màu trong CSS3, cung cấp cho bạn nhiều lựa chọn mà không cần phải nhớ các mã phức tạp.
Từ khóa kế thừa màu trong CSS
Từ khóa inherit giống như nói với một phần tử, "Chỉ sử dụng màu sắc của cha bạn." Nó rất tốt để duy trì sự nhất quán:
.parent {
color: blue;
}
.child {
color: inherit;
}Trong trường hợp này, các phần tử .child cũng sẽ là màu xanh, kế thừa màu sắc từ cha của chúng.
Từ khóa màu trong suốt trong CSS
Đôi khi, bạn muốn không có màu sắc nào cả. Đó là khi transparent được sử dụng:
.ghost-button {
background-color: transparent;
border: 2px solid black;
}Điều này tạo ra một nút không có màu nền, chỉ có viền đen. Nó giống như một cửa sổ trong thiết kế của bạn!
Từ khóa currentColor trong CSS
Từ khóa currentColor là một chameleon - nó lấy giá trị màu sắc hiện tại của phần tử:
.chameleon {
color: green;
border: 1px solid currentColor;
}Tại đây, viền sẽ là màu xanh, phù hợp với màu chữ. Nếu bạn thay đổi màu chữ, màu viền sẽ tự động thay đổi!
Xây dựng mã màu trong CSS
Bây giờ, hãy nói về việc xây dựng mã màu của riêng bạn. Mã hexa giống như trộn màu sơn:
/* Đỏ thuần khiết */
.red-box { background-color: #FF0000; }
/* Xanh lá cây thuần khiết */
.green-box { background-color: #00FF00; }
/* Xanh lam thuần khiết */
.blue-box { background-color: #0000FF; }Mỗi đôi ký tự đại diện cho cường độ của đỏ, xanh lá cây và xanh lam tương ứng, từ 00 (không) đến FF ( đầy đủ).
HSL là một cách khác để suy nghĩ về màu sắc:
/* Đỏ sáng */
.bright-red { color: hsl(0, 100%, 50%); }
/* XanhPastel */
.pastel-blue { color: hsl(210, 100%, 80%); }Tại đây, số đầu tiên là màu sắc (0-360), số thứ hai là độ bão hòa (0-100%), và số thứ ba là độ sáng (0-100%).
Màu sắc an toàn cho trình duyệt trong CSS
Trong những ngày đầu của internet, chúng ta phải sử dụng một bảng màu giới hạn 216 màu mà tất cả các trình duyệt có thể hiển thị. Những màu này được gọi là "màu an toàn cho trình duyệt." Ngày nay, với các màn hình hiện đại, điều này không còn quan trọng nữa, nhưng vẫn tốt để biết:
.old-school {
color: #CC3300; /* Một màu cam an toàn cho trình duyệt */
}Những màu này là sự kết hợp của 00, 33, 66, 99, CC, và FF cho mỗi thành phần RGB.
Và thế là bạn đã có nó, các đồng hành đầy màu sắc! Chúng ta đã cùng nhau vẽ qua các khái niệm cơ bản của màu sắc trong CSS. Nhớ rằng cách tốt nhất để học là thử nghiệm. Vậy hãy mở trình soạn thảo mã của bạn và bắt đầu màu sắc cho thế giới kỹ thuật số của bạn. Chúc bạn may mắn và thiết kế của bạn luôn rực rỡ! ?????
Credits: Image by storyset