Dash'te CSS Temelleri

Dash ve Plotly ile Paneller Oluşturma

Alex Scriven

Data Scientist

CSS nedir?

'Basamaklı Stil Sayfaları' anlamına gelir
Web sayfası öğelerinin görünümü ve düzenini kontrol eder

Şunları kontrol edebiliriz:
- Metin özellikleri (yazı tipi boyutu, rengi ve stili)
- HTML öğelerinin boyutu ve şekli
- Nesnelerin yerleşimi

Web’de CSS

Web sitelerinin çoğunda CSS dosyaları vardır;

Sayfa yüklenirken okunurlar
Bu kursta: yerine style özelliği

Chrome geliştirici araçları açık Google ana sayfası ekran görüntüsü; bir stil sayfasına bağlantı veren bir etiket olduğu görülüyor. Kodda "<link type="text/css" rel=Stylesheet href=" ve href sonrası CSS dosyası konumuna giden bir link notu var

HTML öğelerinde CSS

CSS bir HTML öğesinde de kullanılabilir

Etiketin style özelliğini kullanın
Anahtar-değer çiftleri olarak yazılmış CSS’i kabul eder
- İfadeler "property:value; property:value;" şeklindedir

1. bölümdeki bir dersten, farklı boyutlarda ve arka plan renklerinde birkaç div oluşturan HTML ekran görüntüsü. HTML üzerinde style özelliğinin kullanımını gösteriyor.

Biraz CSS stillendirme

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

Siyah "Welcome to the website!" başlığı ve altında, kırmızı ve daha büyük yazıyla "Enjoy your stay!" metni.

Canlı CSS düzenleme

Canlı bir web sitesinde bazı CSS'leri düzenleyebiliriz

Bir öğeye sağ tıkla > 'İncele'yi seç > bir CSS değerini düzenle
Not: Yalnızca yerel değişiklik (yenileyince kaybolur)

Google'ın ana sayfasında logoya sağ tıklandığı ve açılan menüden 'inspect' seçildiği bir gif. Bu, altta Google Geliştirici Araçlarını açıyor. Burada görselin width stili 100 piksele ayarlanıyor ve resim anında küçülüyor.

Dash'te CSS

Dash bileşenlerinde style argümanı
- CSS'i sözlük olarak alır
Önceki bir Dash bileşeni kodu:

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

Renklendirme için CSS

CSS şunları ayarlamak için kullanılabilir:

Bir nesnenin arka plan rengi (background-color)
Metin rengi (color)

Her iki yöntem de dizeleri (örn. 'red') veya RGB kodlarını kabul eder (örn. 'rgb(0,0,255)' mavi!)

İki sütunlu bir tablo: solda renkler, sağda ilgili RGB kodları. Mor, yeşil, koyu pembe ve koyu mavi hücreler ile yanındaki RGB kodları.

Boyut için CSS

CSS, width ve height ile boyutu ayarlayabilir

app.layout = [
  # Şirket logosunu ekle ve yeniden boyutlandır
  html.Img(src=logo_link,
  style={'width':'250px', 'height':'250px'})
]

Yüzde olarak CSS boyutu

app.layout = [
  # Şirket logosunu ekle ve yeniden boyutlandır
  html.Img(src=logo_link,
  style={'width':'50%', 'height':'50%'})
]

Üst öğe boyutunun %50’si

Ayo berlatih!

Dash ve Plotly ile Paneller Oluşturma