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ẻ

Yêu cầu: Sử dụng vùng chọn để định kiểu cho các đề mục hi của tệp portfolio.html (Hình 4) theo các yêu cầu sau:

Phần văn bản có màu trắng, cỡ chữ 20, phông chữ Arial.

Phần nền của để mục h1 màu xanh, có độ rộng chiếm một nửa độ rộng của trang web, bo tròn góc trên và góc dưới ở bên phải.

Phần văn bản được căn phải đối với phần nền, có vùng đệm là 10 pixels.

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 ích khi định kiểu CSS bằng cách khai báo vùng chọn:

Định kiểu CSS bằng vùng chọn đem lại nhiều lợi ích trong việc phát triển trang web như giúp kiểm soát các phần tử muốn định kiểu một cách chính xác và linh hoạt, kể cả việc ưu tiên định kiểu cho những vùng chọn đặc trưng hoặc ít đặc trưng hơn, đúng với tên gọi CSS - Cascading Style Sheets. Bên cạnh đó, vùng chọn còn cho phép mã lệnh CSS được tái sử dụng, hạn chế việc viết lặp lại cùng mã lệnh cho nhiều phần tử khác nhau. Điều này càng làm rõ vai trò của CSS, đảm bảo sự nhất quán về hình thức của toàn bộ trang web, giảm bớt được mã lệnh, giúp dễ dàng bảo trì và nâng cấp trang web.