CSS 在 Dash 中

CSS 与 Dash

CSS 是网页开发中的重要组成部分，它使开发者能够控制 HTML 内容的布局和外观。CSS 通过一套规则作用于特定的 HTML 元素，定义这些元素应该如何呈现。这些规则可以写在独立的 CSS 文件中，也可以直接嵌入 HTML 文档中，使用 style 属性。

CSS 提供了丰富的样式选项，包括字体大小与样式、颜色、间距和布局。它还允许开发者为网页添加动画和其他视觉效果。通过将网站的内容层与表现层分离，CSS 使得修改网站外观时无需影响底层内容，从而更加便捷。

CSS 的一个关键特性是其级联（cascading）机制，这意味着样式按照特定顺序应用，后续规则会覆盖先前的规则。这为网页最终外观提供了更大的灵活性和控制力。此外，CSS 支持媒体查询（media queries），使开发者可以根据不同设备或屏幕尺寸指定不同的样式。

尽管 CSS 可能较为复杂，需要大量学习才能掌握，但网上有许多资源可以帮助开发者入门。掌握 CSS 后，开发者不仅能构建功能完善的网站，还能创造出视觉美观且易于使用的界面。

在 Plotly Dash 生态系统中，CSS 在定义应用程序的外观和布局方面发挥着重要作用。开发者可以使用 CSS 自定义图表、表格、文本等单个组件的样式，以及整个应用的布局。

例如，开发者可以使用 CSS 调整图表中文本的字体大小和颜色，或为仪表板添加自定义背景色。他们还可以利用 CSS 创建响应式布局，使其适配不同屏幕尺寸，或为应用添加动画及其他视觉效果。

虽然 Plotly Dash 提供了许多预构建的组件和样式，开发者也可以编写自己的自定义 CSS，以实现期望的视觉风格。结合 CSS 与其他 Web 技术，开发者可以借助 Plotly Dash 构建强大且视觉吸引力强的数据可视化应用。

为 Dash 应用添加 CSS

在 Dash 中添加 CSS 有两种方式：

1. 使用内联 CSS（在 HTML 核心组件中作为 style 参数）：

   • 这种方式适合快速原型设计，但建议明确区分 CSS 和 HTML 的位置。因此，在 Web 开发领域，通常推荐使用第二种方式。

2. 使用外部样式表：

   • 本课程将主要采用这种方式。我们可以在实例化 JupyterDash 应用时传入 external_stylesheets 参数。这种方法通常能带来更整洁、更少出错的代码。

下面我们分别展示这两种添加 CSS 的方式示例：

内联 CSS

我们在课程前面部分已经见过一些例子，这里再提供一个内联 CSS 的示例：我们希望更改 div 组件的背景颜色。可以使用以下代码：

在此代码示例中，我们使用 JupyterDash 创建了一个 Dash 应用，并展示了如何使用 CSS 来美化 Dash 应用。代码的关键部分如下：

• 我们创建了一个简单的 Dash 应用，未引入任何外部样式表。
• 应用布局由一个 html.Div 组件构成，包裹着一个 html.H1 组件和另一个 html.Div 组件。
• 为了应用内联 CSS，我们使用了 html.Div 组件的 style 属性。此处我们将背景色设置为青绿色。
• style 属性接受一个包含 CSS 属性及其对应值的字典，便于灵活定制组件的外观。
• 最后，我们通过 run_server 方法运行应用，并开启调试模式。

执行此代码后，我们将得到一个基础的 Dash 应用，演示了如何通过内联 CSS 为组件添加样式，使应用更具视觉吸引力。

外部样式表

我们可以自行编写基于 CSS 语法的外部样式表文件（.css），也可以选择使用由专业网页开发者基于现代 UI/UX 设计原则制作的现成样式表。本课程主要采用后者。以下是链接一个流行的 BOOTSTRAP 样式表的示例代码。要使用这些样式表，需确保已导入 dash_bootstrap_components 库。

在此代码示例中，我们使用 JupyterDash 创建一个 Dash 应用，并重点展示如何使用外部样式表来美化应用。关键部分如下：

• 除了常规导入外，我们还导入了 dash_bootstrap_components 并命名为 dbc。
• 不再使用内联 CSS，而是通过 JupyterDash 实例化应用，并将 external_stylesheets 属性设置为 Bootstrap 主题，使用 dbc.themes.BOOTSTRAP。
• 应用布局由一个 html.Div 组件构成，包裹着一个 html.H1 组件和一个 html.P 组件。
• 通过使用外部样式表（此处为 Bootstrap 主题），我们无需内联 CSS 即可为组件应用一致且美观的样式。你可以明显看出段落文字的字体样式与前一个示例的不同。
• 最后，我们通过 run_server 方法运行应用，并开启调试模式。

执行此代码后，我们将得到一个演示如何使用外部样式表来美化组件的 Dash 应用，使整体界面风格统一且视觉效果更佳。

两者结合

为了直观对比上述两种方式的效果，现在我们将在下方的笔记本中将两个示例并列展示，以便对照观察。