CSS colors được dùng để đặt màu cho các phần khác nhau của trang web. Ví dụ như text, background, và borders. Điều này giúp trang web trông hấp dẫn hơn, dễ đọc hơn. Bạn có thể định nghĩa màu bằng tên, mã hex, giá trị RGB và nhiều hơn nữa.
Bạn có thể thử các định dạng màu khác nhau tại đây:
Các định dạng màu trong CSS
Định dạng màu | Mô tả |
|---|---|
Tên màu | Sử dụng tên màu được định nghĩa trước (ví dụ: red, blue, green) để đơn giản. |
Mã Hexadecimal (Hex) | Định nghĩa màu bằng cách sử dụng mã hex sáu chữ số (ví dụ: #FF5733). |
RGB (Red, Green, Blue) | Định nghĩa màu bằng cách sử dụng các giá trị RGB (ví dụ: rgb(255, 0, 0)). |
RGBA (Red, Green, Blue, Alpha) | Mở rộng RGB bằng cách thêm giá trị alpha (độ trong suốt) (ví dụ: rgba(255, 0, 0, 0.5)). |
HSL (Hue, Saturation, Lightness) | Định nghĩa màu bằng cách sử dụng các giá trị HSL (ví dụ: hsl(120, 100%, 50%)). |
HSLA (Hue, Saturation, Lightness, Alpha) | Mở rộng HSL bằng cách thêm giá trị alpha cho độ trong suốt (ví dụ: hsla(120, 100%, 50%, 0.5)). |
<html>
<head>
<style>
.hex-example {
background-color: #FF5733; /* Hexadecimal color */
}
.rgb-example {
color: rgb(255, 0, 0); /* RGB color */
}
.rgba-example {
color: rgba(0, 255, 0, 0.5); /* RGBA color with transparency */
}
.hsl-example {
color: hsl(120, 100%, 50%); /* HSL color */
}
.hsla-example {
color: hsla(120, 100%, 50%, 0.3); /* HSLA color with transparency */
}
</style>
</head>
<body>
<div class="hex-example">This div has a Hexadecimal background color.</div>
<div class="rgb-example">This text is in RGB red.</div>
<div class="rgba-example">This text is in RGBA green with 50% transparency.</div>
<div class="hsl-example">This text is in HSL green.</div>
<div class="hsla-example">This text is in HSLA green with 30% opacity.</div>
</body>
</html>
Trong ví dụ này:
- Màu nền (background-color):
- background-color: #FF5733; áp dụng màu đỏ cam sáng cho nền bằng mã hex.
- padding: 20px; thêm khoảng trắng bên trong div để nó dễ nhìn hơn.
- Màu chữ (color):
- color: rgb(255, 0, 0); đặt màu chữ thành màu đỏ bằng ký hiệu RGB.
- font-size: 20px; tăng kích thước chữ để nó nổi bật hơn.
- Màu viền (border):
- border: 5px solid rgba(0, 255, 0, 0.5); tạo viền màu xanh lá cây liền nét với độ trong suốt 50% bằng RGBA.
- padding: 10px; và margin: 10px; đảm bảo div có không gian xung quanh và bên trong.
- Hiệu ứng di chuột:
- Trong class .hover-example, background-color: hsl(120, 100%, 50%); áp dụng nền màu xanh lá cây sáng.
- Khi di chuột qua, màu nền thay đổi thành màu xanh lá cây nhạt hơn: background-color: hsla(120, 100%, 50%, 0.7);.
Các trường hợp sử dụng màu CSS với ví dụ code
Màu CSS đóng một vai trò quan trọng trong thiết kế và chức năng của trang web. Dưới đây là các trường hợp dùng phổ biến của màu CSS cùng với các ví dụ code đơn giản:
. Màu nền
Bạn có thể dùng background-color để đặt màu cho nền của một phần tử. Nó thường được dùng cho các phần, div, header, footer,...
HTML<html>
<head>
<style>
.bg-example {
background-color: #FF5733; /* Red-Orange background */
padding: 20px;
color: white;
}
</style>
</head>
<body>
<div class="bg-example">This div has a warm background color!</div>
</body>
</html>
. Màu chữ
Thuộc tính color được dùng để áp dụng màu cho chữ. Điều quan trọng là đảm bảo độ tương phản tốt giữa chữ và nền để dễ đọc.
HTML<html>
<head>
<style>
.text-example {
color: rgb(255, 0, 0); /* Red text */
font-size: 20px;
}
</style>
</head>
<body>
<p class="text-example">This text is in red.</p>
</body>
</html>
. Màu viền
Bạn có thể dùng thuộc tính border để áp dụng màu cho viền của một phần tử. Nó thường được dùng cho button, card, hoặc form input để tạo đường viền dễ thấy.
HTML<html>
<head>
<style>
.border-example {
border: 5px solid rgba(0, 255, 0, 0.5); /* Semi-transparent green border */
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="border-example">This div has a semi-transparent green border.</div>
</body>
</html>
. Hiệu ứng di chuột
Sử dụng pseudo-class :hover để thay đổi màu của một phần tử khi người dùng di chuột qua nó. Điều này giúp thêm tính tương tác cho thiết kế của bạn.
HTML<html>
<head>
<style>
.hover-example {
background-color: #4CAF50; /* Green background */
color: white;
padding: 20px;
text-align: center;
cursor: pointer;
}
.hover-example:hover {
background-color: #45a049; /* Darker green on hover */
}
</style>
</head>
<body>
<div class="hover-example">Hover over me to change the background color!</div>
</body>
</html>
. Bóng và hiệu ứng chữ
Bạn có thể dùng box-shadow để thêm bóng xung quanh phần tử hoặc text-shadow để thêm bóng cho chữ. Tạo độ sâu và làm nổi bật.
HTML<html>
<head>
<style>
.shadow-example {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
color: #FF5733;
font-size: 30px;
}
.box-shadow-example {
box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.3);
padding: 20px;
background-color: #FFF;
}
</style>
</head>
<body>
<p class="shadow-example">This text has a shadow effect.</p>
<div class="box-shadow-example">This div has a box shadow.</div>
</body>
</html>
. Gradients
CSS cho phép bạn tạo gradient bằng thuộc tính background. Gradient có thể chuyển đổi mượt mà giữa hai hoặc nhiều màu.
HTML<html>
<head>
<style>
.gradient-example {
background: linear-gradient(to right, #FF5733, #33FF57);
padding: 40px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="gradient-example">This div has a linear gradient background.</div>
</body>
</html>