本页目录

CSS

.css ^{文档 ↗} 函数让你将 CSS 样式应用到文档中。

CSS 样式仅适用于 HTML 与 HTML-PDF 文档。对其他输出格式没有影响。
有关此主题的更多细节，请参阅 HTML 页面。

.css
    body {
        background-color: green;
    }
  
    h1 {
        color: pink;
    }

你也可以使用 .read 函数从文件中加载 CSS 样式：

.css {.read {styles.css}}

与 .code 不同，.css 函数不允许在其主体参数内部调用函数，因为它们会与 CSS 语法产生歧义。
因此，你必须像前面的示例那样将 .read 调用内联。

自定义类

你可以使用 classname 参数为特定元素分配自定义的 CSS 类名称，该参数在.container （用于块级元素）和 .text （用于行内元素）中可用。

示例 1

.container classname:{my-custom-class}
    This is a block with a custom class.

    - Item 1
    - Item 2
    - Item 3

This is an .text {inline text} classname:{my-custom-class} with a custom class.

.css
    .my-custom-class {
        padding: 8px;
        border-radius: 8px;
        background: linear-gradient(to right, blue 0%, forestgreen 100%);
    }

This is a block with a custom class.

Item 1
Item 2
Item 3

This is an inline text with a custom class.

自定义可复用元素

你可以利用自定义函数来创建带有自定义类的可复用元素。

示例 2

.function {mytext}
    content:
    .text {.content} classname:{my-custom-class}

This is a .mytext {text} and here is .mytext {another}.

This is a text and here is another.

覆盖属性

如果你想覆盖 Quarkdown 的默认样式，我们推荐使用 .cssproperties ^{文档 ↗} 函数。

该函数接受一个字符串字典，其中每一项都是一个 --qd-* CSS 属性及其值。

你可以在全局主题源码中找到可用属性的完整列表。未知属性会被安全地忽略。

示例 3

.cssproperties
    - background-color: green
    - heading-color: pink
    - block-margin: 12px

Why is this preferred over `.css`?

Quarkdown 的主题使用 CSS 自定义属性来实现更细粒度的控制和更轻松的覆盖。例如，同一个属性可能会根据文档类型的不同而有不同的应用方式。

当你调用 .pageformat 或 .paragraphstyle 等函数时，它们是通过注入相应的 --qd-* 属性来施加效果的。

覆盖 --qd-* 属性而非其原始 CSS 等价物，能提供更平滑的控制，并降低未来发生破坏性变更的风险。