在WordPress文章编辑中，有一个常见的“块引用” 按钮▼
使用后，它会在所选段落中添加一个<blockquote>标记，以调用一些引用的语句或突出显示。
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
解锁 AI 助力，告别低效工作！🔓💼
🌟 立刻在频道置顶目录中，抢先体验这些神奇的AI神兵利器！🌟
喜欢就分享和按赞！您的分享和按赞，是我们持续的动力！