Bài đăng này giải thích về cách viết chú thích dưới hình ảnh.
Làm thế nào để viết chú thích dưới một hình ảnh?
Để viết chú thích dưới một hình ảnh, chúng tôi sẽ cung cấp các phương pháp khác nhau được đề cập bên dưới:
- Phương pháp 1: Cách Thêm Chú thích Hình ảnh Sử dụng HTML “
' Yếu tố? - Phương pháp 2: Cách Thêm Chú thích Hình ảnh Sử dụng “ ' Yếu tố?
Phương pháp 1: Cách thêm chú thích hình ảnh bằng phần tử HTML “
”? Để thêm chú thích hình ảnh, hãy thực hiện theo các hướng dẫn sau:
- Đầu tiên, thêm “
”, được sử dụng để thể hiện nội dung độc lập, có thể có chú thích tùy chọn. - Tiếp theo, chèn một “
” thẻ bên trong đoạn “ ' nhãn. Thêm hình ảnh bằng cách sử dụng “ src ' thuộc tính. Các ' mọi điều ” thuộc tính hiển thị nội dung đã thêm nếu hình ảnh không hiển thị do một số lý do.
- Đặt chiều rộng hình ảnh là “ 200px ”.
- Sau đó, “
” Thẻ được sử dụng để thêm chú thích cho hình ảnh. Ngoài ra, hãy thêm chú thích vào giữa các thẻ “ ”:
= 'TSL.png' mọi điều = 'Người tạo nội dung TSL' bề rộng = '200' >
< chú thích hình > Người tạo nội dung TSL >
>Bạn có thể thấy rằng hình ảnh với chú thích được chỉ định đã được hiển thị:
Bây giờ, hãy chuyển sang phương pháp thứ hai để thêm chú thích bằng CSS.
Phương pháp 2: Cách thêm chú thích hình ảnh bằng phần tử “
”?Để thêm chú thích hình ảnh bằng cách sử dụng “
”, hãy thử các hướng dẫn đã cho:
- Tạo một ' ” vùng chứa và thêm thuộc tính lớp có tên “ người giữ hình ảnh ”.
- Thêm thẻ tiêu đề “ ” để chèn tiêu đề và tạo kiểu cho tiêu đề theo lựa chọn của bạn.
- Thêm một phần tử “
” khác và chèn một “” gắn thẻ cùng với “ src ”, “ mọi điều ' và ' bề rộng ” thuộc tính ở giữa vùng chứa div.
- Thêm một “
” thứ ba với tên lớp “ img-chú thích ”. Sau đó, cung cấp chú thích ở giữa các thẻ “”. Hơn nữa, “
” phần tử được sử dụng để thêm một ngắt dòng: < lớp div = 'người giữ hình ảnh' >
= 'màu:rgb(95, 31, 245)' > Hình ảnh HTML >
= 'TSL.png' mọi điều = 'Người tạo nội dung TSL' bề rộng = '200' >
< lớp div = 'img-chú thích' >
>
>Có thể thấy rằng chú thích cho hình ảnh đã được thêm thành công:
Bây giờ, hãy chuyển sang phần CSS để áp dụng các thuộc tính.
Tạo kiểu “.image-holder” trong CSS
Đầu tiên, truy cập vào “
” phần tử có một lớp “ .image-holder ”. Sau đó, áp dụng các thuộc tính CSS sau: .image-holder {
Chức vụ : liên quan đến ;
chiều cao : 100px ;
bề rộng : 200px ;
lề : Tự động ;
}Các chi tiết của các thuộc tính đề cập ở trên được mô tả dưới đây:
- Các ' Chức vụ ” được đặt là “ liên quan đến ” để chỉ định vị trí ban đầu của phần tử vẫn còn trong luồng tài liệu, giống như giá trị tĩnh.
- Sau đó, ' chiều cao ” được sử dụng để xác định chiều cao phần tử.
- Các ' bề rộng ” Thuộc tính chỉ định kích thước của phần tử theo chiều rộng.
- Các ' lề ” được đặt là “ Tự động ” để tự động đặt không gian xung quanh phần tử.
Chú thích kiểu trong CSS
Trong bước này, chúng ta sẽ truy cập vào hai lớp có tên “ người giữ hình ảnh ' và ' img-chú thích ” và áp dụng các thuộc tính CSS sau:
.image-holder .img-chú thích {
Chức vụ : tuyệt đối ;
căn chỉnh văn bản : trung tâm ;
trọng lượng phông chữ : Dũng cảm ;
bề rộng : 200px ;
chiều cao : 50px ;
bên trái : 0px ;
màu : #f80909 ;
lai lịch : rgb ( 140 , 166 , 253 ) ;
}Mô tả về các thuộc tính nêu trên như sau:
- Các ' căn chỉnh văn bản ” thuộc tính được đặt là “ trung tâm ” để căn vị trí văn bản ở giữa.
- Kế tiếp, ' trọng lượng phông chữ ” được phân bổ là “ Dũng cảm ” để đặt phông chữ chú thích hình ảnh.
- Sau đó, “ màu ” thuộc tính được sử dụng để đặt màu cho phần tử được truy cập.
- Các ' lai lịch ” thuộc tính thiết lập màu nền của phần tử.
- Các thuộc tính khác, bao gồm “ Chức vụ ”, “ chiều cao ', và ' bề rộng ” cũng được sử dụng để áp dụng các chức năng tương ứng.
đầu ra
Chúng ta đã thảo luận về các phương pháp viết chú thích dưới hình ảnh.
Phần kết luận
Để viết chú thích dưới hình ảnh, người dùng có thể sử dụng nút “
” yếu tố hoặc một “ đơn giản ' thùng đựng hàng. Để sử dụng “”, trước tiên, hãy thêm “ ” phần tử để nhúng hình ảnh bên trong phần tử “
”, sau đó, hãy sử dụng phần tử “ ” và thêm chú thích vào giữa các thẻ của nó. Trong cách tiếp cận thứ hai, người dùng có thể chỉ cần sử dụng “ ” và áp dụng các thuộc tính CSS khác nhau để làm đẹp chú thích. Bài đăng này đã trình bày các phương pháp để viết chú thích dưới một hình ảnh.
- Đầu tiên, thêm “