Giải Tin học 12 - Định hướng khoa học máy tính trang 94

Lời giải chi tiết SGK Lớp 12 · Môn Tin Há»c · Trang 94–95

Tóm tắt lý thuyết

Hai trang này thuộc bài về CSS, giới thiệu các bộ chọn (selector) đặc biệt:

Bộ chọn lớp (class): dùng cho một nhóm phần tử có ý nghĩa gần giống nhau. Cú pháp: .tên_lớp {thuộc tính: giá trị;}. Một phần tử có thể thuộc nhiều lớp, viết các tên lớp cách nhau bằng dấu cách.
Bộ chọn định danh (id): dùng cho từng phần tử riêng biệt. Mỗi id chỉ xuất hiện duy nhất một lần trong trang. Cú pháp: #tên_id {thuộc tính: giá trị;}.
Bộ chọn thuộc tính: áp dụng cho phần tử có thuộc tính cụ thể. Ví dụ [href] {...} hay a[target="_blank"] {...}.
Lưu ý đặt tên id/class: phân biệt hoa thường, không bắt đầu bằng số, không chứa dấu cách hay kí tự đặc biệt.

Câu hỏi đầu trang 92 (ôn tập phần khung)

Câu 1

Đề: Trong các thuộc tính khung của một phần tử HTML, khoảng cách từ vùng văn bản đến đường viền khung được gọi là gì?

Trả lời: Đó là vùng đệm, thuộc tính padding. padding tạo khoảng trống nằm bên trong khung, giữa nội dung (vùng văn bản) và đường viền border.

Câu 2

Đề: Lề khung khác gì với vùng đệm?

Trả lời:

Tiêu chí	Lề khung (`margin`)	Vùng đệm (`padding`)
Vị trí	Nằm bên ngoài đường viền	Nằm bên trong đường viền
Tác dụng	Tạo khoảng cách giữa phần tử này với các phần tử khác	Tạo khoảng cách giữa nội dung và đường viền

Nói gọn: margin đẩy phần tử ra xa các phần tử xung quanh, còn padding nới rộng khoảng trống bên trong khung quanh nội dung.

Hoạt động 3: Tìm hiểu một số bộ chọn đặc biệt khác

Câu 1

Đề: Có thể đặt mẫu định dạng cho các thẻ với thuộc tính cho trước được không?

Trả lời: Có. CSS cho phép dùng bộ chọn thuộc tính. Định dạng sẽ áp dụng cho mọi phần tử mang đúng thuộc tính (và giá trị) chỉ định.

[href] {border: 1px solid blue;}        /* mọi phần tử có thuộc tính href */
a[target="_blank"] {color: red; font-weight: bold;}  /* thẻ a có target="_blank" */

Câu 2

Đề: Có thể thiết lập các mẫu định dạng khác nhau cho cùng một loại phần tử giống nhau được không? Nếu có thì thực hiện bằng cách nào?

Trả lời: Có. Cách làm là dùng bộ chọn lớp (class) hoặc bộ chọn định danh (id) để phân biệt các phần tử cùng loại. Khi đó cùng là thẻ

nhưng mỗi nhóm sẽ có một định dạng riêng.



  Thông tin đang test
      
  Thông tin cần warning.

Hai thẻ

cùng loại nhưng có định dạng khác nhau nhờ gán lớp khác nhau.

Câu hỏi cuối trang 93

Câu 1

Đề: Nêu sự khác biệt cơ bản giữa thuộc tính id và class của các phần tử HTML.

Trả lời:

Tiêu chí	`id`	`class`
Tính duy nhất	Duy nhất, mỗi id chỉ dùng cho một phần tử trong trang	Dùng lại được cho nhiều phần tử
Số lượng trên một phần tử	Một phần tử chỉ có một id	Một phần tử có thể thuộc nhiều lớp
Mục đích	Định danh riêng cho một phần tử cụ thể	Gom nhóm các phần tử có ý nghĩa gần giống nhau
Bộ chọn CSS	Dùng dấu `#` (ví dụ `#home`)	Dùng dấu `.` (ví dụ `.test`)

Câu 2

Đề: Mỗi bộ chọn sau có ý nghĩa gì?

a) div#bat_dau > p

div#bat_dau: phần tử div có id = "bat_dau".
Dấu >: bộ chọn con trực tiếp.
p: các phần tử p.

Ý nghĩa: chọn tất cả các phần tử p là con trực tiếp của phần tử div có id là bat_dau. Lưu ý các p nằm sâu hơn (ví dụ trong một div con khác) sẽ không được chọn.

b) p.test em#p123

p.test: phần tử p có lớp test.
(dấu cách): bộ chọn con cháu (không nhất thiết trực tiếp).
em#p123: phần tử em có id là p123.

Ý nghĩa: chọn phần tử em có id p123 nằm bên trong (là con hoặc cháu) của phần tử p có lớp test.

Phần 4. Thực hành (gợi ý)

Trang 93 còn nêu nhiệm vụ thực hành: tạo trang web mô tả bảng 16 tên màu cơ bản của CSS như Hình 16.5, thực hiện theo hai bước.

Bước 1: dựng bảng với nội dung (chưa định dạng).
Bước 2: viết thêm CSS để định dạng khung.

Đây là yêu cầu thực hành, chưa có câu hỏi cần đáp án. Nếu em muốn, cô có thể viết mẫu mã HTML + CSS hoàn chỉnh cho bảng 16 tên màu này.

Chế độ đọc sách →