Giáo án Khoa học máy tính 12 chân trời Bài F11: Định kiểu CSS cho bảng và phần tử

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS hoạt động cá nhân và trả lời các  câu hỏi:

+ Theo em, những yếu tố nào cần được quan tâm khi định kiểu CSS cho bảng?

+ Trong trường hợp bảng có nhiều hàng hoặc nhiều cột, làm thế nào để giúp người dùng nhanh chóng và dễ dàng nhận biết nội dung của bảng?

- GV đưa ra ví dụ minh hoạ đường viền mặc định của bảng từ đó đặt câu hỏi:

+ Để hiển thị đường viền đơn cho các ô trong bảng, em cần sử dụng thuộc tính CSS với giá trị như thế nào?

- GV phân tích Ví dụ 1 để HS hiểu và biết cách định kiểu đường viền cho bảng.

- GV tiếp tục đặt câu hỏi định hướng:

+ Để thêm phần đẹp mắt và nổi bật cho bảng, em nên định kiểu màu nền như thế nào?

- GV giới thiệu một số cách làm tăng tính trực quan cho bảng, đồng thời phân tích Ví dụ 2 và Ví dụ 3 để HS hiểu và biết cách định kiểu màu nền cho bảng.

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.130 SGK:

Viết mã lệnh CSS để định kiểu nền màu vàng nhạt cho các hàng lẻ trong bảng.

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 1 SGK tr.129 – 130 và trả lời các câu hỏi mà GV đưa ra. 

- GV quan sát, theo dõi và hỗ trợ HS khi cần thiết.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- HS trả lời các câu hỏi và nhận xét lẫn nhau. 

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.130 SGK:

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV chốt kiến thức như nội dung ở hoạt động Ghi nhớ:

1. Định kiểu cho bảng

Đường viền và màu nền của bảng là những yếu tố cần quan tâm khi định kiểu CSS cho bảng. 

* Đường viền

- Bên cạnh tính thẩm mĩ, trong trường hợp bảng có nhiều hàng hoặc nhiều cột, việc tô màu nền cho hàng theo hình thức xen kẽ nhau là một cách giúp người dùng nhanh chóng và dễ dàng nhận biết nội dung của bảng. 

Ví dụ:

+ Bảng 1 dưới đây gồm 5 hàng và 3 cột chưa được định kiểu CSS cho bảng. 

Hình 1. Bảng 1 được tạo từ mã lệnh HTML và chưa được định kiểu CSS

+ Sau khi định kiểu cho bảng:  

• Các hàng được tô màu nền xen kẽ với nhau, trong đó hàng chẵn màu xám và hàng lẻ màu trắng. 

• Hàng tiêu đề được tô màu xanh nhằm phân biệt với các hàng nội dung.

• Các ô từ hàng 2 trở đi có đường viền đơn màu xanh.

Hình 2. Bảng 1 sau khi được định kiểu CSS

- Theo mặc định, mỗi ô trong bảng có đường viền riêng biệt, dẫn đến việc khi hiển thị giữa hai ô kề nhau có đường viền đôi. 

- Để hiển thị đường viền đơn, em chỉ định giá trị collapse cho thuộc tính border-collapse.

Ví dụ 1: Đoạn mã CSS dùng để định kiểu đường viền đơn cho bảng.

Hình 3. Bảng 1 sau khi định kiểu 
đường viền đơn

* Về màu nền

- Để thêm phần đẹp mắt và nổi bật, em định kiểu màu sắc riêng cho hàng tiêu đề của bảng. 

- Trường hợp bảng có nhiều hàng, em có thể tăng tính trực quan bằng cách định kiểu màu nền khác nhau xen kẽ cho các hàng chẵn và lẻ. 

Ví dụ 2: Đoạn mã CSS dùng để định kiểu màu nền cho các hàng chẵn và hàng tiêu đề. Kết quả như Hình 2.

Lớp giả nth-child(even) dùng để định kiểu cho các hàng chẵn của bảng: 

+ Với khai báo vùng chọn này, các hàng chẵn sẽ có nền màu xám (#e5e5e5), còn các hàng lẻ có nền màu trắng mặc định. 

+ Tham số even có thể được thay bằng odd để định kiểu cho các hàng lẻ.

- Một cách khác làm tăng tính trực quan cho bảng là tạo hiệu ứng thay đổi màu nền của một hàng bất kì khi người dùng di chuyển con trỏ chuột đến hàng đó. Để thực hiện điều này, em khai báo vùng chọn với trạng thái hover và chỉ định một giá trị màu sắc khác cho thuộc tính background-color.

Ví dụ 3: Đoạn mã CSS dùng để định kiểu cho trạng thái hover của các hàng trong bảng. Kết quả như Hình 4.

Hình 4. Nền của hàng 3 chuyển sang màu xanh khi có con trỏ chuột đến

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS hoạt động cá nhân và trả lời câu hỏi: 

+ Theo em, việc tạo bố cục cho trang web theo dạng bảng có thể gặp phải những hạn chế như thế nào? Làm thế nào để khắc phục những hạn chế đó?

- GV hướng dẫn HS cách định kiểu cho phần tử <div>.

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.132 SGK:

Viết mã lệnh CSS để tạo ra 3 vùng A, B, C lần lượt nằm kề nhau theo phương ngang.

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 2 SGK tr.130 – 132 và trả lời câu hỏi mà GV đưa ra. 

- GV quan sát, theo dõi và hỗ trợ HS khi cần thiết.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- HS trả lời câu hỏi và nhận xét lẫn nhau.

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.132 SGK:

+ HTML:

+ CSS:

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV chốt kiến thức như nội dung ở hoạt động Ghi nhớ:

2. Định kiểu cho phần tử <div>

- Việc tạo bố cục cho trang web theo dạng bảng có thể gặp phải một số hạn chế như không thể kết xuất linh hoạt theo các kích cỡ màn hình khác nhau hoặc thay đổi bố cục tốn nhiều công sức.

- Nhằm khắc phục những hạn chế của bảng, em có thể sử dụng các phần tử <div> để tạo bố cục cho trang web. Khi thay đổi bố cục, em chỉ cần hiệu chỉnh mã lệnh CSS mà không làm ảnh hưởng các nội dung bên trong <div>.

- Theo mặc định khi chưa định kiểu, các phần tử <div> sẽ được kết xuất theo thứ tự lần lượt từ trên xuống. 

Ví dụ: Với đoạn mã HTML dưới đây, nội dung của Vùng A sẽ kết xuất ở trên, nội dung của Vùng B sẽ kết xuất ở dưới.

- Để định kiểu cho Vùng A nằm về bên trái, em chỉ định giá trị left cho thuộc tính float. Đồng thời, để Vùng B nằm về bên phải, em chỉ định giá trị right cho thuộc tính float.

Hình 5. Vùng A và Vùng B sau khi định kiểu nằm về bên trái và bên phải của trang web

Ví dụ 4: Khai báo lớp  left và lớp right để định kiểu cho phần tử nằm về bên trái hoặc bên phải của trang web.

Nếu không khai báo float: right; thì Vùng B sẽ tự động kết xuất ngay bên phải của Vùng A.

Hình 6. Vùng B kết xuất ngay bên phải 
Vùng A khi không khai báo lớp right

- Trường hợp chiều cao của Vùng A và Vùng B không bằng nhau và bên dưới chúng vẫn còn những phần tử khác của trang web thì một số lỗi bố cục có thể xảy ra (Hình 7). Để giải quyết lỗi này, em chỉ định giá trị both cho thuộc tính clear để tạo ra vùng ngăn cách với phần tử liền kề bên dưới.

Ví dụ 5: Khai báo lớp  clear-both để khắc phục lỗi các phần tử <div> chồng lên:

Cụ thể, đoạn mã CSS dùng để khai báo các lớp liên quan như sau:

Trong tệp HTML, em chèn một phần tử <div> có chỉ định lớp clear-both vào sau Vùng A và Vùng B được kết quả như Hình 8.

Hình 7. Bố cục khi chưa có clear-both

Hình 8. Bố cục sau khi có clear-both