---
title: 定制 CSS
slug: docs/cn/css
description: 通过这份综合文档，了解如何使用 CSS 自定义和设计托管与发布的 Spaces。了解如何向 Space 添加定制 CSS、查看可用于样式化元素的 CSS 类列表，并了解定制化的限制。探索
createdAt: 2021-01-28T13:38:24.000Z
---
已托管并发布的 Spaces 可以使用 CSS 进行自定义。
您的 CSS 更改将仅包含在您的自定义域名上。当您预览已发布的 Space 时，它将不可见，因此您需要将其发布到 Production。
::::WorkflowBlock
:::WorkflowBlockItem
选择一个 space，然后点击 **设置** 图标（ ⚙️ ）以打开** 空间设置**
:::
:::WorkflowBlockItem
在 Space Settings 窗口中找到 **定制代码** 选项卡
:::
:::WorkflowBlockItem
进入 **定制 CSS** 字段
:::
:::WorkflowBlockItem
输入 **HTML \
```
:::hint{type="warning"}
出于安全原因，自定义代码仅包含在自定义域名上。
:::
在整个 DOM 中，您会发现带有以 `ab-` 开头的 CSS 类的 HTML 元素。您可以通过这些类来定制 portal 的样式。**这些类保证永远不会更改，因此在我们更新系统时不会破坏您的样式。**
如果您尝试设置样式的元素没有以 `ab-` 开头的类，则我们不允许进行自定义，这主要是为了保护您。例如，如果我们更改结构，可能会影响您的样式。
内容部分的每个元素和块也有类似的类。下面可以找到类的列表。如果您想查看它们，请在浏览器中右键点击 -> Inspect 打开 DevTools。
以下是当前 **可用的 CSS 类：**
:::BlockQuote
.ab-callout \{ }
.ab-changeloc \{ }
.ab-code-editor \{ }
.ab-minitasker \{ }
.ab-graphiql \{ }
.ab-horizontal-divider \{ }
.ab-jira \{ }
.ab-map \{ }
.ab-mermaid \{ }
.ab-vertical-split \{ }
.ab-vertical-split-item \{ }
.ab-video \{ }
.ab-checklist \{ }
.ab-blockquote \{ }
.ab-diagram \{ }
.ab-embed \{ }
.ab-file \{ }
.ab-iframe \{ }
.ab-html \{ }
.ab-image \{ }
.ab-ul-list \{ }
.ab-ol-list \{ }
.ab-list-item \{ }
.ab-list-item-child \{ }
.ab-table \{ }
.ab-space \{ }
.ab-collection \{ }
.ab-space-container \{ }
.ab-collection-container \{ }
.ab-top-navbar \{ }
.ab-search-input \{ }
.ab-public-search \{ }
.ab-space-content \{ }
.ab-collection-content \{ }
.ab-tree-navigation \{ }
.ab-tree-navigation-link \{ }
.ab-left-nav-chevron \{ }
.ab-tree-navigation-link-inactive \{ }
.ab-space-navigation \{ }
.ab-doc-name \{ }
.ab-h1 \{ }
.ab-h2 \{ }
.ab-h3 \{ }
.ab-expandable-heading \{ }
.ab-link \{ }
.ab-link-dynamic \{ }
.ab-nav-right \{ }
.ab-nav-right-text \{ }
.ab-bold \{ }
.ab-code \{ }
.ab-paragraph \{ }
.ab-footer-container \{ }
.ab-search-modal-header \{ }
.ab-search-modal-content \{ }
.ab-auth-jwt-button \{ }
.ab-auth-saml-button \{ }
.ab-windy-template \{ }
.ab-color-nav-template \{ }
.ab-booklet-template \{ }
:::
**OpenAPI** **CSS 类**
:::BlockQuote
.ab-openapi \{ }
.ab-open-api-param-name \{ }
.ab-open-api-param-expand-icon \{ }
.ab-open-api-param-type \{ }
.ab-open-api-param-description-wrap \{ }
.ab-open-api-param-example-wrap \{ }
.ab-open-api-param-custom-type \{ }
.ab-open-api-required-star \{ }
.ab-open-api-param-example-title \{ }
.ab-open-api-param-example \{ }
.ab-open-api-param-description-title \{ }
.ab-open-api-param-description \{ }
.ab-open-api-input-wrap \{ }
.ab-open-api-array-input-wrap \{ }
.ab-open-api-schema-wrap \{ }
:::
**面包屑类**
:::BlockQuote
.ab-breadcrumb-item \{ } *每个面包屑标签*
.ab-breadcrumb-item-clickable \{ } *可点击以进行导航的面包屑*
.ab-breadcrumb-item-highlight \{ } *当前活动/高亮显示的面包屑*
.ab-breadcrumb-separator \{ } *面包屑之间的尖括号图标*
.ab-breadcrumbs-wrapper \{ } *整个面包屑栏的容器*
.ab-breadcrumb-ellipsis \{ } *当面包屑过多时显示的 "..."*
:::
深色模式会在 HTML 树的顶部添加一个 dark 类，您可以使用它来设置暗色模式样式。
例如，以下是在深色模式下将文本更改为红色的方法：
```css
```