Câu hỏi mở đầu trang 89

Đề bài: Trên một trang web thường có rất nhiều phần tử cùng loại (cùng tên thẻ). Ví dụ thẻ p sẽ tương ứng với rất nhiều phần tử của trang web. Một định dạng với bộ chọn p sẽ áp dụng cho tất cả các thẻ p. Nếu muốn phân biệt các thẻ p với nhau và muốn tạo ra các CSS để phân biệt các thẻ p thì có thể thực hiện được không?

Lời giải:

Có thể thực hiện được. Muốn phân biệt các thẻ cùng loại (ví dụ p), có thể dùng một trong các cách sau:

• Bộ chọn class (lớp): gán thuộc tính class="tên_lớp" cho phần tử, dùng bộ chọn .tên_lớp trong CSS → dùng cho nhóm phần tử cần định dạng giống nhau.
• Bộ chọn id (định danh): gán thuộc tính id="tên_id" cho phần tử, dùng bộ chọn #tên_id trong CSS → dùng cho một phần tử duy nhất.
• Bộ chọn thuộc tính: dùng cú pháp [thuộc_tính] để chọn các phần tử có thuộc tính đó.

1. Phân loại phần tử khối và nội tuyến

Hoạt động 1 trang 89

Đề bài: Quan sát cách tô màu nền của hai phần tử trên trang web trong Hình 16.1, em có nhận xét gì?

Lời giải:

Quan sát Hình 16.1:

• Dòng “Thư Bác Hồ gửi học sinh” có nền màu xanh chạy dài suốt chiều rộng khung, chiếm cả một hàng riêng → đây là phần tử khối (block).
• Cụm từ “Việt Nam” có nền màu cam chỉ bao quanh chữ, nằm bên trong đoạn văn cùng với các chữ khác → đây là phần tử nội tuyến (inline).

→ Nhận xét: các phần tử HTML được chia làm hai loại: khối (block) chiếm cả hàng ngang, và nội tuyến (inline) nhúng bên trong một phần tử khác và chỉ chiếm phần diện tích vừa đúng nội dung.

Câu hỏi củng cố mục 1 trang 90

Đề bài:

1. Chiều rộng của các phần tử nội tuyến phụ thuộc vào những yếu tố nào? Có phụ thuộc vào chiều rộng của cửa sổ trình duyệt không?

Lời giải:

• Chiều rộng của phần tử nội tuyến phụ thuộc vào kích thước nội dung bên trong (độ dài của chữ, kích thước hình ảnh…).
• Không phụ thuộc vào chiều rộng của cửa sổ trình duyệt.

2. Khẳng định “Chiều rộng của các phần tử khối chỉ phụ thuộc vào kích thước của cửa sổ trình duyệt” là đúng hay sai?

Lời giải:

Sai. Vì:

• Mặc định phần tử khối chiếm hết chiều rộng của phần tử cha (thường là cửa sổ trình duyệt).
• Nhưng có thể thiết lập lại chiều rộng bằng thuộc tính width trong CSS.

→ Chiều rộng phần tử khối phụ thuộc cả vào cửa sổ trình duyệt và thuộc tính width đã thiết lập.

2. Thiết lập định dạng khung bằng CSS

Hoạt động 2 trang 90

Đề bài: Quan sát Hình 16.3 để biết các thông số chính của khung của phần tử HTML để có thể hiểu được cách thiết lập khung, viền bằng CSS.

Lời giải:

Khung của một phần tử HTML gồm các thành phần chính (từ trong ra ngoài):

• Phần nội dung – vùng chứa văn bản, hình ảnh của phần tử.
• Vùng đệm (padding) – khoảng cách giữa phần nội dung và đường viền.
• Khung/viền (border) – đường viền bao quanh nội dung.
• Lề khung (margin) – khoảng cách từ đường viền ngoài đến các phần tử xung quanh.

Các thuộc tính CSS chính để định dạng khung:

Lưu ý: Các thuộc tính khung không có tính kế thừa.

Câu hỏi củng cố mục 2 trang 92

Đề bài:

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ì?

Lời giải:

Khoảng cách từ vùng văn bản (nội dung) đến đường viền khung được gọi là vùng đệm (padding).

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

Lời giải:

→ Padding “đẩy nội dung vào trong khung”, còn margin “đẩy khung ra xa các phần tử khác”.

3. Một số bộ chọn đặc biệt của CSS

Hoạt động 3 trang 92

Đề bài: Thảo luận, tìm hiểu thêm cách thiết lập bộ chọn đặc biệt của CSS và trả lời các câu hỏi sau:

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?

Lời giải:

Có. CSS cho phép dùng bộ chọn thuộc tính để định dạng các phần tử có một thuộc tính cụ thể.

Ví dụ:

[href] {border: 1px solid blue;}
/* Áp dụng cho mọi phần tử có thuộc tính href */

a[target="_blank"] {color: red; font-weight: bold;}
/* Áp dụng chữ đỏ và in đậm cho các thẻ a có target="_blank" */

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?

Lời giải:

Có thể. Có hai cách chính:

• Dùng thuộc tính class (lớp): gán các phần tử vào các lớp khác nhau (class="test", class="warning",…) rồi định dạng bằng bộ chọn .tên_lớp.
• Dùng thuộc tính id (định danh): gán mỗi phần tử một id duy nhất rồi định dạng bằng bộ chọn #tên_id.

Ví dụ:

<p class="test">Thông tin đang test</p>
<p class="warning">Thông tin cần warning</p>

.test {color: blue; font-weight: bold;}
.warning {color: red;}

Câu hỏi củng cố mục 3 trang 93

Đề bài:

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.

Lời giải:

2. Mỗi bộ chọn sau có ý nghĩa gì?

a) div#bat_dau > p.

Lời giải:

Bộ chọn này gồm hai phần:

• div#bat_dau – chọn phần tử <div> có id là “bat_dau”.
• > p – chọn <p> là con trực tiếp của phần tử trên.

→ Ý nghĩa: áp dụng cho các phần tử <p> là con trực tiếp của <div> có id là “bat_dau”.

b) p.test em#p123.

Lời giải:

Bộ chọn này gồm hai phần:

• p.test – chọn phần tử <p> có class là “test”.
• em#p123 – chọn phần tử <em> có id là “p123”, là con/cháu của phần tử trên.

→ Ý nghĩa: áp dụng cho phần tử <em> có id “p123” nằm bên trong (con hoặc cháu) của <p> có class “test”.

Luyện tập

Luyện tập trang 95

Đề bài:

1. Phần tử HTML có thể ẩn đi trên trang web được không? Nếu có thì dùng lệnh CSS gì?

Lời giải:

Có thể. Sử dụng thuộc tính display với giá trị none:

selector {display: none;}

Ví dụ: ẩn tất cả các phần tử <p> trên trang web:

p {display: none;}

→ Phần tử sẽ không hiển thị trên trang web.

2. Hãy giải thích ý nghĩa định dạng sau: .test .test_more {background-color: red;}

Lời giải:

Bộ chọn .test .test_more gồm hai phần cách nhau bởi dấu cách (quan hệ con/cháu):

• .test – phần tử có class “test”.
• .test_more – phần tử có class “test_more”, là con/cháu của phần tử trên.

→ Ý nghĩa: Áp dụng màu nền đỏ cho các phần tử có class test_more mà nằm bên trong (con hoặc cháu) phần tử có class test.

Vận dụng

Vận dụng trang 95

Đề bài:

1. Giả sử nội dung trang web của em có rất nhiều thẻ p, trong đó có ba đoạn mà em thấy quan trọng nhất, kí hiệu các đoạn này là P1, P2, P3. Có cách nào thiết lập định dạng CSS để có thể định dạng P1 khác biệt, P2 và P3 có cùng kiểu và cũng khác biệt không? Tất cả các đoạn còn lại có định dạng giống nhau. Hãy nêu cách giải quyết vấn đề của em.

Lời giải:

Cách giải quyết: kết hợp bộ chọn id (cho phần tử duy nhất) và class (cho nhóm).

• P1 khác biệt duy nhất → dùng id="p1".
• P2 và P3 cùng kiểu khác biệt → dùng chung class="quan_trong".
• Các đoạn <p> còn lại → áp dụng CSS chung cho thẻ p.

Mã HTML:

<p id="p1">Đoạn P1 – quan trọng nhất</p>
<p class="quan_trong">Đoạn P2</p>
<p class="quan_trong">Đoạn P3</p>
<p>Đoạn thường 1</p>
<p>Đoạn thường 2</p>

Mã CSS:

p {color: black;}                       /* Các đoạn thường */
#p1 {color: red; font-weight: bold;}    /* P1 khác biệt duy nhất */
.quan_trong {color: blue; font-style: italic;}  /* P2 và P3 giống nhau */

2. Có thể thiết lập định dạng cho các khung với thông số khung, viền trên, dưới, trái, phải khác nhau được không? Em hãy tìm hiểu và trình bày cách thiết lập định dạng CSS cho các khung, viền như vậy.

Lời giải:

Có thể. CSS cung cấp các thuộc tính riêng cho từng phía trên, dưới, trái, phải của khung:

Đối với đường viền (border):

• border-top – viền trên
• border-bottom – viền dưới
• border-left – viền trái
• border-right – viền phải

Đối với lề khung (margin):

• margin-top, margin-bottom, margin-left, margin-right

Đối với vùng đệm (padding):

• padding-top, padding-bottom, padding-left, padding-right

Ví dụ:

p {
  border-top: 2px solid red;
  border-bottom: 4px dashed blue;
  border-left: 1px solid green;
  border-right: 3px double magenta;
  margin-top: 10px;
  margin-bottom: 20px;
  padding-left: 15px;
  padding-right: 5px;
}

→ Kết quả: các cạnh của khung <p> sẽ có kiểu, độ dày và màu hoàn toàn khác nhau; lề và vùng đệm mỗi phía cũng khác nhau.

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