DIY和其他教程：基础入门：使用浏览器的Inspector或Live CSS Box创建自定义代码

NewsPaper

教程级别：基本HTML和CSS

自定义过程由主题设置提供大量支持，但有时您可能需要更改网站中没有预定义选项的部分。这不是一项艰巨的任务，它只需要一些关于HTML和CSS工作原理的基本知识。

如何创建自定义代码

每个浏览器都带有一个名为Browser Inspector的便捷工具，它可以帮助您更好地掌握任何网站背后的代码。为了更好地了解它的工作原理，请阅读Chrome的开发人员工具概述：https://developer.chrome.com/devtools。

假设我们想更改内容块内文章标题的颜色。首先，确定您要编辑的网站部分，然后右键单击它并选择“检查”选项：

: 打开浏览器检查选项; 2016-01-07_14-31-43-1024x546.png (437.47 KiB) 查看 262 次

开发人员工具部分将出现在屏幕上。在大多数情况下，第一个选择可能不是很精确，并且您可能不会“检查”所需的元素，因为网站复杂的HTML结构基于一个接一个堆叠的不同容器。

: 开发人员工具; 2016-01-07_15-13-12-1024x593.png (498.47 KiB) 查看 262 次

现在你需要选择并打开每个容器，直到找到你要找的那个。在这个问题上，Visual Selector 将非常有用。

Visual Selector步骤：

单击Inspector工具左侧的Visual Selector图标。
选择要编辑的元素。
找到合适的HTML类。
确定用于设置元素样式的CSS选择器。

: 可视化选择器步骤; 2016-04-14_13-36-03-1024x618.png (443.79 KiB) 查看 262 次

文章标题本身是HTML标题，因此我们必须打开容器才能找到标题标签。确定元素后，您将在Developer Tools（开发人员工具）区域的右侧看到它的CSS样式。您将看到您在元素设置中所做的每项更改的实时可视化表示。

让我们更改标题颜色。对于此步骤，您将需要CSS选择器的基本知识。文章标题的H3标签有一个名为td-module-title的类。我们可以在代码中使用它并定位anchor标签：

代码：全选

.td-module-title a {
color:red;
}

这将适用于具有此结构的每个元素。为了提高选择器的特异性，您需要从标题上方的容器中添加更多类。

代码：全选

.td_module_6 .td-module-title a {
color：red;
}

现在，代码将仅应用于Module 6中的标题，但这将影响使用Module 6的每个位置，我们需要更具体地从上面的容器中获取更多类。

代码：全选

.td_block_1 .td_module_6 .td-module-title a {
color：red;
}

现在，该颜色将仅适用于具有模块标题和锚标签的Module 6的Block 1。如果您想比这更具体，您可以向页面构建器中的行添加一个额外的类。

CSS语言需要精确的指导才能知道在何处应用所需的更改。这就是所谓的特异性：https://developer.mozilla.org/en/docs/Web/CSS/Specificity。

现在，您对结果感到满意，可以在Theme Panel（主题面板）的指定自定义代码区域中添加代码段。Newspaper主题将自动应用它。

: 主题代码添加自定义代码; custom_code.png (87.59 KiB) 查看 262 次

使用Live CSS box进行小的视觉调整

在页面和文章上使用Live CSS进行自定义很简单。在每篇文章中，您都可以轻松插入代码行，通过更改字体、颜色、边框、背景、对齐方式、不透明度等来调整特定部分。该工具在tagDiv Composer中也可用，可帮助您自定义页面的每个元素。

: Live CSS Box; css_live_box.png (14.16 KiB) 查看 262 次

此工具旨在帮助您快速修复网站设计。它支持语法高亮显示，因此您可以清楚地看到您正在输入的内容。这种特殊性根据术语类别以独特的颜色和字体显示源代码。如果错误从您的指缝中溜走，此工具会对您编写的所有内容进行静态分析，并让您知道是否有问题。它会突出显示错误所在的行，以便您可以轻松查找和更正错误。

Live CSS带有一个集成的编译器，可以读取CSS和LESS格式，因此您可以用任何您想要的 “语言” 编写语法。该工具会翻译它，您将立即获得结果！

: 编辑代码; CSS-box-rsz-1.gif (1.5 MiB) 查看 261 次

使用本教程中介绍的技术来了解您喜爱的网站是如何构建的，并享受自定义您自己的网站的乐趣！

信息