Siaran ini menerangkan tentang menulis kapsyen di bawah imej.
Bagaimana Menulis Kapsyen Di Bawah Imej?
Untuk menulis kapsyen di bawah imej, kami akan menyediakan kaedah berbeza yang dinyatakan di bawah:
- Kaedah 1: Cara Menambah Kapsyen Imej Menggunakan HTML “
” Unsur? - Kaedah 2: Cara Menambah Kapsyen Imej Menggunakan “ ” Unsur?
Kaedah 1: Bagaimana untuk Menambah Kapsyen Imej Menggunakan Elemen '
' HTML? Untuk menambah kapsyen imej, ikuti arahan berikut:
- Pertama, tambahkan '
” elemen, yang digunakan untuk mewakili kandungan serba lengkap, berpotensi dengan kapsyen pilihan. - Seterusnya, masukkan “
'tag di dalam perenggan' ” tag. Tambahkan imej dengan menggunakan ' src ” atribut. ' segala-galanya ” harta menunjukkan kandungan tambahan jika imej tidak dipaparkan atas sebab tertentu.
- Tetapkan lebar imej sebagai “ 200px ”.
- Kemudian, '
tag ” digunakan untuk menambah kapsyen untuk imej. Selain itu, tambahkan kapsyen di antara teg ' ':
= 'TSL.png' segala-galanya = 'Pencipta Kandungan TSL' lebar = '200' >
>Anda boleh melihat bahawa imej dengan kapsyen yang ditentukan telah dipaparkan:
Sekarang, beralih ke kaedah kedua untuk menambah kapsyen menggunakan CSS.
Kaedah 2: Bagaimana untuk Menambah Kapsyen Imej Menggunakan Elemen '
'?Untuk menambah kapsyen imej menggunakan '
”, cuba arahan yang diberikan:
- Buat ' ” bekas dan tambahkan atribut kelas dengan nama “ pemegang imej ”.
- Tambah tag tajuk “ ” untuk memasukkan tajuk dan gayakan tajuk mengikut pilihan anda.
- Tambahkan satu lagi elemen “
” dan masukkan “tag ' bersama dengan ' src ”, “ segala-galanya ” dan “ lebar ” atribut di antara bekas div.
- Tambah “
” ketiga dengan nama kelas “ img-caption ”. Kemudian, berikan kapsyen di antara teg ''. Selain itu, '
'elemen digunakan untuk menambah satu pemisah baris:= 'pemegang imej' >
= 'warna:rgb(95, 31, 245)' > Imej HTML >
= 'TSL.png' segala-galanya = 'Pencipta Kandungan TSL' lebar = '200' >
= 'img-caption' >
>
>Dapat diperhatikan bahawa kapsyen untuk imej telah berjaya ditambahkan:
Sekarang, mari kita beralih ke bahagian CSS untuk menggunakan sifat.
Gaya “.image-holder” dalam CSS
Mula-mula, akses '
'elemen yang mempunyai kelas' .pemegang imej ”. Kemudian, gunakan sifat CSS berikut: .pemegang imej {
kedudukan : relatif ;
ketinggian : 100px ;
lebar : 200px ;
margin : auto ;
}Butiran sifat sebutan di atas diterangkan di bawah:
- ' kedudukan ” ditetapkan sebagai “ relatif ” untuk menentukan kedudukan asal elemen yang kekal dalam aliran dokumen, sama seperti nilai statik.
- Kemudian, “ ketinggian ” digunakan untuk menentukan ketinggian unsur.
- ' lebar ” hartanah menentukan saiz elemen dalam lebar.
- ' margin ” ditetapkan sebagai “ auto ” untuk menetapkan ruang secara automatik di sekeliling elemen.
Kapsyen Gaya dalam CSS
Dalam langkah ini, kami akan mengakses dua kelas dengan nama ' pemegang imej ” dan “ img-caption ” dan gunakan sifat CSS berikut:
.pemegang imej .img-caption {
kedudukan : mutlak ;
penjajaran teks : pusat ;
berat fon : berani ;
lebar : 200px ;
ketinggian : 50px ;
meninggalkan : 0px ;
warna : #f80909 ;
latar belakang : rgb ( 140 , 166 , 253 ) ;
}Penerangan mengenai sifat-sifat yang disebutkan di atas adalah seperti berikut:
- ' penjajaran teks ” harta ditetapkan sebagai “ pusat ” untuk menjajarkan kedudukan teks di tengah.
- Seterusnya, “ berat fon ' diperuntukkan sebagai ' berani ” untuk menetapkan fon kapsyen imej.
- Kemudian, ' warna harta ” digunakan untuk menetapkan warna elemen yang diakses.
- ' latar belakang ” harta menetapkan warna latar belakang elemen.
- Harta lain, termasuk “ kedudukan ”, “ ketinggian ”, dan “ lebar ” juga digunakan untuk menggunakan fungsi masing-masing.
Pengeluaran
Kami telah membincangkan kaedah untuk menulis kapsyen di bawah imej.
Kesimpulan
Untuk menulis kapsyen di bawah imej, pengguna boleh sama ada menggunakan “
'elemen atau ringkas' ” bekas. Untuk menggunakan '', pertama, tambahkan ' 'elemen untuk membenamkan imej di dalam'
” elemen, kemudian, gunakan elemen “ ” dan tambahkan kapsyen antara tegnya. Dalam pendekatan kedua, pengguna hanya boleh menggunakan ' ” dan gunakan sifat CSS yang berbeza untuk mencantikkan kapsyen. Siaran ini telah menunjukkan kaedah untuk menulis kapsyen di bawah imej.
- Pertama, tambahkan '