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:

• Khởi động trang 117 Tin học 12: Theo em, khi định kiểu cho các đề mục h1, việc viết mã lệnh CSS cho thuộc tính ....

• Hoạt động trang 118 Tin học 12: Em hãy trình bày lợi ích khi định kiểu CSS bằng cách khai báo vùng chọn ....

• Hoạt động trang 120 Tin học 12: Theo em, điểm khác biệt giữa khai báo vùng chọn là tên thẻ và khai báo ....

• 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 ....

• Luyện tập 2 trang 120 Tin học 12: Theo em, có những kĩ thuật nào để khai báo vùng chọn CSS cơ bản? ....

• 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ụ 1. Định kiểu CSS cho vùng chọn là tên thẻ ....

• 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:

• Tin học 12 Bài F10: Định kiểu CSS cho siêu liên kết và danh sách

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

• Tin học 12 Bài F12: Định kiểu CSS cho biểu mẫu

• Tin học 12 Bài F13: Dự án tạo trang web (tiếp theo)

• Tin học 12 Bài F14: Học máy

Xem thêm các tài liệu học tốt lớp 12 hay khác:

• Giải sgk Tin học 12 Chân trời sáng tạo
• Giải Chuyên đề Tin học 12 Chân trời sáng tạo
• Giải SBT Tin học 12 Chân trời sáng tạo
• Giải lớp 12 Chân trời sáng tạo (các môn học)
• Giải lớp 12 Kết nối tri thức (các môn học)
• Giải lớp 12 Cánh diều (các môn học)

---