CSS cơ bản trong Dash

Xây dựng Dashboard với Dash và Plotly

Alex Scriven

Data Scientist

CSS là gì?

 

  • Viết tắt của 'Cascading Style Sheets'
  • Điều khiển cách phần tử web hiển thị và sắp xếp

$$

  • Ta có thể điều khiển:
    • Thuộc tính văn bản (cỡ chữ, màu, kiểu)
    • Kích thước & hình dạng phần tử HTML
    • Vị trí đối tượng
Xây dựng Dashboard với Dash và Plotly

CSS trên web

Hầu hết trang web có tệp CSS;

  • Được tải khi trang tải
  • Khóa học này: dùng thuộc tính style thay thế

Ảnh chụp trang chủ Google với Chrome DevTools mở, cho thấy thẻ liên kết tới stylesheet. Mã có "<link type="text/css" rel=Stylesheet href=" và một liên kết tới tệp CSS sau href

Xây dựng Dashboard với Dash và Plotly

CSS trên phần tử HTML

 

CSS cũng có thể dùng trực tiếp trên phần tử HTML

  • Dùng thuộc tính style của thẻ
  • Nhận CSS dạng cặp khóa-giá trị
    • Cú pháp: "property:value; property:value;"

 

Ảnh chụp HTML từ bài học chương 1 tạo nhiều div kích thước khác nhau với màu nền. Minh họa dùng thuộc tính style trên HTML.

Xây dựng Dashboard với Dash và Plotly

Một chút CSS

 

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

 

Hình với tiêu đề đen "Welcome to the website!" và bên dưới, chữ đỏ lớn hơn "Enjoy your stay!"

Xây dựng Dashboard với Dash và Plotly

Chỉnh CSS trực tiếp

Ta có thể chỉnh CSS trực tiếp trên trang web đang chạy

  • Nhấp phải phần tử > chọn 'Inspect' > sửa giá trị CSS
  • Lưu ý: chỉ thay đổi cục bộ (mất khi tải lại)

Một gif trang chủ Google: logo được nhấp chuột phải, chọn 'inspect'. Công cụ DevTools mở ra. Thuộc tính width của ảnh được đặt 100 pixel, làm ảnh thu nhỏ ngay lập tức.

Xây dựng Dashboard với Dash và Plotly

CSS trong Dash

 

  • Đối số style của component Dash

    • Nhận CSS dạng dictionary

  • Mã trước đây trong một component Dash:

app.layout = [
  html.H1('Welcome to the website!'), 
  html.H2('Text',
  style={'font-size':'50px',
          'color':'red'})
]
Xây dựng Dashboard với Dash và Plotly

CSS cho màu sắc

 

CSS có thể đặt:

  • Màu nền của đối tượng (background-color)
  • Màu chữ (color)

 

Cả hai nhận chuỗi (vd: 'red') hoặc mã RGB (vd: 'rgb(0,0,255)' là màu xanh dương)

Bảng hai cột: cột trái tô màu, cột phải là mã RGB tương ứng. Có các ô tím, xanh lá, hồng đậm, xanh dương đậm với mã RGB bên cạnh.

Xây dựng Dashboard với Dash và Plotly

CSS cho kích thước

 

CSS đặt kích thước bằng thuộc tính width và height

app.layout = [
  # Thêm & đổi kích thước logo công ty
  html.Img(src=logo_link,
  style={'width':'250px', 'height':'250px'})
]
Xây dựng Dashboard với Dash và Plotly

Kích thước CSS theo phần trăm

 

app.layout = [
  # Thêm & đổi kích thước logo công ty
  html.Img(src=logo_link,
  style={'width':'50%', 'height':'50%'})
]
  • 50% kích thước của phần tử cha
Xây dựng Dashboard với Dash và Plotly

Ayo berlatih!

Xây dựng Dashboard với Dash và Plotly

Preparing Video For Download...