CSS เบื้องต้นใน Dash

การสร้างแดชบอร์ดด้วย Dash และ Plotly

Alex Scriven

Data Scientist

CSS คืออะไร?

ย่อมาจาก 'Cascading Style Sheets'
ควบคุมรูปลักษณ์และการจัดวางองค์ประกอบในหน้าเว็บ

สิ่งที่ควบคุมได้:
- คุณสมบัติข้อความ (ขนาดฟอนต์ สี และสไตล์)
- ขนาดและรูปทรงของ HTML element
- ตำแหน่งของออบเจกต์

CSS บนเว็บ

เว็บไซต์ส่วนใหญ่มีไฟล์ CSS;

โหลดพร้อมกับหน้าเว็บ
คอร์สนี้ใช้ property style แทน

ภาพหน้าจอหน้าแรกของ Google ที่เปิด Chrome Developer Tools ไว้ โดยแสดง tag ที่เชื่อมโยงไปยัง stylesheet โค้ดระบุว่า "<link type="text/css" rel=Stylesheet href=" พร้อมลิงก์หลัง href ที่ชี้ไปยังไฟล์ CSS

CSS บน HTML element

CSS ใช้กับ HTML element โดยตรงได้

ใช้ property style ของ tag
รับค่า CSS ในรูปแบบ key-value pairs
- คำสั่งคือ "property:value; property:value;"

ภาพหน้าจอโค้ด HTML จากบทที่ 1 ที่สร้าง div หลายขนาดพร้อมสีพื้นหลัง แสดงการใช้ style property บน HTML element

ตัวอย่างการจัดสไตล์ด้วย 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!"

แก้ไข CSS แบบ live

แก้ไข CSS บนเว็บไซต์จริงได้

คลิกขวาที่ element > เลือก 'Inspect' > แก้ไขค่า CSS
หมายเหตุ — เป็นการเปลี่ยนแปลงเฉพาะในเครื่อง (หายไปเมื่อรีเฟรช)

ภาพ gif ของหน้าแรก Google ที่คลิกขวาที่โลโก้แล้วเลือก 'inspect' จาก dropdown เพื่อเปิด Google Developer Tools ด้านล่าง จากนั้นตั้งค่า width ของรูปเป็น 100 pixels ทำให้ภาพเล็กลงทันที

CSS ใน Dash

argument style ของ Dash component
- รับค่า CSS เป็น dictionary
โค้ดเดิมในรูปแบบ Dash component:

app.layout = [
  html.H1('Welcome to the website!'), 
  html.H2('Text',
  style={'font-size':'50px',
          'color':'red'})
]

CSS สำหรับสี

CSS ใช้กำหนดได้:

สีพื้นหลังของออบเจกต์ (background-color)
สีข้อความ (color)

ทั้งสองวิธีรับค่าเป็น string (เช่น 'red') หรือ RGB code (เช่น 'rgb(0,0,255)' คือสีน้ำเงิน!)

ตารางสองคอลัมน์ คอลัมน์ซ้ายเติมสีต่างๆ และคอลัมน์ขวาแสดง RGB code ที่สอดคล้อง มีช่องสีม่วง สีเขียว สีชมพูเข้ม และสีน้ำเงินเข้ม พร้อม RGB code ในช่องถัดไป

CSS สำหรับขนาด

CSS กำหนดขนาดได้ผ่าน property width และ height

app.layout = [
  # Add & resize the company logo
  html.Img(src=logo_link,
  style={'width':'250px', 'height':'250px'})
]

ขนาด CSS แบบเปอร์เซ็นต์

app.layout = [
  # Add & resize the company logo
  html.Img(src=logo_link,
  style={'width':'50%', 'height':'50%'})
]

50% ของขนาด parent element

มาฝึกกันเถอะ!

การสร้างแดชบอร์ดด้วย Dash และ Plotly