Nội dung chính 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ử

CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH 

BÀI F11: ĐỊNH KIỂU CSS CHO BẢNG VÀ PHẦN TỬ <DIV>

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ề 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ẻ. 

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

THỰC HÀNH

Nhiệm vụ 1. Định kiểu CSS cho bảng

- Đoạn mã HTML:

Nhiệm vụ 2. Định kiểu CSS cho phần tử <div>

- Tệp bocucminhhoa.html:

- Tệp layout.css: