Chọn đến phần học sinh cần nhanh chóng thông qua mục lục bằng cách click đến phần đó
I. Lý thuyết trọng tâm
1. Hệ thống màu của CSS
1.1. Hệ màu RGB
HTML và CSS hỗ trợ hệ màu theo mô hình RGB, trong đó R là Red (đỏ), G là Green (xanh lá), B là Blue (xanh dương).
Mỗi màu được tạo thành từ sự kết hợp của ba thành phần (r, g, b). Mỗi thành phần nhận giá trị nguyên từ 0 đến 255, tương đương với một số 8 bit. Do đó, tổng số màu có thể biểu diễn là: 2⁸ × 2⁸ × 2⁸ = 2²⁴ = 16.777.216 màu.
Các cách thiết lập giá trị màu RGB:
| Cách viết | Giải thích | Ví dụ |
|---|---|---|
rgb(r, g, b) |
Giá trị từ 0 đến 255 | rgb(255, 0, 0) → màu đỏ |
rgb(r%, g%, b%) |
Giá trị phần trăm của 255 | rgb(100%, 0%, 0%) → màu đỏ |
#rrggbb |
Giá trị trong hệ đếm hexa (cơ số 16) | #ff0000 → màu đỏ |
Một số màu cơ bản trong hệ RGB:
| Màu | rgb() | rgb(%) | Hexa |
|---|---|---|---|
| Trắng (white) | rgb(255, 255, 255) | rgb(100%, 100%, 100%) | #ffffff |
| Xám (gray) | rgb(128, 128, 128) | rgb(50%, 50%, 50%) | #808080 |
| Đen (black) | rgb(0, 0, 0) | rgb(0%, 0%, 0%) | #000000 |
1.2. Hệ màu HSL
Ngoài RGB, HTML và CSS còn hỗ trợ hệ màu HSL với ba tham số:
H (Hue) – Vùng màu:
- Là vòng tròn màu với giá trị từ 0° đến 360°
- 0° (hoặc 360°) là màu đỏ
- 120° là màu xanh lá cây
- 240° là màu xanh dương
S (Saturation) – Độ bão hòa:
- Giá trị từ 0% đến 100%
- 0%: màu biến mất, chỉ còn xám
- 100%: màu đầy đủ, rực rỡ nhất
L (Lightness) – Độ sáng:
- Giá trị từ 0% đến 100%
- 0%: độ sáng thấp nhất, màu đen
- 50%: màu đúng chuẩn
- 100%: độ sáng cao nhất, màu trắng
Vị trí các màu cơ bản trên vòng tròn Hue:
| Màu | Góc Hue | hsl() |
|---|---|---|
| Đỏ (Red) | 0° | hsl(0, 100%, 50%) |
| Vàng (Yellow) | 60° | hsl(60, 100%, 50%) |
| Xanh lá (Green) | 120° | hsl(120, 100%, 50%) |
| Xanh lơ (Cyan) | 180° | hsl(180, 100%, 50%) |
| Xanh dương (Blue) | 240° | hsl(240, 100%, 50%) |
| Hồng (Magenta) | 300° | hsl(300, 100%, 50%) |
1.3. Các tên màu có sẵn trong CSS
Bên cạnh việc sử dụng hàm rgb() và hsl(), CSS còn cung cấp sẵn các tên màu để thuận tiện cho việc sử dụng:
- Phiên bản CSS2: 16 màu chuẩn
- Phiên bản CSS3: 140 tên màu
Tên màu không phân biệt chữ hoa hay chữ thường. Ví dụ một số tên màu có sẵn: black, gray, white, red, green, orange, yellow, purple, blue, lime…
Lưu ý về màu xám (đen trắng):
Màu xám có thể được thiết lập theo hai cách:
rgb(x, x, x)với ba tham số r, g, b bằng nhauhsl(h, 0%, x%)với tham số saturation bằng 0%
2. Thiết lập màu chữ và màu nền bằng CSS
Các phần tử HTML trên trang web có thể được tô màu thông qua các thuộc tính CSS sau:
| Thuộc tính | Chức năng | Tính kế thừa |
|---|---|---|
color |
Định dạng màu chữ (màu nổi) | Có |
background-color |
Định dạng màu nền | Có |
border |
Định dạng khung viền quanh phần tử | Không |
Ví dụ 1: Định dạng màu chữ, màu nền và khung viền cho phần tử h1:
h1 {
color: red;
background-color: lightgreen;
border: 2px solid magenta;
}
Ví dụ 2: Định dạng khung viền, màu nền cho phần tử em và màu chữ cho phần tử p:
em {
background-color: lightgreen;
border: 1px solid red;
}
p {
color: blue;
}
Lưu ý quan trọng: Các thuộc tính color và background-color đều có tính kế thừa, nghĩa là các phần tử con sẽ tự động nhận định dạng từ phần tử cha. Riêng thuộc tính border không có tính kế thừa.
3. Thiết lập bộ chọn là tổ hợp các phần tử có quan hệ
Ngoài việc sử dụng bộ chọn là các phần tử độc lập, CSS còn hỗ trợ các bộ chọn là tổ hợp các phần tử có quan hệ với nhau. Các định dạng này được áp dụng cho các phần tử thỏa mãn điều kiện nhất định.
Bốn loại bộ chọn tổ hợp:
| Bộ chọn | Tên quan hệ | Ý nghĩa | Ví dụ |
|---|---|---|---|
E F |
Con cháu | F là phần tử con hoặc cháu của E (E phải ở phía trên F trong cây HTML) | div p {color: blue;} |
E > F |
Cha con trực tiếp | F là phần tử con trực tiếp của E | p > em {color: red;} |
E + F |
Anh em liền kề | F đứng liền kề ngay sau E, cả hai có cùng phần tử cha | em + strong {color: red;} |
E ~ F |
Anh em | F đứng sau E (không cần liền kề), cả hai có cùng phần tử cha | em ~ strong {color: red;} |
3.1. Ví dụ bộ chọn E F (quan hệ con cháu)
Với định dạng div p {color: blue;}, chỉ những phần tử p là con hoặc cháu của div mới được áp dụng.
<body>
<div>
<h1>Lịch sử CSS</h1>
<p>Ý tưởng ban đầu của CSS do kĩ sư Håkon Wium Lie...</p>
</div>
<h1>Ý tưởng CSS</h1>
<p>Ý tưởng chính của CSS là tạo ra các mẫu định dạng riêng...</p>
</body>
Kết quả: Chỉ đoạn văn bản đầu tiên (nằm trong div) được tô màu xanh, đoạn thứ hai không bị ảnh hưởng vì nó là con của body, không phải của div.
3.2. Ví dụ bộ chọn E > F (quan hệ cha con trực tiếp)
Với định dạng p > em {color: red;}, chỉ những phần tử em là con trực tiếp của p mới được áp dụng.
<body>
<h1>Lịch sử CSS</h1>
<p>Ý tưởng của CSS do kĩ sư <span><em>Håkon Wium Lie</em>, người Na Uy,
thiết lập năm 1994 trong khi làm việc với Tim Berners-Lee</span>
tại viện hạt nhân <em>CERN</em>.</p>
</body>
Kết quả: Chỉ từ “CERN” được tô màu đỏ vì em chứa “CERN” là con trực tiếp của p. Còn em chứa “Håkon Wium Lie” nằm trong span nên không phải con trực tiếp của p.
3.3. Ví dụ bộ chọn E + F (quan hệ anh em liền kề)
Với định dạng em + strong {color: red;}, chỉ phần tử strong đứng liền kề ngay sau em mới được áp dụng.
<body>
<h1>Lịch sử CSS</h1>
<p>Ý tưởng của CSS do kĩ sư <em>Håkon Wium Lie</em>, người Na Uy,
thiết lập năm 1994 trong khi làm việc với <strong>Tim Berners-Lee</strong>
tại viện hạt nhân <em>CERN</em>.</p>
</body>
Kết quả: Từ “Tim Berners-Lee” được tô màu đỏ vì strong đứng liền kề sau em đầu tiên (chứa “Håkon Wium Lie”).
3.4. Ví dụ bộ chọn E ~ F (quan hệ anh em)
Với định dạng em ~ strong {color: red;}, tất cả phần tử strong đứng sau em (không cần liền kề) đều được áp dụng.
<body>
<h1>Lịch sử CSS</h1>
<p>Ý tưởng của CSS do kĩ sư <em>Håkon Wium Lie</em>, người Na Uy,
thiết lập năm 1994 trong khi làm việc với <strong>Tim Berners-Lee</strong>
tại viện hạt nhân <strong>CERN</strong>.</p>
</body>
Kết quả: Cả “Tim Berners-Lee” và “CERN” đều được tô màu đỏ vì cả hai strong đều đứng sau em.
Thầy Phạm Thành Danh
(Người kiểm duyệt, ra đề)
Chức vụ: Trưởng ban biên soạn môn Tin Học THPT
Trình độ: Cử nhân Sư phạm Tin học, Chứng chỉ hạng II, Chứng chỉ Tin học, Ngoại ngữ B1
Kinh nghiệm: 8+ năm kinh nghiệm tại Trường THPT Thuận Hóa