Sử dụng tệp portfolio.html chưa được định kiểu bằng CSS Nhiệm vụ 2 Định kiểu CSS

Trang trước Trang sau

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

Sử dụng tệp portfolio.html chưa được định kiểu bằng CSS Nhiệm vụ 2 Định kiểu CSS

Lời giải:

0 Trong lập portfolio,html, đặt các ảnh vào cặp thẻ

như sau:

Các định kiểu từ bước này được đặt trong tập style.css. Định kiểu cho thẻ

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ẻ

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ẻ mà có thuộc tính class là .image-style. Nói cách khác, các thẻ 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:

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:

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

Trang trước Trang sau
Giải bài tập lớp 12 Chân trời sáng tạo khác