我该如何将我的块引用样式设置为这样？

Question

我在添加黄色引用块时遇到了问题，它会缩进/增加不需要的行高。

这是我要实现的效果：

这是我尝试过的方法:

.contentquote {
  font-family: 'Roboto Slab', serif;
  font-size: 20px;
}

.quote {
  line-height: color: #003b49;
  font-size: 2.9em;
}

<h1 class="contentquote"><span class="quote">&ldquo;</span>In my circles, when I talk to people about which firm is the best thinker in this (value-based care) area and which firm couples that with actual execution, we talk about Premier...<span class="quote">&rdquo;</span></h1>

这是我一直收到的内容：

在此附上链接： 非常感谢您的帮助！

- Connor Clausen

---

你只需要在 .qoute 上加上 color: yellow;，对吧？ - user8256287

如果您将实际引用文本放在标签中（例如 <q> 标签），则可以在 CSS 中使用 before 和 after 伪元素，这样就不必在 HTML 中包含引用 span。将所有共享属性（字体、颜色、大小、显示等）分配给 q::before, q::after {}，然后使用 q::before {content:'“';} 和 q::after {content:'”';} 分配引号。引号的实际定位可能需要进行一些微调（请参见下面的答案），但这将节省一些标记并改善可访问性。 - Bmd

Answer 1

你的代码有三个问题。

首先，你不小心将line-height和color组合在一起，变成了line-height: color:。在你的示例代码中没有指定line-height，所以我猜想line-height只是一个拼写错误。如果你实际上使用了line-height，你需要使用分号将它们分开。

其次，除了将其分配给.contentquote外，你还忘记包含字体引用。Roboto Slab字体可以在Google上找到，并通过<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">链接。

第三，#003b49与黄色橙色无关，它与蓝绿色相关。你需要将其替换为适当的颜色。示例中使用的确切颜色是#fdb527。

对于引用的实际定位，你需要将position: absolute应用于.quote。在其上设置负margin-top，使其与文本对齐。然后使用伪选择器:first-of-type在.quote:first-of-type上设置负margin-left，将引用移动到文本左侧。最后，为了抵消负边距，在.contentquote上设置padding-left。

以下是一个可行的示例：

.contentquote {
  font-family: 'Roboto Slab', serif;
  font-size: 20px;
  padding-left: 22px;
}

.quote {
  color: #fdb527;
  font-size: 2.9em;
  position: absolute;
  margin-top: -16px;
}

.quote:first-of-type {
  margin-left: -22px;
}

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">

<h1 class="contentquote"><span class="quote">&ldquo;</span>In my circles, when I talk to people about which firm is the best thinker in this (value-based care) area and which firm couples that with actual execution, we talk about Premier...<span class="quote">&rdquo;</span></h1>

希望这能有所帮助！:)

- Obsidian Age

---

你指出的三个问题实际上并没有让 OP 更接近解决问题：“我遇到了一个问题，无法找到一种方法在我的引用中添加黄色引用块而不会缩进或增加不必要的行高。” - Jon Uleis

@JonUleis -- 最初忽略了这个方面。现在我已经更新了我的答案来涵盖这个问题 =] - Obsidian Age

Answer 2

为解决您的实际问题...

我无法找到一种方法，在不缩进/添加不需要的行高的情况下添加黄色引用块。

您可以在引号上使用position:absolute，以防它们干扰段落的流动。我还缩进了段落，以创建起始引号标记的装订线。

.contentquote {
  font-family: 'Roboto Slab', serif;
  font-size: 20px;
  padding: 0 0 0 20px;
}

.quote {
  color: #fdb527;
  font-size: 2.9em;
  position: absolute;
  margin-top: -16px;
}

.quote:first-child {
  left: 0;
}

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">

<h1 class="contentquote"><span class="quote quote--start">&ldquo;</span>In my circles, when I talk to people about which firm is the best thinker in this (value-based care) area and which firm couples that with actual execution, we talk about Premier...<span class="quote">&rdquo;</span></h1>

- Jon Uleis

Answer 3

Try the code below. :) 

在我的部分中，我使用了CSS伪元素:before和:after来处理引用符号。

*{ box-sizing: border-box; -webkit-box-sizing: border-box; }

.contentquote {
  font-family: 'Roboto Slab', serif;
  font-size: 20px;
  max-width: 350px;
  width: 100%;
  padding: 15px 25px 56px 40px;
  background: #e4e4e4; 
  color: #575757;
  position:relative;
}
.contentquote p{ position: relative; display: inline-block; margin: 0; }
.contentquote p:before, .contentquote p:after{ color: #fdb527; font-size: 2.9em; position: absolute; }
.contentquote p:before{ left: -28px; top: -13px; content: "“"; }
.contentquote p:after{ bottom: -35px; content: "”"; }

.contentquote h2{ position: absolute; font-size: .7em; right: 28px; bottom: 18px; font-weight: normal; }

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">

<div class="contentquote"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor do eiusmod tempor.</p><h2>Temporary Name</h2></div>

- bellabelle