Nhiệm vụ 1 Định kiểu CSS cho bảng Yêu cầu Trong tập portfolio.html định kiểu CSS cho bảng

Giải Tin học 12 Bài F11: Định kiểu CSS cho bảng và phần tử

- Chân trời sáng tạo

Thực hành trang 133 Tin học 12: Nhiệm vụ 1. Định kiểu CSS cho bảng

Yêu cầu: Trong tập portfolio.html, định kiểu CSS cho bảng Lịch sinh hoạt hằng tuổi thêm đẹp mắt và trực quan (Hình 9).

Lời giải:

Để định kiểu riêng cho bảng Lịch sinh hoạt hằng tuần mà không làm ảnh hưởng bảng khác, em khai báo vùng chọn là lớp my-table và các vùng chọn liên quan lớp này. Các bước thực hiện như sau:

1. Trong tập portfoliohtml, chỉ định giá trị my-table cho thuộc tính class của thẻ

2. Định kiểu đường viên đơn cho bảng.

.my-table {

alfa hcmstrời sáng tạo

border: 1px solid #446995;

}

border-collapse: collapse; width: 100%;

Trong vùng chọn .my-table, thuộc tính border tạo đường viền màu xanh bao quanh bảng, thuộc tính width giúp bảng có độ rộng bằng với độ rộng trang web.

3. Sử dụng thuộc tính padding để định kiểu cho vùng đệm nhằm tăng diện tích hiển thị của các ô.

.my-table td, th{

}

padding: 10px;

text-align: center;

Khai báo vùng chọn .my-table td, th nhằm định kiểu các thẻ và nằm bên trong các thẻ có chỉ định lớp my-table, cụ thể là thẻ

Định kiểu riêng cho hàng tiêu đề của bảng với nền màu xanh, chữ màu trắng, in đậm.

.my-table th{

background-color: #446995; color: #fff;

font-weight: bold;

}

Ô Định kiểu mẫu nên khác nhau xen kẽ cho các hàng chẵn và lẻ để tăng tính trực quan. Cụ thể, định kiểu nền màu xám cho các hàng chắn.

.my-table tr:nth-child(even) {

background-color: #e5e5e5;

}

6 Tạo hiệu ứng dõi màu nên của hàng thành màu xanh khi người dùng di chuyển con tra chuột đến.

.my-table tr:hover {

background-color: #ceeaff;

}

Nháy đúp chuột vào lập portfoliohtml để kiểm tra kết quả.

Lời giải bài tập Tin học 12 Bài F11: Định kiểu CSS cho bảng và phần tử

Thực hành: Định kiểu CSS cho phần tử div

Giải Tin học 12 Bài F11: Định kiểu CSS cho bảng và phần tử

- Chân trời sáng tạo

Thực hành trang 133 Tin học 12: Nhiệm vụ 2. Định kiểu CSS cho phần tử

Yêu cầu: Tạo bố cục minh hoạ như Hình 10 bằng cách sử dụng các thẻ

.

Lời giải:

1. Tạo tệp bocucminhhoahtml và viết mã lệnh cho các thẻ , và -body) để khai báo cấu trúc ban đầu cho trang web, trong đó chỉ định tệp layout.css trong thẻ .

2. Tạo các vùng bằng thẻ

.

Thanh ngang

Vùng trải

3. Tạo tệp layout.css để chửa các khai bảo vùng chọn.

4. Khai báo vùng chọn là lớp bar để định kiểu cho thanh ngang. Thanh ngang này có thể được dùng để hiển thị tiêu để trang web hoặc thanh điều hướng

.bar {

}

background-color: #00aacc; padding: 20px;

margin-bottom: 10px;

5. Khai báo vùng chọn là lớp left và right để lần lượt định kiểu cho Vùng trái và Vùng phải. Trong đó, vùng trái có nến màu xám đậm, chiếm 20% độ rộng của trang web; Vùng phải có nền màu xám nhạt. Cả hai vùng đều có độ cao tối thiểu là 100 pixels.

.left {

background-color: darkgrey;

width: 20%;

min-height: 100px;

float: left;

}

.right {

}

background-color: lightgrey; min-height: 100px;

6. Khai báo vùng chọn là lớp clear-both để tạo ngăn cách với phần tử

của Vùng chân trang.

.clear-both {

}

clear: both;

7. Khai báo vùng chọn là lớp footer để định kiểu cho Vùng chân trang với màu nền là màu cam và cách các phần tử nằm trên 10 pixels.

.footer {

}

padding: 40px;

background: #ff934d;

margin-top: 10px;

8. Nháy đúp chuột vào tệp bocucminhhoa.html để kiểm tra kết quả.

Lời giải bài tập Tin học 12 Bài F11: Định kiểu CSS cho bảng và phần tử

hay khác:

Em hãy thực hiện các yêu cầu dưới đây Chỉnh sửa trang chủ của kỉ yếu

Giải Tin học 12 Bài F11: Định kiểu CSS cho bảng và phần tử

- Chân trời sáng tạo

Vận dụng trang 136 Tin học 12: Em hãy thực hiện các yêu cầu dưới đây.

1. Chỉnh sửa trang chủ của kỉ yếu (tệp index.html và tập layout.css) sao cho bố cục gồm 3 vùng:

Vùng 1: Dùng để chứa thanh điều hướng nằm ngang (đã tạo ở bài học trước).

Vùng 2: Dùng để hiển thị nội dung, cụ thể trang chủ có nội dung giới thiệu về lớp.

Vùng 3: Dùng để làm vùng chân trang.

Hình 11 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.

2. Chỉnh sửa trang web thanhvienlop.html (đã thực hiện ở những bài học trước) sao cho bố cục cũng gồm 3 phần như trang chủ của trang web index.html. Trong đó, đặt bảng thành viên lớp vào vùng 2 và sử dụng CSS để định kiểu cho bảng này.

Hình 12 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.

Lời giải:

1. Thực hiện chỉnh sửa trang chủ của kỉ yếu (tệp index.html và tập layout.css) sao cho bố cục gồm 3 vùng:

Vùng 1: Dùng để chứa thanh điều hướng nằm ngang (đã tạo ở bài học trước).

Vùng 2: Dùng để hiển thị nội dung, cụ thể trang chủ có nội dung giới thiệu về lớp.

Vùng 3: Dùng để làm vùng chân trang.

Thanh ngang

class="left">Vùng trái

class="clear-both">

Vùng chân trang

Kết quả:

2. Thực hiện chỉnh sửa trang web thanhvienlop.html (đã thực hiện ở những bài học trước) sao cho bố cục cũng gồm 3 phần như trang chủ của trang web index.html. Trong đó, đặt bảng thành viên lớp vào vùng 2 và sử dụng CSS để định kiểu cho bảng này.

Thanh ngang

class="left">Vùng trái

class="clear-both">

Vùng chân trang

Kết quả:

Lời giải bài tập Tin học 12 Bài F11: Định kiểu CSS cho bảng và phần tử

hay khác:

Tin học 12 Kết nối tri thức Bài 29: Mô phỏng trong giải quyết vấn đề

Tin học 12 Cánh diều Bài 2: Các giao thức mạng

Tin học 12 Cánh diều Bài 1: Giới thiệu về trí tuệ nhân tạo

Tin học 12 Cánh diều Bài 2: Thiết bị mạng

Tin học 12 Kết nối tri thức Bài 9: Tạo danh sách, bảng | Giải Tin 12

Lý thuyết Tin 12 Chân trời sáng tạo (hay, ngắn gọn) | Kiến thức trọng tâm Tin học 12

Tin học 12 Chân trời sáng tạo Bài B6: Thiết kế mạng nội bộ

Tin học 12 Chân trời sáng tạo Bài E5: Nhúng mã và tạo băng chuyền hình ảnh

Tin học 12 Cánh diều Bài 5: Chèn hình ảnh, âm thanh, video và sử dụng khung

Tin học 12 Cánh diều Bài 2: Giới thiệu về trí tuệ nhân tạo (tiếp theo)