Blockquote qanday ishlatiladi? HTML blockquote teg demo effekti

WordPressMaqolani tahrirlashda keng tarqalgan "iqtibosni bloklash" tugmasi mavjud▼

Blockquote qanday ishlatiladi? HTML blockquote teg demo effekti

Foydalanilganda, u a qo'shadiBa'zi bir iqtibos yoki ta'kidlashni chaqirish uchun marker.

Blok tirnoq nimani anglatadi?

QuyidagichaChen VeyliangBloglar uchun iqtibos uslubi:

Blockquote XHTML yorlig'i juda foydali (agar ba'zi kam foydalanilgan bo'lsa) elementdir.Boshqa manbadan (boshqa ma'ruzachi, boshqa veb-sayt va h.k.) uzunroq matndan iqtibos keltirayotganingizda semantik jihatdan blok-iqtibosdan foydalanish kerak.Bu matnni chegaralash va uni boshqa manbalar bilan ko'rsatish usulidir.
Uslub bo'yicha, siz bularning barchasini paragraf teglari bo'yicha maxsus darslar bilan qilishingiz mumkin ... lekin bu semantik jihatdan foydasiz, shunday emasmi? Blockquotes sukut bo'yicha ba'zi uslublarga ega.
Ko'pgina brauzerlar blok tirnoq teglarida matnni cheklaydi, bu esa foydalanuvchilarga matnni qandaydir tarzda aniqlashga yordam beradi.Ammo bu erda to'xtashimiz kerakligini kim aytadi?Bu yerda CSS yordamida blok tirnoqlarini qanday uslublash mumkin.

test-css.html ni sinab ko'ring va CSS bo'limini html tanasiga qo'shing:

<!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>

Blockquote qanday ishlatiladi?

Ba'zi WordPress mavzulari style.css fayliga mos yozuvlar uslublarini qo'shmasligi aniqlandi.

Mavzuning style.css fayliga quyidagi koʻk fon yumaloq burchak uslubini nusxalash va joylashtirish▼

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;
}

Yo'naltiruvchi uslublar asosiy matnni (hajmi, rangi), fon rangini, bo'sh joyni, chegaralarni va hokazolarni aniqlaydi ...

chegara uslubi

Ushbu uslub nisbatan sodda, ya'ni chap chegarani o'rnating va qalinligini o'rnating.Rang shrift rangini, fon rangi esa fon rangini (yoki bevosita fon guruhini) boshqaradi.

Chegara oyna elementigacha bo'lgan masofani, chegaraning chap tomoni chap chegara uslubini, to'ldirish (ayniqsa, chap tomondagi to'ldirishning chap tomoni) matndan (chap) chegaragacha bo'lgan masofani boshqaradi.

Bu uslub oddiy blog kabi oddiy.

Quyidagi sariq fon uslubidan nusxa ko‘chiring va mavzuning style.css fayliga joylashtiring▼

blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }
  • Yuqorida 2 ta blok tirnoq uslubi mavjud.
  • Bir nechta bir xil uslublar qo'shilsa, ustiga yoziladi.
  • Shunday qilib, ulardan birini tanlang va uni mavzuning style.css fayliga qo'shing.

Umid qilamanki, Chen Veyliang blogi ( https://www.chenweiliang.com/ ) "Blok qo'shtirnoqdan qanday foydalanish kerak? Blockquote teg demo effektida HTML, sizga yordam berish uchun.

Ushbu maqolaning havolasini baham ko'rish uchun xush kelibsiz:https://www.chenweiliang.com/cwl-2123.html

Eng so'nggi yangiliklardan xabardor bo'lish uchun Chen Veyliang blogining Telegram kanaliga xush kelibsiz!

🔔 Birinchi bo'lib kanalning yuqori katalogida qimmatli "ChatGPT Content Marketing AI vositasidan foydalanish bo'yicha qo'llanma"ni qo'lga kiriting! 🌟
📚 Ushbu qo'llanmada katta ahamiyatga ega, 🌟Bu kamdan-kam imkoniyat, uni qo'ldan boy bermang! ⏰⌛💨
Baham ko'ring va yoqsa like!
Sizning baham ko'rish va yoqtirishlaringiz bizning doimiy motivatsiyamizdir!

 

发表 评论

Sizning elektron pochta manzilingiz e'lon qilinmaydi. 必填 项 已 用 * Yorliq

tepaga aylantiring