Thuộc tính `color` trong HTML và CSS được sử dụng để xác định màu sắc của văn bản.
Dưới đây là chi tiết về cách sử dụng và các giá trị của thuộc tính `color` trong HTML và CSS.

1. Cú pháp của thuộc tính `color` trong CSS:
```css
selector {
color: giá_trị_màu_sắc;
}
```

Ví dụ:
```css
p {
color: red;
}
```

2. Các cách để định nghĩa giá trị màu sắc:

a. **Màu tên (Named Colors):
CSS hỗ trợ khoảng 140 tên màu sắc chuẩn. Một số tên màu phổ biến:
- red
- blue
- green
- black
- white
- yellow
- gray

Ví dụ:
```css
h1 {
color: blue;
}
```

b. **Mã màu hệ thập lục phân (Hexadecimal Colors):
Sử dụng mã hex gồm 6 ký tự (có thể rút gọn thành 3 ký tự nếu các cặp giống nhau). Mỗi cặp thể hiện mức độ màu đỏ, xanh lá cây, và xanh dương (RGB).

- Đầy đủ: #RRGGBB`
- Rút gọn: #RGB`

Ví dụ:
```css
h1 {
color: #ff0000; /* Màu đỏ */
}
p {
color: #0f0; /* Màu xanh lá cây rút gọn */
}
```

c. RGB (Red, Green, Blue):
Định nghĩa màu sắc bằng giá trị RGB, có thể dùng giá trị từ `0` đến `255` cho mỗi kênh màu.

Cú pháp: `rgb(red, green, blue)`

Ví dụ:
```css
h1 {
color: rgb(255, 0, 0); /* Màu đỏ */
}
```

d. RGBA (Red, Green, Blue, Alpha):**
Giống với RGB, nhưng có thêm kênh alpha để chỉ độ trong suốt (giá trị từ `0` đến `1`).

Cú pháp: `rgba(red, green, blue, alpha)`

Ví dụ:
```css
h1 {
color: rgba(255, 0, 0, 0.5); /* Màu đỏ với độ trong suốt 50% */
}
```

e. HSL (Hue, Saturation, Lightness):**
Định nghĩa màu sắc dựa trên sắc độ, độ bão hòa và độ sáng.

Cú pháp: `hsl(hue, saturation, lightness)`

- `hue`: Góc của vòng tròn màu (từ `0` đến `360`), với `0` là màu đỏ, `120` là màu xanh lá cây, và `240` là màu xanh dương.
- `saturation`: Độ bão hòa màu, giá trị từ `0%` (xám) đến `100%` (màu tươi sáng).
- `lightness`: Độ sáng, giá trị từ `0%` (đen) đến `100%` (trắng).

Ví dụ:
```css
h1 {
color: hsl(0, 100%, 50%); /* Màu đỏ */
}
```

f. HSLA (Hue, Saturation, Lightness, Alpha):
Giống với HSL nhưng có thêm kênh alpha để kiểm soát độ trong suốt.

Cú pháp: `hsla(hue, saturation, lightness, alpha)`

Ví dụ:
```css
h1 {
color: hsla(240, 100%, 50%, 0.5); /* Màu xanh dương với độ trong suốt 50% */
}
```

3. Các giá trị mặc định:
- Nếu không chỉ định `color`, màu mặc định sẽ là `black` trong hầu hết các trình duyệt.

4. **Thứ tự kế thừa (Inheritance):**
Thuộc tính `color` được kế thừa từ phần tử cha, nghĩa là nếu phần tử con không có thuộc tính `color` thì nó sẽ nhận màu từ phần tử cha của nó.

5. Các giá trị đặc biệt:
- inherit :Lấy giá trị từ phần tử cha.
- initial : Đặt giá trị về mặc định ban đầu (thường là `black`).
- unset : Gỡ bỏ giá trị đã định nghĩa và đặt về kế thừa hoặc giá trị mặc định tùy theo ngữ cảnh.

Ví dụ:
```css
h1 {
color: inherit;
}

6. Sử dụng `color` trong HTML:
Bạn cũng có thể sử dụng thuộc tính `color` trực tiếp trong thẻ HTML với cú pháp inline CSS.

Ví dụ:
```html
<p style="color: red;">Đoạn văn bản này có màu đỏ.</p>
```

Tổng kết:
- Có nhiều cách định nghĩa màu sắc như tên màu, mã hex, RGB, HSL, và các phiên bản với kênh alpha.
- CSS hỗ trợ các tính năng kế thừa và tùy chỉnh màu sắc một cách linh hoạt.