html - 带 SVG 的 Div，分栏两行文本和下划线，无内联代码

Question

我正在尝试创建一个通用的“类标题”div，它可以在外部样式表中完全更改。我的网站信息相当静态，我只希望样式/外观是动态的，这样我所要做的就是换掉 CSS 链接和 *bam*，网站就不同了。

我需要这个类似标题的 div 的第一个版本看起来像这样:

它的设计看起来像典型的学校信笺抬头。 Logo 是一个 SVG，我更愿意这样使用它，这样它就很容易在运行中进行操作。

我最初的图像是 <img src=... HTML 文件中的行，但意识到它不是很动态。这也让我的线路使用 HR 有点古怪，毫无疑问是因为我做错了。我试着制作一个 div使用 background-image属性(property)，但它根本没有显示。我真的希望这两行文本可以单独配置，重新调整大小和/或字体粗细/字体系列。我真的、真的、真的很喜欢完全在外部样式表中完成这项工作，所以，正如我所说，我可以轻松地即时更改它。我什至希望能够包括文本，就像这里的“Sakura Gakuen”一样，所以整个该死的东西都是动态变化的。

我的想法是否完全可行？如果不是，我们最接近我的想法的是什么？我不在乎是否需要 @imports 或其他任何东西。如果有意义的话，我只想要一些静态动态的东西。基本上，我的非常基本且相对不变的文本的模板页面，以及随着调用的样式表被换出而改变的图像/标题。

我在那里使用的字体是 EB Garamond 并且可以找到我的 SVG here宽度为 100 像素，我希望在边距和 20 像素的“信头”之间的每一侧都有一个填充。

Answer 1

这是您追求的那种东西吗？

.letterhead {
  font-family: Times, "Times New Roman", Georgia, serif;
  width: 500px;
  margin: 0 auto;
}

.letterhead::before {
  content: ' ';
  display: block;
  float: left;
  width: 120px;
  height: 100px;
  background-image: url(http://cafenocturne.com/images/svg/SakGakSVG.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.line1 {
  display: block;
  font-size: 44px;
  font-weight: bold;
  margin-left: 130px;
}

.line2 {
  font-size: 40px;
  display: block;
  margin-left: 130px;
  border-bottom: solid 5px grey;
}

<div class="letterhead">
  <span class="line1">Sakura</span>
  <span class="line2">Gakuen</span>
</div>

更新:

OP 询问是否是:

a way to get the text "Sakura Gakuen" into the external sheet?

这是文本位于样式表中的版本。注意一般不推荐。通常最好将内容和样式分开。

.letterhead {
  font-family: Times, "Times New Roman", Georgia, serif;
  width: 500px;
  margin: 0 auto;
}

.letterhead::before {
  content: ' ';
  display: block;
  float: left;
  width: 120px;
  height: 100px;
  background-image: url(http://cafenocturne.com/images/svg/SakGakSVG.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.line1 {
  display: block;
  font-size: 44px;
  font-weight: bold;
  margin-left: 130px;
}

.line2 {
  font-size: 40px;
  display: block;
  margin-left: 130px;
  border-bottom: solid 5px grey;
}

.line1::before {
  content: 'Sakura'
}

.line2::before {
  content: 'Gakuen'
}

<div class="letterhead">
  <span class="line1"></span>
  <span class="line2"></span>
</div>