BÀI 16 - ĐỊNH DẠNG KHUNG

Bài 16 - Định dạng khung (kntt)

Nháy vào các mục bên dưới để xem nhanh hơn
Khởi động	Hoạt động 1	Câu hỏi(t.90)	Hoạt động 2
Câu hỏi(t.92)	Hoạt động 3	Câu hỏi(t.93)	Luyện tập	Vận dụng

Khởi động (trang 89): Trên một số 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 không?

Gợi ý trả lời:

Thực hiện được.
Có thể phân biệt các thẻ p với nhau bằng CSS. Cách thức thực hiện dựa vào việc sử dụng các bộ chọn CSS để xác định các thẻ p cụ thể và áp dụng các kiểu CSS khác nhau cho từng thẻ.

1. PHÂN LOẠI PHẦN TỬ KHỐI VÀ NỘI TUYẾN

Hoạt động 1 (trang 5): 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ì?

Gợi ý trả lời:

Nhận xét:
Phần tử body bao gồm 2 phần tử h1 và p, định dạng phần tử h1: tô màu nền background-color bằng màu green, tạo border quanh phần tử body.
Để tô màu chữ “Việt Nam”, tạo phần tử em trong phần tử p và tô màu nền cho phần tử em.

CÂU HỎI

Câu hỏi 1 (trang 90): 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ảu cửa sổ trình duyệt không?

Gợi ý trả lời:

Chiều rộng của các phần tử nội tuyến phụ thuộc vào các yếu tố sau:
- Nội dung của phần tử: Chiều rộng của phần tử sẽ tự động điều chỉnh để phù hợp với nội dung bên trong nó.
- Phông chữ: Kích thước và kiểu phông chữ có thể ảnh hưởng đến chiều rộng của phần tử.
- Kiểu CSS: Bạn có thể sử dụng CSS để điều chỉnh chiều rộng của phần tử nội tuyến bằng thuộc tính width.
Chiều rộng của phần tử nội tuyến không trực tiếp phụ thuộc vào chiều rộng của cửa sổ trình duyệt. Tuy nhiên, nếu nội dung bên trong phần tử nội tuyến quá dài, nó có thể dẫn đến việc xuống dòng và tạo ra các dòng mới, làm ảnh hưởng đến bố cục chung của trang web.
Câu hỏi 2 (trang 90): 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 sổ trình duyệt” là đúng hay sai?

Gợi ý trả lời:

Sai. Chiều rộng của các phần tử khối không chỉ phụ thuộc vào kích thước cửa sổ trình duyệt. Nó còn phụ thuộc vào nội dung, kiểu CSS, các thuộc tính CSS khác, bố cục trang web.

2. THIẾT LẬP ĐỊNH DẠNG KHUNG BẰNG CSS

Hoạt động 2 (trang 90): 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.

Gợi ý trả lời:

Các thông số chính bao gồm: Kiểu đường viền, lề khung, vùng đệm, chiều cao khung, chiều rộng khung, màu viền khung, độ dày viền khung.

CÂU HỎI

Câu hỏi 1 (trang 92): 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ì?

Gợi ý trả lời:

Khoảng cách từ vùng văn bản đến đường viền khung của một phần tử HTML được gọi là "padding".
Câu hỏi 2 (trang 92): Lề khung khác gì với vùng đệm?

Gợi ý trả lời:

- Lề khung (margin): Là khoảng cách từ đường viền ngoài của khung đến văn bản xung quanh nó (nếu có).
- Vùng đệm (padding): Là khoảng cách từ vùng văn bản đến đường viền ngoài của khung.

3. MỘT SỐ BỘ CHỌN ĐẶC BIỆT CỦA CSS

Hoạt động 3 (trang 92): 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?
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?

Gợi ý trả lời:

1. Được. CSS cho phép đặt mẫu định dạng cho các thẻ với thuộc tính cho trước. Để làm điều này, chúng ta sử dụng bộ chọn thuộc tính trong CSS.
2. Được. 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 bằng cách sử dụng các bộ chọn lớp (class) hoặc mã định danh (id) riêng biệt.
Cách thực hiện: Gắn các lớp hoặc mã định danh khác nhau cho các phần tử tương tự, có thể áp dụng các mẫu định dạng khác nhau cho chúng.

CÂU HỎI

Câu hỏi 1 (trang 93): 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.

Gợi ý trả lời:

Sự khác biệt cơ bản nhất giữa id và class là: Mỗi mã định danh (id) chỉ được gán duy nhất cho một phần tử HTML. Mỗi lớp (class) được phép gán cho nhiều phần tử HTML.
Câu hỏi 2 (trang 93): Mỗi bộ chọn sau có ý nghĩa gì?
a) div#bat_dau > p
b) p.test em#p123

Gợi ý trả lời:

a) Mẫu định danh này sẽ chỉ áp dụng cho các phần tử p với điều kiện p là phần tử con của một phần tử div có mã định danh #bat_dau.
b) Mẫu định dạng này sẽ chỉ áp dụng cho phần tử em với mã định danh #p123 với điều kiện phần tử này là con/cháu của một phần tử p thuộc lớp test.

LUYỆN TẬP

Luyện tập 1 (trang 95): 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ì?

Gợi ý trả lời:

- Phần tử HTML có thể được ẩn đi trên trang web.
- Lệnh CSS dùng để ẩn phần tử HTML là: display: none;
Luyện tập 2 (trang 95): Hãy giải thích ý nghĩa định dạng sau:

Gợi ý trả lời:

Ý nghĩa:
.test .test_more
Đây là một bộ chọn đồng thời, áp dụng cho các phần tử có cả hai lớp tên là "test" và "test_more". Điều này có nghĩa là chỉ các phần tử có cả hai lớp tên này sẽ được áp dụng định dạng.
background-color: red;
Đây là thuộc tính CSS được sử dụng để đặt màu nền của các phần tử được chọn. Trong trường hợp này, màu nền của các phần tử có lớp tên "test" và "test_more" sẽ được đặt là đỏ (red).

VẬN DỤNG

Vận dụng 1 (trang 95): 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.

Gợi ý trả lời:

Có.
Đoạn mã giải quyết vấn đề:

Kết quả hiển thị:

Vận dụng 2 (trang 95): 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.

Gợi ý trả lời:

Có.
Đoạn mã trình bày cách thiết lập: