在WordPress文章編輯中，有一個常見的“塊引用” 按鈕▼
使用後，它會在所選段落中添加一個標記，以調用一些引用的語句或突出顯示。
blockquote是什麼意思？
以下是陳溈亮博客的引用樣式：
blockquote XHTML標籤是一個非常有用的（如果有些是未充分利用的）元素。在語義上，每當你從其他來源（另一個發言者，另一個網站等）引用較長的文本時，都應該使用blockquote。這是一種分隔文本並將其與其他來源一起顯示的方法。
在風格方面，你可以通過段落標記上的特殊類來完成所有這些… 但這在語義上是無用的，現在，它會嗎？ Blockquotes默認有一些樣式。
大多數瀏覽器會在blockquote標記中縮進文本，這有助於用戶以某種方式識別文本。但誰能說我們需要在那裡停下來？以下是使用CSS為你的blockquotes設置樣式的方法。
測試test-css.html並將css部分添加到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>
如何用blockquote？
發現有些WordPress主題，沒有在style.css 文件添加引用樣式。
將以下藍色背景圓角樣式，複製粘貼到主題的style.css文件裡▼
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;
}引用樣式確定正文（大小，顏色）、背景顏色、空白、邊框等……
邊框風格
這種風格比較簡單，即設置左邊框並設置厚度。顏色控製字體顏色，背景顏色控制背景顏色（或直接背景組）。
邊距控製到窗口元素的距離，邊框的左側控制左邊框樣式，填充（尤其是左邊距填充左側）控制從文本到（左）邊框的距離。
這種風格很簡單，只需一個簡單的博客。
將以下黃色背景樣式，複製粘貼到主題的style.css文件裡▼
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
- 以上是2種blockquote 樣式。
- 添加多個同樣的樣式會被覆蓋。
- 所以，請選其中一種，添加到主題的style.css文件裡。
希望陳溈亮博客（ https://www.chenweiliang.com/ ） 分享的《blockquote怎麼用？ HTML中blockquote標籤demo效果》，對您有幫助。
歡迎分享本文鏈接：https://www.chenweiliang.com/cwl-2123.html
歡迎加入陳溈亮博客的Telegram 頻道，獲取最新更新！
📚 這份指南蘊含價值巨大，🌟難逢的機遇，切勿錯失良機！ ⏰⌛💨
喜歡就分享和按贊！
您的分享和按贊，是我們持續的動力！