Lý thuyết Tin học 12 Bài 10 (Cánh diều): Bộ chọn lớp, bộ chọn định danh

Lý thuyết Tin học 12 Bài 10: Bộ chọn lớp, bộ chọn định danh

1. Bộ chọn lớp

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ử.

Bộ chọn lớp được khai báo như sau:

.Tên_bộ chọn lớp (thuộc tỉnh 1 giá trị...; thuộc tính n. giá trị,}

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.

.red {color: red;}

2. Bộ chọ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. Khi đó, 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:

#Tên_định_danh (thuộc tỉnh 1: giả trị, ...; thuộc tỉnh n. giá trị; }

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

Soạn văn bản HTML có khai báo CSS sử dụng bộ chọn lớp để được trang web hiển thị trên màn hình trình duyệt web như ở Hình 5. Yêu cầu 1:

Em hãy sử dụng external CSS tạo bảng định dạng gồm các quy tắc sau:

– Bộ chọn lớp có tên blue khai báo định dạng màu steelblue.

– Bộ chọn lớp có tên red khai báo định dạng màu darkred.

– Bộ chọn lớp có tên orangered để khai báo các thuộc tính định dạng CSS: tên phông chữ “Verdana”, cỡ chữ 25 pixel, màu chữ orangered. - Bộ chọn lớp có tên yellow cho phần tử input để khai báo thuộc tính CSS: màu nền yellow.

- Bộ chọn lớp có tên blue cho phần tử input để khai báo thuộc tính CSS: màu nền blue, màu chu white.

Hướng dẫn thực hiện:

Bước 1. Tạo tệp “Bai10-NV1.css”. – Mở phần mềm Sublime Text.

– Tạo tệp mới và ghi lưu với tên “Bai10-NV1.css”.

Bước 2. Khai báo các quy tắc định dạng CSS như sau:

.blue {color: steelblue;} .red {color: darkred;}

.orangered { font-size: 25px; color: orangered;}

input.yellow {background-color: yellow;}

input.blue {background-color: blue; color: white;}

Bước 3. Ghi lưu tệp.

Yêu cầu 2:

Áp dụng khai báo external CSS đã hoàn thành ở Yêu cầu 1 để định dạng trình bày

trang web như ở Hình 5.

Hướng dẫn thực hiện:

Bước 1. Mở tệp “Bai9-NV2.html” đã soạn ở Bài 9, ghi lưu với tên tệp mới là “Bai10-NV1.html”. Lưu ý, cần lưu cùng thư mục với tệp “Bai10-NV1.css”.

Bước 2. Khai báo áp dụng định dạng external CSS.

Trong nội dung phần tử head, sửa khai báo liên kết đến external CSS: <link rel="stylesheet" href="Bai10-NV1.css">.

Bước 3. Khai báo các thuộc tính class cho các phần tử.

Trong nội dung phần tử body:

- Thêm khai báo thuộc tính class cho phần tử h2 như sau: <h2 class= “red”>.

- Thêm khai báo thuộc tính class cho phần tử h3 của tiêu đề mục “1. Thông tin về người góp ý” như sau: <h3 class=“blue orangered”>.

Chú ý, giá trị của thuộc tính class có thể gồm nhiều bộ chọn lớp được viết phân tách bởi dấu cách. Khi đó, các khai báo định dạng CSS thuộc bộ chọn lớp blue và orangered đều được áp dụng.

– Thêm khai báo thuộc tính class = “blue” cho các phần tử h3 khác.

– Thêm khai báo thuộc tính class = "yellow” cho các phần tử input nhập liệu ô text.

– Thêm khai báo thuộc tính class “blue” cho phần tử input gửi dữ liệu.

Bước 4. Ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.

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

Yêu cầu: Em hãy chỉnh sửa văn bản HTML đã hoàn thành ở Nhiệm vụ 1 để khai báo định dạng CSS theo bộ chọn định danh cho tiêu đề “Đóng góp ý kiến cho thư viện của nhà trường” có phông chữ “Courier New”, cỡ chữ 30 pixel, màu chữ lightsalmon. Hướng dẫn thực hiện:

Bước 1. Mở tệp “Bai10-NV1.html” đã hoàn thành ở Nhiệm vụ 1, ghi lưu với tên

mới là “Bai10-NV2.html”.

- Thêm khai báo #tieu-de Courier New”; font-size: 30px; color: lightsalmon;} vào trong phần khai báo <style></style>.

- Sửa khai báo phần tử h2 thành: <h2 id=“tieu-de”> Đóng góp ý kiến cho thư viện của nhà trường</h2>.

Bước 2. Ghi lưu văn bản HTML, mở tệp bằng trình duyệt web và quan sát kết quả.

Trắc nghiệm: Bộ chọn lớp, bộ chọn định danh

PHẦN I. Câu trắc nghiệm nhiều phương án lựa chọn. Thí sinh trả lời từ câu 1 đến câu 10. Mỗi câu hỏi thí sinh chỉ lựa chọn một phương án.

Câu 1: Bộ chọn lớp trong CSS được khai báo như thế nào?

A. #Tên_bộ_chọn_lớp { thuộc tính: giá trị; }

B. .Tên_bộ_chọn_lớp { thuộc tính: giá trị; }

C. Tên_bộ_chọn_lớp { thuộc tính: giá trị; }

D. *Tên_bộ_chọn_lớp { thuộc tính: giá trị; }

Câu 2: Bộ chọn định danh trong CSS được khai báo như thế nào?

A. .Tên_định_danh { thuộc tính: giá trị; }

B. #Tên_định_danh { thuộc tính: giá trị; }

C. Tên_định_danh { thuộc tính: giá trị; }

D. *Tên_định_danh { thuộc tính: giá trị; }

Câu 3: Trong CSS, thuộc tính nào được dùng để thay đổi màu chữ?

A. font-family

B. font-size

C. color

D. background-color

Câu 4: Làm thế nào để áp dụng nhiều bộ chọn lớp cho một phần tử trong CSS?

A. Tách các bộ chọn lớp bằng dấu phẩy

B. Tách các bộ chọn lớp bằng dấu chấm

C. Tách các bộ chọn lớp bằng dấu cách

D. Tách các bộ chọn lớp bằng dấu gạch ngang

Câu 5: Để định dạng phần tử <input> với màu nền xanh và chữ trắng, bạn sẽ sử dụng bộ chọn lớp nào trong CSS?

A. .yellow

B. .blue

C. .red

D. .orangered

Câu 6: Làm thế nào để liên kết một tệp CSS ngoại vào tệp HTML?

A. <link rel="stylesheet" href="tên_tệp.css">

B. <style src="tên_tệp.css"></style>

C. <script src="tên_tệp.css"></script>

D. <stylesheet href="tên_tệp.css"></stylesheet>

Câu 7: Để thay đổi phông chữ của phần tử với ID cụ thể, bạn sẽ sử dụng thuộc tính nào trong CSS?

A. font-size

B. font-family

C. text-align

D. line-height

Câu 8: Bộ chọn lớp nào có thể được sử dụng để định dạng màu nền của phần tử <input>?

A. .red

B. .yellow

C. .blue

D. .orangered

Câu 9: Bộ chọn lớp .orangered định nghĩa các thuộc tính nào trong ví dụ sau?

A. font-family, font-size, color

B. background-color, color

C. font-family, color

D. font-size, background-color

Câu 10: Khi thay đổi cỡ chữ của phần tử với bộ chọn định danh, bạn nên sử dụng thuộc tính nào?

A. font-family

B. font-size

C. text-transform

D. line-height

PHẦN II. Câu trắc nghiệm đúng sai. Thí sinh trả lời từ câu 1 đến câu 2. Trong mỗi ý a), b), c), d) ở mỗi câu, thí sinh chọn đúng hoặc sai

Câu 1: Phát biểu sau đúng hay sai về khai báo Bộ chọn lớp và bộ chọn định danh trong CSS ?

a) Bộ chọn lớp được khai báo bằng dấu chấm và bắt đầu bằng .Tên_bộ_chọn_lớp.

b) Bộ chọn định danh được khai báo bằng dấu hash và bắt đầu bằng #Tên_định_danh.

c) Bộ chọn lớp và bộ chọn định danh có thể được áp dụng cho nhiều phần tử khác nhau cùng lúc.

d) Bộ chọn định danh không cần phải bắt đầu bằng dấu hash trong CSS.

Câu 2: Khi sử dụng bộ chọn lớp và bộ chọn định danh trong CSS, những điều sau là đúng hay sai?

a) Bộ chọn lớp được áp dụng cho các phần tử có cùng một kiểu định dạng trong CSS.

b) Bộ chọn định danh có thể được sử dụng để định dạng nhiều phần tử khác nhau trong CSS.

c) Để áp dụng nhiều bộ chọn lớp cho một phần tử, các lớp cần được phân tách bằng dấu cách.

d) Bộ chọn lớp và bộ chọn định danh đều có thể được sử dụng để định dạng các thuộc tính của phần tử HTML.

PHẦN III. Câu trả lời ngắn. Thí sinh trả lời từ câu 1 đến câu 3

Câu 1: Khi sử dụng bộ chọn lớp trong CSS, cú pháp khai báo như thế nào?

Câu 2: Bộ chọn định danh trong CSS có điểm gì khác biệt so với bộ chọn lớp?

Câu 3: Làm thế nào để áp dụng nhiều bộ chọn lớp cho một phần tử trong CSS?