Màu sắc và đơn vị trong CSS

Tạo bởi Hoàng Vũ, chỉnh sửa cuối lúc 21 tháng 1, 2025

Trong bài học này, bạn sẽ học cách biểu diễn màu sắc và sử dụng các loại đơn vị trong CSS. Đây là kiến thức cần thiết để thiết kế giao diện web đẹp mắt, phù hợp với nhiều kích thước màn hình và mục đích sử dụng.

Màu sắc và đơn vị

1. Cách biểu diễn màu sắc

CSS hỗ trợ nhiều cách biểu diễn màu sắc, bao gồm:

Màu tên (Color Names)
- Sử dụng các tên màu đã định nghĩa sẵn: red, blue, green.
- Dễ sử dụng nhưng giới hạn trong các màu cơ bản.
Ví dụ:
```
h1 {
  color: red;
}
```
RGB và RGBA
- RGB (Red, Green, Blue): Xác định màu bằng giá trị từ 0 đến 255 cho mỗi thành phần màu.
  Cú pháp: rgb(red, green, blue).
- RGBA: Thêm giá trị alpha (độ trong suốt, từ 0 đến 1).
  Cú pháp: rgba(red, green, blue, alpha).
Ví dụ:
```
p {
  color: rgb(0, 128, 255); /* Xanh dương */
  background-color: rgba(0, 128, 255, 0.5); /* Xanh dương nhạt, trong suốt */
}
```
HEX (Hexadecimal)
- Dùng mã hex gồm 6 ký tự (hoặc 3 ký tự rút gọn).
  Cú pháp: #rrggbb hoặc #rgb.
Ví dụ:
```
div {
  color: #ff5733; /* Màu cam */
}
```
HSL và HSLA
- HSL (Hue, Saturation, Lightness): Hue là màu chính, Saturation là độ bão hòa, Lightness là độ sáng.
  Cú pháp: hsl(hue, saturation%, lightness%).
- HSLA: Thêm giá trị alpha (độ trong suốt).
Ví dụ:
```
span {
  color: hsl(200, 100%, 50%); /* Màu xanh dương */
}
```

2. Các loại đơn vị trong CSS

Đơn vị tuyệt đối
- px (pixel): Được sử dụng phổ biến nhất, biểu thị kích thước cố định.
- cm, mm: Sử dụng ít, phù hợp khi in ấn.
Ví dụ:
```
h1 {
  font-size: 16px;
}
```
Đơn vị tương đối
- %: Tỷ lệ so với kích thước của phần tử cha.
- em: Tỷ lệ so với kích thước chữ của phần tử cha.
- rem: Tỷ lệ so với kích thước chữ của phần tử gốc (html).
- vh, vw: Tỷ lệ so với chiều cao (vh) hoặc chiều rộng (vw) của cửa sổ trình duyệt.
Ví dụ:
```
body {
  font-size: 16px; /* Base font size */
}

h1 {
  font-size: 2em; /* Gấp 2 lần font-size của body */
}

div {
  width: 50vw; /* Chiếm 50% chiều rộng màn hình */
}
```

Thực hành

File HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Màu sắc và Đơn vị</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Màu sắc và Đơn vị trong CSS</h1>
  <p class="rgb">Đây là màu RGB</p>
  <p class="hex">Đây là màu HEX</p>
  <p class="hsl">Đây là màu HSL</p>
  <div class="box">Hộp này có chiều rộng 50% và chiều cao 50vh</div>
</body>
</html>

File CSS (styles.css):

/* Màu sắc */
.rgb {
  color: rgb(255, 0, 0); /* Màu đỏ */
}

.hex {
  color: #00ff00; /* Màu xanh lá */
}

.hsl {
  color: hsl(240, 100%, 50%); /* Màu xanh dương */
}

/* Đơn vị */
.box {
  width: 50%;
  height: 50vh;
  background-color: lightblue;
  text-align: center;
  line-height: 50vh;
  margin: 20px auto;
  border: 2px solid black;
}

Kết luận

Hiểu về cách biểu diễn màu sắc và sử dụng các đơn vị trong CSS giúp bạn linh hoạt hơn trong việc thiết kế giao diện. Sự kết hợp giữa màu sắc và đơn vị tương đối sẽ làm cho trang web của bạn trở nên sống động và dễ thích ứng trên nhiều thiết bị.

Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.

Xem thêm

↑ Back to Top

Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.

Liên hệ công việc qua email dưới đây.

lhvuctu@gmail.com

Chúng Tôi Trên

Bài viết nổi bật

Màu sắc và đơn vị trong CSS