原文链接：https://www.chenweiliang.com/cwl-2123.html
在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
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1;
blockquote p
margin: 0;
。
欢迎转载《blockquote怎么用？HTML中blockquote标签demo效果》
陈沩亮版权所有，转载请注明出处链接：https://www.chenweiliang.com/cwl-2123.html
网站地址：https://www.chenweiliang.com/
欲学更多秘技，请关注微信公众号：cwlboke
没有评论:
发表评论