Video giảng Khoa học máy tính 12 cánh diều Bài 10: Bộ chọn lớp, bộ chọn định danh

Tóm lược nội dung

BÀI 10: BỘ CHỌN LỚP, BỘ CHỌN ĐỊNH DANH

Chào mừng các em đến với bài học ngày hôm nay!

Thông qua video này, các em sẽ nắm được các kiến thức và kĩ năng như sau:

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

KHỞI ĐỘNG

HS dựa vào hiểu biết để trả lời các câu hỏi.

HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨC

NỘI DUNG 1: BỘ CHỌN LỚP

+ Bộ chọn lớp được khai báo như thế nào?

+ Để áp dụng bộ chọn lớp cho phần tử cụ thể của văn bản HTML, em cần thực hiện như thế nào?

Video trình bày nội dung:

- Mỗi bộ chọn lớp (class selector) được đặt tên, thường được dùng để khai báo các quy tắc định dạng được áp dụng chung cho nhiều phần tử trong văn bản HTML thay vì phải viết lặp lại các quy tắc này cho từng phần tử.

- Cú pháp khai báo bộ chọn lớp:

Trong đó, Tên_bộ_chọn_lớp do người tạo CSS tự định nghĩa và bắt đầu bằng dấu chấm.

Lưu ý: 

+ Nên hạn chế đặt tên bộ chọn định danh trùng với tên phần tử.

+ Do mục đích định danh nên tên định danh của phần tử thường là duy nhất trong một trang web.

NỘI DUNG 2: BỘ CHỌN ĐỊNH DANH

+ Em hãy nhắc lại cách khai báo sử dụng thuộc tính id để gán tên định danh cho phần tử.

Video trình bày nội dung:

- Cú pháp khai báo sử dụng thuộc tính id để gán tên định danh cho phần tử:

id=“Tên_định_danh”

- CSS có thể sử dụng bộ chọn định danh (ID selector) để áp dụng quy tắc định dạng cho một phần tử đã được định danh trong văn bản HTML. 

- Bộ chọn định danh được xác định thông qua Tên_định_danh của phần tử này và được khai báo như sau:

Ví dụ 4: Văn bản HTML ở Hình 4a khai báo và áp dụng quy tắc định dạng dùng bộ chọn định danh. Kết quả hiển thị như Hình 4b, phần tử h1 với định danh là “tieu-de-muc-chinh” sẽ được trình bày chữ màu đỏ…

NỘI DUNG 3: THỰC HÀNH SỬ DỤNG BỘ CHỌN LỚP, BỘ CHỌN ĐỊNH DANH

Em hãy đọc kĩ yêu cầu của Nhiệm vụ 1 SGK tr.79 và thực hành cá nhân theo hướng dẫn.

Video trình bày nội dung:

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

- Yêu cầu 1:

+ Bước 1: HS tạo tệp “Bai10-NV1.css”.

+ Bước 2: HS thực hiện khai báo các quy tắc định dạng CSS.

* Nội dung tệp “Bai10-NV1.css”:

+ Bước 3: HS ghi lưu tệp

- Yêu cầu 2:

+ Bước 1: HS đổi tên tệp “Bai9-NV2.html” thành “Bai 10-NV1.html”. 

Lưu ý: Cần lưu cùng thư mục với tệp “Bai 10-NV1.css”.

+ Bước 2: HS thực hiện khai báo áp dụng định dạng external CSS cho tệp “Bai 10-NV1.html”.

+ Bước 3: HS thực hiện khai báo các thuộc tính class cho các phần tử…

Nội dung video Bài 10: “Bộ chọn lớp, bộ chọn định danh” còn nhiều phần rất hấp dẫn và thú vị. Hãy cùng đăng kí để tham gia học bài và củng cố kiến thức thông qua hoạt động luyện tập và vận dụng trong video.