BÀI 10. BỘ CHỌN LỚP, BỘ CHỌN ĐỊNH DANH<br/>(CÁNH DIỀU

Bài 10 - Bộ chọn lớp, bộ chọn định danh (Cánh diều - cs & ict)

Đây là bài soạn lý thuyết tin học 12 - sách Cánh diều. Bài học này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (cs) và Tin học ứng dụng (ict). Lý thuyết được tóm tắt ngắn gọn, dễ hiểu, bám sát nội dung cốt lõi của bài học. Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

1. Bộ chọn lớp (class)

- Dùng để áp dụng chung một quy tắc CSS cho nhiều phần tử HTML mà không cần lặp lại khai báo CSS.
- Cú pháp:

- Áp dụng trong HTML bằng cách thêm thuộc tính class:

- Một phần tử có thể có nhiều lớp:

- Định dạng trong CSS:

- Ví dụ 1:

- Ví dụ 2:

2. Bộ chọn định danh (id)

- Dùng để áp dụng một quy tắc CSS duy nhất cho một phần tử HTML cụ thể.
- Cú pháp:

- Áp dụng trong HTML bằng thuộc tính id:

- Định dạng trong CSS:

- Ví dụ:

3. Thực hành sử dụng bộ chọn lớp, bộ chọn định danh

Nhiệm vụ 1: Khai báo và áp dụng bộ chọn lớp (class)

Yêu cầu: Tạo file CSS Bai10-NV1.css với các quy tắc sau:
- .blue → màu chữ steelblue
- .red → màu chữ darkred
- .orangered → phông Verdana, cỡ chữ 25px, màu chữ orangered
- .yellow (cho input) → nền yellow
- .blue (cho input) → nền blue, chữ white
Áp dụng vào HTML:
- Mở Bai9-NV2.html, lưu thành Bai10-NV1.html.
- Liên kết Bai10-NV1.css bằng <link rel="stylesheet" href="Bai10-NV1.css">.
- Thêm các class vào phần tử tương ứng (h2, h3, input).

Nhiệm vụ 2: Khai báo và áp dụng bộ chọn định danh (id)

Yêu cầu: Định dạng tiêu đề chính với id="tieu-de" có:
- Phông chữ Courier New
- Cỡ chữ 30px
- Màu chữ lightsalmon
Thực hiện:
- Mở Bai10-NV1.html, lưu thành Bai10-NV2.html.
- Thêm CSS vào <style>:

- Sửa tiêu đề thành:

- Lưu và kiểm tra trên trình duyệt.
Tóm lại:
- Bộ chọn lớp (class) giúp tái sử dụng quy tắc CSS trên nhiều phần tử.
- Bộ chọn định danh (id) dành cho định dạng duy nhất của một phần tử cụ thể.
- Biết cách kết hợp class và id giúp tạo giao diện linh hoạt hơn trong thiết kế web.

---The End!---

CÙNG CHUYÊN MỤC: