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

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