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 章課程中建立不同大小且有背景色的多個 div 的 HTML 截圖，示範在 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

  • 右鍵點元素 > 選擇「Inspect」> 編輯某個 CSS 值
  • 注意：只在本機生效（重新整理就消失）

一段 Google 首頁的動圖：在標誌上按右鍵並選擇 inspect，底部開啟開發者工具。將圖片的 width 樣式設為 100 像素，影像立刻縮小。

使用 Dash 與 Plotly 建立儀表板

Dash 中的 CSS

 

  • Dash 元件的 style 參數

    • 接受以 dictionary 撰寫的 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 代碼。包含紫色、綠色、深粉紅與深藍色的格子及其 RGB。

使用 Dash 與 Plotly 建立儀表板

CSS 設定大小

 

CSS 可用 width 與 height 設定大小

app.layout = [
  # Add & resize the company logo
  html.Img(src=logo_link,
  style={'width':'250px', 'height':'250px'})
]
使用 Dash 與 Plotly 建立儀表板

以百分比設定大小

 

app.layout = [
  # Add & resize the company logo
  html.Img(src=logo_link,
  style={'width':'50%', 'height':'50%'})
]
  • 佔「父元素」大小的 50%
使用 Dash 與 Plotly 建立儀表板

一起來練習吧！

使用 Dash 與 Plotly 建立儀表板

Preparing Video For Download...