Direktori Artikel
在WordPressDalam pengeditan artikel, ada tombol "blokir kutipan" yang umum▼
Saat digunakan, ia menambahkanMarker untuk memanggil beberapa pernyataan atau sorotan yang dikutip.
Apa yang dimaksud dengan blockquote?
Berikut iniChen WeiliangGaya kutipan untuk blog:
Tag XHTML blockquote adalah elemen yang sangat berguna (jika ada yang kurang dimanfaatkan).Secara semantik, blockquote harus digunakan setiap kali Anda mengutip teks yang lebih panjang dari sumber lain (pembicara lain, situs web lain, dll.).Ini adalah cara untuk membatasi teks dan menampilkannya dengan sumber lain.
Dari segi gaya, Anda dapat melakukan semua ini dengan kelas khusus pada tag paragraf... tapi itu secara semantik tidak berguna, bukan? Blockquote memiliki beberapa gaya secara default.
Sebagian besar browser mengindentasi teks dalam tag blockquote, yang membantu pengguna mengidentifikasi teks dalam beberapa cara.Tapi siapa bilang kita harus berhenti di situ?Berikut cara menata blockquotes Anda dengan CSS.
Uji test-css.html dan tambahkan bagian css ke badan html:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Test CSS blockquote</title> </head> <blockquote> <p>The blockquote XHTML tag is a fairly useful (if somewhat underused) element. Semantically speaking, a blockquote should be used any time you’re quoting a longer piece of text from another source – another speaker, another website, whatever. It’s a way of setting the text apart, and showing that it came from some other source. Stylistically, you could accomplish all this with a special class on your paragraph tags… but that wouldn’t be as semantically useful, now, would it?<br> Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who's to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS.</p> </blockquote> </body> </html>
Bagaimana cara menggunakan blockquote?
Ditemukan bahwa beberapa tema WordPress tidak menambahkan gaya referensi dalam file style.css.
Salin dan tempel gaya sudut membulat latar belakang biru berikut ke dalam file style.css tema▼
blockquote, q {
font: bold 21px/1.5 Consolas,"Courier New","KaiTi","KaiTi_GB2312","FangSong_GB2312",SimHei,arial,Monaco,monospace;
color: #000;
margin: 1em;
margin-left: 2em;
margin-right: 2em;
padding: 3px;
max-width: 95%;
quotes: "\201C""\201D""\2018""\2019";
background: #C3F3F7;
border-radius: 20px;
}Gaya referensi menentukan teks isi (ukuran, warna), warna latar belakang, spasi putih, batas, dll...
gaya perbatasan
Gaya ini relatif sederhana, yaitu mengatur batas kiri dan mengatur ketebalan.Warna mengontrol warna font, dan warna latar belakang mengontrol warna latar belakang (atau grup latar belakang langsung).
Margin mengontrol jarak ke elemen jendela, sisi kiri batas mengontrol gaya batas kiri, dan padding (terutama sisi kiri padding kiri) mengontrol jarak dari teks ke batas (kiri).
Gaya ini sesederhana blog sederhana.
Salin dan tempel gaya latar belakang kuning berikut ke dalam file style.css dari tema▼
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
- Di atas adalah 2 gaya blockquote.
- Menambahkan beberapa gaya identik akan ditimpa.
- Jadi, silakan pilih salah satunya dan tambahkan ke file style.css tema.
Harapan Chen Weiliang Blog ( https://www.chenweiliang.com/ ) membagikan "Bagaimana cara menggunakan blockquote? HTML dalam efek demo tag blockquote, untuk membantu Anda.
Selamat datang untuk membagikan tautan artikel ini:https://www.chenweiliang.com/cwl-2123.html
Selamat datang di saluran Telegram blog Chen Weiliang untuk mendapatkan pembaruan terkini!
📚 Panduan ini mengandung nilai yang sangat besar, 🌟Ini adalah kesempatan langka, jangan sampai terlewatkan! ⏰⌛💨
Bagikan dan sukai jika Anda suka!
Berbagi dan suka Anda adalah motivasi berkelanjutan kami!