CSS - Güzelleştirin
Last updated
Last updated
Blogumuz hala epey çirkin gözüküyor, değil mi? Güzelleştirme zamanı! Bunun için CSS kullanacağız.
Cascading Style Sheets (yani stil şablonu, kısaca CSS) bir işaretleme dili (örneğin HTML) ile yazılmış bir web sitesinin görünüm ve biçimini tanımlamakta kullanılan bir dildir. Bunu, web sayfamızın bir tür makyajı gibi düşünün ;)
Fakat tekrar sıfırdan başlamak istemiyoruz, değil mi? Bir kez daha, programcıların internette ücretsiz sundukları bir şeyi kullanacağız. Bilirsiniz, tekerleği yeniden icat etmek pek eğlenceli değil.
Bootstrap HTML and CSS tabanlı çok güzel websiteleri geliştirmek için en yaygın olarak kullanılan çözümlerden biridir https://getbootstrap.com/
Twitter yazılımcıları tarafından geliştirilmeye başlanmış ve şu anda dünyanın her yerinden gönüllüler tarafından geliştirilmektedir!
Bootstrap yüklemek için .html
uzantılı dosyamızı kod düzenleyicisinde açalım ve <head>
bölümüne şunları ekleyelim:
Bu satırlar projeye yeni dosya eklemez. Ancak İnternet'te var olan dosyalara işaret eder. Şimdi websitenizi açın ve sayfayı yenileyin. İşte oldu!
Şimdiden daha güzel gözüküyor!
Son olarak statik dosyalar diye bahsettiğimiz şeylere daha yakından bakalım. Statik dosyalar, tüm CSS dosyaları ve resimlerindir. İçerikleri istek bağlamından (request context) bağımsızdır ve her kullanıcı için aynıdır.
Django dahili "admin" uygulaması için statik dosyaları nerede bulacağını biliyor. Şimdi sadece kendi blog
uygulamamız için bazı statik dosyalar eklememiz gerekiyor.
Bunu blog uygulamamızın içine static
isimli bir klasör oluşturarak yapacağız:
Django otomatik olarak uygulama klasörlerinizdeki "static" adlı klasörleri bulur. Böylece bunların içerikleri statik dosya olarak kullanabilir.
Şimdi web sayfana kendi stilini eklemen için bir CSS dosyası oluşturalım. static
klasörü içinde css
adlı yeni bir klasör oluştur. Şimdi de css
klasörü içinde blog.css
adlı yeni bir dosya oluşturalım. Hazır mısınız?
Şimdi CSS yazma zamanı! blog/static/css/blog.css
dosyasını kod editöründe açın.
Burada CSS'yi özelleştirme ve öğrenmeyle ilgili çok derinlemesine gidemeyeceğiz. Daha fazla bilgi edinmek isterseniz, bu sayfanın sonunda ücretsiz CSS kursu için bir tavsiye var.
Ama, biraz da yapalım. Acaba başlığımızın rengini mi değiştirsek? Bilgisayarlar renkleri anlamak için özel kodlar kullanır. Bu kodlar #
ile başlar ve 6 harf(A-F) ve sayıyla(0-9) devam eder. Örneğin, mavinin renk kodu #0000FF
dur. Birçok renk için renk kodlarını buradan bulabilirsiniz: http://www.colorpicker.com/. Ayrıca tanımlı renkleri de kullanabilirsin, red
(kırmızı) ve green
(yeşil) gibi.
blog/static/css/blog.css
dosyanıza şu kodu eklemelisiniz:
h1 a
bir CSS seçicisidir (selector). Bu, stillerimizi h1
öğesi içerisindeki a
öğelerine uyguladığımız anlamına geliyor. Yani <h1><a href="">bağlantı</a></h1>
gibi bir öğemiz olduğunda, ona h1 a
stilimiz uygulanıyor. Bu durumda, rengi #FCA205
yani turuncu yapmasını söylüyoruz. Ya da buraya kendi istediğin rengi koyabilirsin!
Bir CSS dosyasında, HTML dosyasındaki öğeler için stil belirleriz. Öğeleri tanımlamanın ilk yolu öğe adıdır. Bunları HTML bölümünden etiket olarak hatırlıyor olabilirsiniz. Bunların hepsi öğe adına örnektir: a
, h1
ve body
. Öğeleri aynı zamanda class
ve id
öznitelikleri ile tanımlarız. Sınıf ve id (kimlik), bir elemente senin tarafından verilen isimlerdir. Sınıflar bir öğe grubunu tanımlar, id'ler ise belirli bir öğeye işaret ederler. Örneğin şu aşağıdaki etiket CSS tarafından, a
etiket adı, external_link
class'ı ya da link_to_wiki_page
id'si kullanılarak tanımlanabilir:
CSS hakkında daha fazla bilgi edinmek için CSS Selectors at w3schools u okuyabilirsin.
Sonrasında, ayrıca HTML şablonumuza (template) birtakım CSS eklemeleri yaptığımızı bildirmemiz gerekiyor. blog/templates/blog/post_list.html
dosyasını açıp en başına şu satırı ekleyelim:
Burada sadece statik dosya ekliyoruz :) <head>
ve </head>
etiketleri arasına, bootstrap linklerinden sonra, şu satırı ekleyelim:
Tarayıcı, dosyaları verilen sırada okuyor. O yüzden doğru yerde olduğundan emin olmalıyız. Aksi takdirde dosyadaki kod, Bootstrap dosyası tarafından üzerine yazılabilir. Az evvel şablonumuza (template) CSS dosyamızın nerede olduğunu söylemiş olduk.
Şimdi dosyanız şöyle olmalı:
Tamamdır, dosyayı kaydedip sayfayı yenileyebilirsiniz.
Güzel! Şimdi de sitemizi biraz rahatlatıp sol kenar boşluğunu arttırsak mı? Hadi deneyelim!
Bunu CSS dosyana ekleyip kaydet ve bak bakalım! Nasıl da oldu!
Belki de başlığımızın yazı tipini özelleştirebiliriz? Aşağıdaki satırı blog/templates/blog/post_list.html
dosyasının içinde <head>
bölümüne yapıştırın:
Daha önce yaptığımız gibi, sıralamayı ve yerini kontrol edelim blog/static/css/blog.css
den önce olmalı. Bu satır Google Fonts'tan Lobster adlı bir font yükler (https://www.google.com/fonts).
blog/static/css/blog.css
CSS dosyasında h1 isimli
tanımlama bölümünü bulalım ( {
ve }
sembolleri arasındaki kod). font-family: 'Lobster';
satırını parantezler arasına kopyalayıp sayfayı yenileyelim:
Harika!
Yukarıda bahsettiğimiz üzere, CSS'te class (sınıf) diye bir kavram var. Class'lar, temel olarak HTML kodunuzun bir kısmına isim vermenize yarar ve diğer kısımların stilini değiştirmeden yalnızca o kısmın stilini değiştirmenizi sağlar. Bu süper yararlı olabilir! Çok farklı şeyler yapan iki div'iniz var diyelim (örneğin biri başlık diğeri gönderinin metni). Class, farklı görünmelerini sağlamana yardımcı olur.
Devam edelim ve HTML kodumuzun bir kısmına isim verelim. Başlığı içeren div
'e page-header
isimli bir class ekleyelim:
Şimdi de gönderi metnini içeren div
'e post
isimli bir sınıf ekleyelim.
Şimdi farklı seçicilere (selectors) bildirim (deklarasyon) blokları ekleyeceğiz. .
ile başlayan seçiciler sınıflara işaret eder. Web'de, aşağıdaki kodu anlamanıza yardımcı olacak pek çok güzel CSS öğreticisi ve açıklama mevcut. Şimdilik sadece bu kodu kopyalayıp blog/static/css/blog.css
dosyamıza yapıştıralım:
Sonra, blog gönderilerini gösteren HTML kodunu, class bildirimleri içine alın. <0>blog/templates/blog/post_list.html</0> içindeki şu kısmı,
bununla değiştirelim:
Bu dosyaları kaydedin ve web sayfanızı yenileyin.
Yaşasın! Harika görünüyor değil mi? Şimdi yapıştırdığımız koda bakıp CSS tarafından kullanılan ve HTML eklenmiş olan nesneleri bulalım. Tarihi turkuaz rengine çevirmek için nereyi değiştirmen gerekir?
CSS ile biraz oynamaktan çekinme ve birkaç şeyi değiştirmeye calış. CSS ile oynamak neyin neyi etkilediğini anlamak için çok faydalı. Bir şeyleri bozarsan dert etme, her zaman geri alabilirsin!
Ücretsiz Codeacademy HTML & CSS kursunu izlemeni gerçekten öneririz. Web sitelerini CSS'le güzelleştirmeyi iyice öğrenmene yardımcı olabilir.
Sonraki bölüm için hazır mısın?! :)