Bước 2: Thêm tiêu đề

Tiếp theo, chèn một tiêu đề bằng cách sử dụng bất kỳ “

' đến '

” thẻ. Ví dụ, '

” thêm một tiêu đề.

Bước 3: Thêm dữ liệu vào danh sách

Để chèn dữ liệu ở dạng danh sách, hãy sử dụng “ <đó> ' nhãn:

---

---

< div tầng lớp = 'thú cưng' >

< h1 > Danh sách vật nuôi < / h1 >

< cái đó > gà mái < / cái đó >

< cái đó > Con vịt < / cái đó >

< cái đó > Chú chó < / cái đó >

< cái đó > Con mèo < / cái đó >

< cái đó > Con thỏ < / cái đó >

< / div >

Đầu ra của đoạn mã trên như sau:

Bây giờ, hãy chuyển sang phần CSS để tạo kiểu cho danh sách.

Bước 4: Tạo kiểu cho phần tử “.pet-animal”

Truy cập '

” phần tử với sự trợ giúp của lớp được chỉ định “ .pet-động vật ” và áp dụng các thuộc tính được liệt kê:

.pet-động vật {

biên giới : 2px say mê rgb ( 230 , mười lăm , mười lăm ) ;

lề : 50px ;

màu nền : rgb ( 252 , 239 , 169 ) ;

}

Nơi đây:

• “ biên giới ” Thuộc tính được sử dụng để chỉ định ranh giới xung quanh phần tử.
• “ lề ” xác định không gian xung quanh ranh giới phần tử.
• “ màu nền ” phân bổ một màu ở mặt sau của phần tử.

Hình ảnh kết quả hiển thị đầu ra của đoạn mã trên:

Bước 5: Danh sách đã thêm kiểu “li”

Bây giờ, hãy truy cập vào danh sách của “ div ” vùng chứa có lớp “ vật nuôi ” sử dụng “ .pet-animal > li ” và áp dụng các thuộc tính được đề cập dưới đây:

.pet-động vật > cái đó {

hiển thị : ẩn giấu ;

độ mờ đục : 0,2 ;

chuyển tiếp : hiển thị 0 giây , độ mờ đục 0,5 giây tuyến tính ;

}

Nơi đây:

• Các ' hiển thị ” CSS được sử dụng để đặt mức độ hiển thị của phần tử mà không làm thay đổi bố cục của tài liệu, chẳng hạn như ẩn hoặc hiển thị.
• “ độ mờ đục ” chỉ định độ trong suốt của một phần tử.
• “ chuyển tiếp ” cho phép người dùng thay đổi giá trị thuộc tính một cách mượt mà trong một khoảng thời gian nhất định:

Bước 6: Áp dụng Pseudo Class “hover”

Bây giờ, hãy áp dụng “ bay lượn ” tài sản trong danh sách:

.pet-động vật : bay lượn > cái đó {

hiển thị : hiện rõ ;

độ mờ đục : một ;

}

Các ' :bay lượn ” CSS là một lớp giả thực hiện các thay đổi trong thời gian chạy khi con trỏ chuột được di chuyển qua phần tử. Hiển thị danh sách bằng cách sử dụng “ hiển thị ” và đặt độ trong suốt bằng cách sử dụng “ độ mờ đục ” Thuộc tính CSS vào danh sách khi di chuột:

Có thể nhận thấy rằng chúng tôi đã áp dụng thành công quá trình chuyển đổi trên “ trưng bày ' tài sản.

Phần kết luận

Không thể áp dụng trực tiếp quá trình chuyển đổi CSS cho “ trưng bày ' tài sản. Tuy nhiên, nó có thể được áp dụng theo một cách khác. Để làm như vậy, hãy thêm thẻ danh sách vào tài liệu HTML, truy cập danh sách theo tên thẻ và áp dụng “ chuyển tiếp ”, “ độ mờ đục ', và ' hiển thị ” Thuộc tính CSS trong danh sách. Sau đó, sử dụng “ : bay lượn ” lớp giả và đặt giá trị khả năng hiển thị là “ hiện rõ ”. Bài đăng này đã giải thích cách chuyển đổi được áp dụng cho thuộc tính hiển thị CSS.