但是奇怪的是，在线上没有太多专业示例可供您寻找灵感。
当您需要表达对话或重复引用其他来源的报价时，这是一种完美HTML样式。
Web排版中有很多示例，其中引号完全适合您的布局。
我想在今天的帖子中专门介绍如何创建时尚的blockquotes和pull quotes 。
这些引用样式之间有一些区别，我们应该仔细研究它们 ，以便完全理解这些现代设计趋势。
为您的博客文章和页面创建时尚外观将使读者迷上更长的时间。
作为网页设计师， 您必须将网页内容视为出售域名的关键因素 。
并随时在自己的布局中模拟许多这些样式！
不需要非常了解HTML5或CSS3 ，但是具有Web设计的一些背景知识将使此过程变得容易得多。
深入语义
您可以在标记中使用一小组不同的标记来表示这些页面元素。
在研究CSS样式之前，我们应该首先研究一下blockquotes和pull quote之间的区别。
块引用
但是您可以引用印刷或什至是电影或电视节目等数字媒体中的文本。
块引用包含来自任何外部参考 （最常见的是其他网站或博客文章）的引用文本 。
这些通常跨越文本的整个宽度，并且看起来会比正常情况大得多。
使用HTML5 blockquote标签时，它应代表完整的文本块–一个段落或可能的几个段落。
拉引号
这有助于强调重要的短语并打破典型的页面流 。
但是，拉引号最典型的用法是复制文档中某处已经找到的文本。
HTML5中没有特定的pullquote标签，因此语义并不完全是形式上的 。
拉引号在内容部分之间的页面一侧对齐。
新HTML5引用规则
这通常意味着块引用只能用于较大的文本引用。
这些可以是<p> ， <ul> ， <div>或其他块线元素。
在所有以前HTML标准中，blockquote元素是一个根元素，仅包含语义标记标签。
只需将文本放入<blockquote>标记中，就可以了。
这使构建HTML非常容易，因为我们不需要依赖更旧，更混乱的编码标准 。
但是，新的HTML5 blockquote规范明确指出“不必在blockquote元素内使用p个元素” 。
这不是添加到您的代码中的不错选择，但是有些替代方法可能更易于使用。
您可以设置一个唯一的URL值 ，其中包含您要引用的文本。
另一个典型的添加是块引用上的cite属性。
在这种情况下，您的读者也有机会将报价追溯到其原始来源 。
例如，您可以在blockquote的正下方添加一些文本，然后链接到文本中的文章。
内联报价
文章使用这些内联拉引号（或提升引号） 显示文章中的相关内容 。
拉引号可以被视为内嵌引号，因为它们通常浮动在页面内容的左侧或右侧。
我很少见过Web开发人员使用<q>标记，因为它在标记中非常笨拙 。
较小的HTML5 <q>标记可用于包装这些拉引号，尽管此元素通常用于段落内的引号。
老实说，我建议为您的拉引号设置自定义样式 ，并将其包装在div，span甚至blockquote元素中 。
您可以使用引号和斜体文字进一步修饰样式。
我们可以在任何典型的blockquote元素上设置.pull类的样式，然后将其浮动到右侧。
我上面的示例说明了一个非常简单的拉引号。
样式完整CSS Blockquotes
由于可以将文本混合到您的主页内容中，因此典型的内联报价有些微妙。
块引用非常有趣，因为可以遵循许多独特的样式。
让我们看一下我使用CSS属性创建的一些基本示例。
我添加了文本阴影效果以增强查看效果。
您可以放置字符引用或Web链接以连接到引用的文本。
上面的示例使用默认的块样式引号，并在顶部带有署名。
流动性是创建可行的quotquotes的关键方面，在监视器上看起来也不错。
如果您认为看起来更好，可以将来源属性移到引号下方。
您可以自由复制我的代码并编辑样式以适合您的需要。
这种blockquote样式与典型的默认属性有很大不同。
使用BG图片报价
由于您无法预测这些引号的高度，因此通常会创建两个不同的图像，并将其中一个引号上下颠倒旋转。
块引用的另一种流行趋势是添加您自己CSS背景图像作为引号。
我正在使用一个包含用引号引起来的全文的段落元素，以便我们的底部引号将垂直扩展。
在我的示例中，我们使用另一个带有特殊类.bq3 blockquote。
加上一些额外的填充，我们为任何页面布局都提供了一个非常漂亮的blockquote样式！
然后在内部段落元素上，在右下角添加另一个非重复的背景图像。
前提是在左上角的blockquote元素上使用非重复的背景图像。
引人注目的引语
当您浏览页面内容时，这将脱颖而出。
此内部blockquote元素浮动在左侧，并且我创建了一个较暗的框配色方案来与段落文本进行对比。
对于我的最后一部分代码，我们可以创建一组全新的彩色内联拉引号。
但是，当您添加带有圆角的这些额外的背景效果时，您会发现访问者更喜欢阅读而不是浏览文章。
拉引号的独特之处在于它们可以落在页面副本的任何位置，并且看起来仍然非常优雅 。
理想情况下，您可以按照布局使用任何匹配的配色方案。
但是，以这些CSS示例为起点，继续进行并编写自己的代码！
可能性是无限的，因此在采取任何第一步之前都需要仔细考虑。
您可以为自己的设计创建非常相似的内容，甚至可以添加背景图片。
进一步阅读
陈列室画廊
在以下画廊中，我整理了40多个网站版式中的引号和引号示例 。
在不炫耀网络人才的情况下，哪篇文章是完整的？
但是，如果您对我们可能错过的样式有任何疑问或建议，请随时在下面的帖子讨论区中发表评论。
来自世界各地的设计师将发现许多灵感可以运用。
翻译自: https://www.hongkiat.com/blog/stylish-blockquotes-pullquotes/