自定义样式语法

你可以将内置角色（例如，big 或 underline）或自定义角色（例如，term 或 required）分配给任何格式化文本。这些角色反过来可以用来为文本应用样式。在HTML中，这是通过在样式表中使用CSS类选择器将样式映射到角色来完成的。

带有内置角色的文本
Unresolved directive in custom-inline-styles.adoc - include::example$text.adoc[tag=css-co]

  1. 第一个位置属性被当作角色来处理。你可以为其分配一个自定义的或内置的CSS类。

带有内置角色的文本的结果如下所示。

Unresolved directive in custom-inline-styles.adoc - include::example$text.adoc[tag=css]

虽然大多数AsciiDoc处理器都支持`big`和`small`这样的内置[built-in roles]角色，但最好还是定义自己的语义角色名称，并相应地映射样式。

这是如何给文本指派一个自定义角色，以便你可以对其应用自己的样式。

具有自定义角色的文本
Unresolved directive in custom-inline-styles.adoc - include::example$text.adoc[tag=css-custom]

当 具有自定义角色的文本 转换为HTML时，单词 asciidoctor 被包含在一个 <span> 元素中，并且角色 userinput 被用作元素的CSS类。

HTML输出
Unresolved directive in custom-inline-styles.adoc - include::example$text.adoc[tag=css-custom-html]

下面的例子展示了你如何使用CSS类选择器为具有该角色的元素分配样式。

.userinput {
  font-family: monospace;
  font-size: 1.1em;
  line-height: calc(1 / 1.1);
}