Nhiệm vụ 1. Định kiểu CSS cho bảng. Yêu cầu: Trong tập portfolio.html, định kiểu CSS
Giải Tin học 12 Bài F11: Định kiểu CSS cho bảng và phần tử <div> - Chân trời sáng tạo
Thực hành trang 166 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
the <table>.
<table class="my-table">
</table>
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ẻ <td> và <th> nằm bên trong các thẻ có chỉ định lớp my-table, cụ thể là thẻ <table> trong 1.
Đị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ử <div> hay khác:
Khởi động trang 162 Tin học 12: Theo em nên dùng thẻ gì để trình bày một bảng danh sách ....
Hoạt động trang 163 Tin học 12: Viết mã lệnh CSS để định kiểu nền màu vàng nhạt cho các hàng lẻ ....
Hoạt động trang 165 Tin học 12: Viết mã lệnh CSS để tạo ra 3 vùng A, B, C lần lượt ....
Luyện tập 1 trang 165 Tin học 12: Em hãy trình bày những khai báo vùng chọn và thuộc tính ....
Luyện tập 3 trang 165 Tin học 12: Ưu điểm của việc tạo bố cục trang web bằng các thẻ ....
Thực hành trang 167 Tin học 12: Nhiệm vụ 2. Định kiểu CSS cho phần tử <div> ....
Xem thêm lời giải bài tập Tin học lớp 12 Chân trời sáng tạo hay nhất, ngắn gọn khác:
Tin học 12 Bài G1: Nhóm nghề dịch vụ thuộc ngành Công nghệ thông tin
Tin học 12 Bài G2: Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Tin học 12 Bài G3: Một số nghề ứng dụng tin học và một số ngành thuộc lĩnh vực Công nghệ thông tin
Sách VietJack thi THPT quốc gia 2024 cho học sinh 2k6:
Săn shopee siêu SALE :
- Sổ lò xo Art of Nature Thiên Long màu xinh xỉu
- Biti's ra mẫu mới xinh lắm
- Tsubaki 199k/3 chai
- L'Oreal mua 1 tặng 3
- Soạn Văn 12
- Soạn Văn 12 (bản ngắn nhất)
- Văn mẫu lớp 12
- Giải bài tập Toán 12
- Giải BT Toán 12 nâng cao (250 bài)
- Bài tập trắc nghiệm Giải tích 12 (100 đề)
- Bài tập trắc nghiệm Hình học 12 (100 đề)
- Giải bài tập Vật lý 12
- Giải BT Vật Lí 12 nâng cao (360 bài)
- Chuyên đề: Lý thuyết - Bài tập Vật Lý 12 (có đáp án)
- Bài tập trắc nghiệm Vật Lí 12 (70 đề)
- Luyện thi đại học trắc nghiệm môn Lí (18 đề)
- Giải bài tập Hóa học 12
- Giải bài tập Hóa học 12 nâng cao
- Bài tập trắc nghiệm Hóa 12 (80 đề)
- Luyện thi đại học trắc nghiệm môn Hóa (18 đề)
- Giải bài tập Sinh học 12
- Giải bài tập Sinh 12 (ngắn nhất)
- Chuyên đề Sinh học 12
- Đề kiểm tra Sinh 12 (có đáp án)(hay nhất)
- Ôn thi đại học môn Sinh (theo chuyên đề)
- Luyện thi đại học trắc nghiệm môn Sinh (18 đề)
- Giải bài tập Địa Lí 12
- Giải bài tập Địa Lí 12 (ngắn nhất)
- Giải Tập bản đồ và bài tập thực hành Địa Lí 12
- Bài tập trắc nghiệm Địa Lí 12 (70 đề)
- Luyện thi đại học trắc nghiệm môn Địa (20 đề)
- Giải bài tập Tiếng anh 12
- Giải bài tập Tiếng anh 12 thí điểm
- Giải bài tập Lịch sử 12
- Giải tập bản đồ Lịch sử 12
- Bài tập trắc nghiệm Lịch Sử 12
- Luyện thi đại học trắc nghiệm môn Sử (20 đề)
- Giải bài tập Tin học 12
- Giải bài tập GDCD 12
- Giải bài tập GDCD 12 (ngắn nhất)
- Bài tập trắc nghiệm GDCD 12 (37 đề)
- Luyện thi đại học trắc nghiệm môn GDCD (20 đề)
- Giải bài tập Công nghệ 12