example. 为元素指定样式[#14]

常用正文命令、link、image、subtree、transclude和数学排版命令接受#:style。符号或字符串表示命名样式；HTML将这个名字映射为class：

@paragraph[#:style 'tutorial-note]{这是一段提示。}

这是一段提示。边线与缩进来自Flora自己的CSS。

需要HTML专用属性时，使用同一个style对象携带属性：

@(define note-style
  (make-content-style 'tutorial-note
    (list (make-html-attributes '((id . "style-example") (role . "note"))))))
@paragraph[#:style note-style]{这是一段具名提示。}

这是一段具名提示。它保留role与独立的HTML ID。

class会与renderer的结构性class合并。tree被嵌入时，HTML ID会加上展示位置前缀，避免多次transclude产生重复ID；跨文章引用仍使用tree的#:id。已经由renderer生成的导航ID不能被样式覆盖。

Flora在project.scm中通过compose-html-styles组合default-html-style与flora.css。项目的style.css包含：

.tutorial-note {
  background: var(--wash);
  padding: .3lh 1ic;
}

元素样式不会改变查询事实或数学语义，文本输出也不会显示HTML属性。Scheme代码得到的元素可以交给content-with-style设置样式，无须重新构造正文或丢失源码位置。