如何通过 css（beautiful-jekyll 主题）修改标题颜色？

Question

我已经建立了一个“美丽的 Jekyll”博客/GitHub 页面，我想更改页面标题和副标题的字体颜色。但是我在main.css中找不到合适的地方

以下是网站示例：

https://deanattali.com/beautiful-jekyll/

这里是 GitHub 页面：

https://github.com/daattali/beautiful-jekyll

我查看了index.html、config.yml 和css 文件夹，但找不到更改颜色的位置。

我想改变文字的颜色：

Beautiful Jekyll
Build a beautiful and simple website in minutes

编辑：我有以下内容：

我拥有的main.css 文件的第 24 行到第 35 行：

h1,h2,h3,h4,h5,h6 {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800;
}

a {
  color: {{ site.link-col }};
}

.header_class {
  color: red;
}

在我拥有的index.html 文件的第 28 行：

<h1 class="header_class">{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1>

哪个有效。

Answer 1

header.html 中的 page.title 有一个 <h1>。

一些挑战：

• 父 div 有一个类 <div class="{{ include.type }}-heading">，但元素本身没有可以在 css 中使用的类或 id。
• 您需要在 html 中添加另一个类并在 css 中定义新样式以仅获取彩色 page.title
• 如果您在 CSS 中仅定义现有 <h1> 的颜色，则每个文档的每个标题都会被着色，因为 CSS 为 <h1> 到 <h6> 定义了相同的样式。

测试 html 和 css 更改：

• 您可以使用浏览器中的开发工具/检查器（按 F12）查看页面元素。
• 您甚至可以测试添加/更改某些 css 属性时会发生什么。

在这里你可以看看我的意思和how to do it on your own。

注意事项：

当我对此进行测试时，结果发现副标题实际上有不同的类，你也许可以使用。为了测试，我给了<h1> 属性color: red，这肯定不是我上面概述的解决方案。

如何在 html 中添加类并更新 css：

注意，这是 h1 的示例，如果您不想为其重用现有的 css，它对子标题的工作方式相同。

1. 转到header.html 中的第 28 行并将更改 <h1> 添加到 <h1 class="your-test-class">
2. 转到main.css 并在 h1,... 定义下方添加以下内容：

.your-test-class {
  color: red;
}

有关 html 和 css 以及 specific use of classes in html and css 的完整教程，请参见此处。