Sử dụng tệp portfolio.html chưa được định kiểu bằng CSS Nhiệm vụ 2 Định kiểu CSS
Giải Tin học 12 Bài F9: Một số kĩ thuật định kiểu bằng vùng chọn trong CSS - Chân trời sáng tạo
Thực hành trang 120 Tin học 12: Sử dụng tệp portfolio.html chưa được định kiểu bằng CSS.
Nhiệm vụ 2. Định kiểu CSS cho vùng chọn là tên thẻ và tên lớp
Yêu cầu: Sử dụng vùng chọn là tên lớp để định kiểu cho các hình ảnh sao cho các ảnh được căn giữa theo độ rộng của trang web, nằm trong nền màu tối bo tròn 4 góc và chỉnh sửa kích thước hiển thị phù hợp (Hình 5).
Lời giải:
0 Trong lập portfolio,html, đặt các ảnh vào cặp thẻ <div></div> như sau:
<div>
</div>
<img src="Images/Anh_1.jpg">
<img src="Images/Anh_2.jpg">
Các định kiểu từ bước này được đặt trong tập style.css. Định kiểu cho thẻ <div> bằng cách khai báo vùng chọn là lớp image-style như sau:
.image-style {
}
background-color: rgb(51, 51, 51); text-align: center;
Trong đó, thuộc tính background-color dùng để tạo nên màu tối và thuộc tính text-align dùng để căn giữa cho ảnh.
Chỉ định tên lớp image-style cho thuộc tính class của thẻ <div);
<div class="image-style">
</div>
<img src="Images/Anh_1.jpg"> <img src="Images/Anh_2.jpg">
Vì các ảnh có kích thước lớn, có thể che mất phân nến, em thu nhỏ ảnh với khai báo vùng chọn kết hợp giữa lớp và thủ như sau:
.image-style img {
padding: 20px;
max-height: 75%;
}
max-width: 75%; Chan trời sang tạo
40px;
Trong đó, vùng chọn .image-style img được dùng để định kiểu cho các thẻ <img) nằm trong thẻ <div> mà có thuộc tính class là .image-style. Nói cách khác, các thẻ <img) không thuộc thẻ <div> này sẽ không được định kiểu theo vùng chọn này.
5 Nháy đúp chuột vào tệp portfolio.html để kiểm tra kết quả.
Lời giải bài tập Tin học 12 Bài F9: Một số kĩ thuật định kiểu bằng vùng chọn trong CSS hay khác:
Luyện tập 1 trang 120 Tin học 12: Em hãy cho biết khái niệm vùng chọn CSS ....
Vận dụng trang 122 Tin học 12: Em hãy thực hiện các yêu cầu dưới đây ....
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:
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