Dash 中的 CSS 基础

使用 Dash 和 Plotly 构建仪表板

Alex Scriven

Data Scientist

什么是 CSS？

 

  • 全称为"层叠样式表"（Cascading Style Sheets）
  • 控制网页元素的外观与布局

$$

  • 可控制：
    • 文本属性（字号、颜色、样式）
    • HTML 元素的大小与形状
    • 对象的摆放位置
使用 Dash 和 Plotly 构建仪表板

网页上的 CSS

大多数网站都有 CSS 文件：

  • 页面加载时读取
  • 本课程：改用 style 属性

一张 Google 主页与 Chrome 开发者工具的截图，显示有一个指向样式表的链接标签。代码包含 "<link type="text/css" rel=Stylesheet href=" 以及指向 CSS 文件位置的链接。

使用 Dash 和 Plotly 构建仪表板

HTML 元素上的 CSS

 

CSS 也可用于单个 HTML 元素

  • 使用标签的 style 属性
  • 接受键值对形式的 CSS
    • 语句形如 "property:value; property:value;"

 

第 1 章课程中的 HTML 截图，创建了不同尺寸和背景色的多个 div，演示了 HTML 上使用 style 属性。

使用 Dash 和 Plotly 构建仪表板

一些 CSS 样式示例

 

<h1>Welcome to the website!</h1>
<h2 style="font-size:50px;color:red">
      Enjoy your stay!
</h2>

 

一张图片：上方黑色标题"Welcome to the website!"，下方为更大字号的红色文字"Enjoy your stay!"

使用 Dash 和 Plotly 构建仪表板

编辑在线 CSS

我们可以在在线网站上临时编辑 CSS

  • 右键元素 > 选择"检查" > 编辑某个 CSS 值
  • 注意：仅本地更改（刷新后消失）

一个动图：在 Google 主页上右键单击徽标，在下拉菜单中选择"检查"。底部打开开发者工具，将图片的 width 设置为 100 像素，图像立即变小。

使用 Dash 和 Plotly 构建仪表板

Dash 中的 CSS

 

  • Dash 组件的 style 参数

    • 接受字典形式的 CSS

  • 之前在 Dash 组件中的代码：

app.layout = [
  html.H1('Welcome to the website!'), 
  html.H2('Text',
  style={'font-size':'50px',
          'color':'red'})
]
使用 Dash 和 Plotly 构建仪表板

颜色相关的 CSS

 

CSS 可用于设置：

  • 对象的背景色（background-color）
  • 文本颜色（color）

 

两者均接受字符串（如 'red'）或 RGB 代码（如 'rgb(0,0,255)' 表示蓝色）

一个两列表格。左列填充为不同颜色，右列是对应的 RGB 代码；包含紫色、绿色、深粉色和深蓝色及其代码。

使用 Dash 和 Plotly 构建仪表板

尺寸相关的 CSS

 

CSS 可通过 width 和 height 设置尺寸

app.layout = [
  # 添加并调整公司徽标大小
  html.Img(src=logo_link,
  style={'width':'250px', 'height':'250px'})
]
使用 Dash 和 Plotly 构建仪表板

按百分比设置尺寸的 CSS

 

app.layout = [
  # 添加并调整公司徽标大小
  html.Img(src=logo_link,
  style={'width':'50%', 'height':'50%'})
]
  • 相当于父元素尺寸的 50%
使用 Dash 和 Plotly 构建仪表板

开始练习吧！

使用 Dash 和 Plotly 构建仪表板

Preparing Video For Download...