Direktori Artikel
在WordPressDalam penyuntingan artikel, terdapat butang "petikan blok" biasa▼
Apabila digunakan, ia menambah aPenanda untuk memanggil beberapa pernyataan atau sorotan yang dipetik.
Apakah maksud blockquote?
Berikut adalahChen WeiliangGaya petikan untuk blog:
Tag XHTML petikan blok adalah elemen yang sangat berguna (jika ada yang kurang digunakan).Secara semantik, petikan sekatan hendaklah digunakan apabila anda memetik teks yang lebih panjang daripada sumber lain (penceramah lain, tapak web lain, dsb.).Ini ialah cara untuk mengehadkan teks dan memaparkannya dengan sumber lain.
Dari segi gaya, anda boleh melakukan semua ini dengan kelas khas pada tag perenggan... tetapi itu tidak berguna secara semantik, sekarang, bukan? Blockquotes mempunyai beberapa gaya secara lalai.
Kebanyakan pelayar mengesot teks dalam teg petikan blok, yang membantu pengguna mengenal pasti teks dalam beberapa cara.Tetapi siapa kata kita perlu berhenti di situ?Berikut ialah cara untuk menggayakan petikan blok anda dengan CSS.
Uji test-css.html dan tambahkan bahagian css pada 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 untuk menggunakan blockquote?
Didapati bahawa sesetengah tema WordPress tidak menambah gaya rujukan dalam fail style.css.
Salin dan tampal gaya sudut bulat latar belakang biru berikut ke dalam fail 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 rujukan menentukan teks badan (saiz, warna), warna latar belakang, ruang putih, sempadan, dll...
gaya sempadan
Gaya ini agak mudah, iaitu, tetapkan sempadan kiri dan tetapkan ketebalan.Warna mengawal warna fon, dan warna latar belakang mengawal warna latar belakang (atau kumpulan latar belakang langsung).
Jidar mengawal jarak ke elemen tetingkap, bahagian kiri sempadan mengawal gaya sempadan kiri, dan padding (terutama sebelah kiri padding kiri) mengawal jarak dari teks ke sempadan (kiri).
Gaya ini semudah blog ringkas.
Salin dan tampal gaya latar belakang kuning berikut ke dalam fail style.css tema▼
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
- Di atas ialah 2 gaya petikan blok.
- Menambah berbilang gaya yang sama akan ditimpa.
- Jadi, sila pilih salah satu daripadanya dan tambahkannya pada fail style.css tema.
Blog Harapan Chen Weiliang ( https://www.chenweiliang.com/ ) berkongsi "Bagaimana untuk menggunakan blockquote? HTML dalam kesan demo teg petikan blok, untuk membantu anda.
Selamat datang untuk berkongsi pautan artikel ini:https://www.chenweiliang.com/cwl-2123.html
Selamat datang ke saluran Telegram blog Chen Weiliang untuk mendapatkan kemas kini terkini!
📚 Panduan ini mengandungi nilai yang besar, 🌟Ini adalah peluang yang jarang berlaku, jangan lepaskan! ⏰⌛💨
Share dan like jika anda suka!
Perkongsian dan suka anda adalah motivasi berterusan kami!