Css Baliklama Giris

Bu rehberde adım adım CSS in genel fonksiyonlarını ve işleyişini anlamaya çalışacağız. Testleri yaparken Firefox, Opera veya Safari gibi modern browserlar kullanmanızı tavsiye ederiz.. Gerçi daha önce CSS kullanmayanlar için giriş olarak bu yazının okunması iyi olacaktır w3schools introduction to CSS ama bence bu yazıyla da konuya balıklama dalabilirsiniz.

Görevimiz; istediğimiz siteyi dizayn etmek.

İlk ihtiyacımız olan dizaynı oluşturan yapısal elemanları tanımlamak. Dizaynımızın temeli div tagı ile tanımlanan dikdörtgenler tarafından oluşturulur. Aşağıdaki resimde kullanacağımız dikdörtgenlerin yerleşimi görülmektedir;

Burada görüldüğü gibi 5 adet temel dikdörtgeni tanımlamamız gerekiyor, bunlar;

# Header
Width: 760px
Height: 50px

# Content
Width: 760px
Height: 150px

# Sidebar
Width: 280px
Height: içeriğe göre değişecek.

# Footer
Width: 760px
Height: 66px

Ayrıca sitemizin browserda ortalanmış olarak görünmesini istiyoruz, şimdi başlayabiliriz. Herhangi bir web sitesine başlarken temel HTML sayfası olarak aşağıdaki kodu kullanabiliriz. Bunu HTML programları yardımıyla yada notepad ile yapabilirsiniz.

Bu dosyayı index.html olarak kaydedin ve web sitenizin kök dizinine (root) kopyalayın. Ek olarak yine root altında css ve images olarak iki tane klasör oluşturun.

İlk yapmamız gereken tüm sayfanın genişliğini ayarlamak. Bizim sitemizin genişliği sabit 760px olacak. Daha önce bahsettiğimiz beş tane dikdörtgen bu tanımlayacağımız genişliğin içersinde kalacak. Bunun için body tagının içersine id=”page-container” olarak bir div tanımlıyoruz. Sayfamızda şu şekilde yer alacak:

Bu tanımladığımız dikdörtgenin özelliklerini CSS dosyamızda saklayacağız, bunun için master.css adında boş bir bir text dosyası oluşturup bunu daha önce root altında oluşturduğumuz /css/ klasörüne atıyoruz.

HTML dosyamızdaki id=… şeklindeki adlandırmalar CSS dosyasında # ile başlayarak tanımlanırlar, HTML dosyamızda class=… şeklindeki sınıflandırmalar ise CSS dosyamızda . ile başlayarak tanımlanır. Aralarındaki temel fark bir id özel bir tanımlamadır ve HMTL dosyasında o id ‘den yalnızca bir tane bulunmalıdır, class ise genel bir sınıflandırmadır ve hemen hemen her tag için kullanılabilir. Şimdi, bizim sayfamızda id=”page-container” olarak belirtilen özel diktörkgen için CSS dosyasına yazmamız gereken kod #page-container { } şeklinde olacaktır. { } arasına tanımlamalarımızı yazacağız ve birbirinden ; ile ayıracağız. Şu şekilde;

 

Genişliği 760px olarak belirttik ve arkaplanı kırmızı yaptık, height tanımını sabit olarak yapmıyoruz çünkü bu değer içeriğe göre değişecek.

Browserlarda html ve body taglarının varsayılan margin ve/veya padding değeri 8px olarak belirlenir, bu da ilk yazımızın tepeden 8px aşağıda görünmesine yol açar. Bunun için html ve body taglarının margin ve padding değerlerini “0″ olarak CSS dosyasında tanımlıyoruz;



Burada teker teker yazmak yerine “,” kullanarak aynı tanımı iki değişik tag için yapmış olduk.
HTML dosyamıza dönerek 5 temel dikdörtgenimizi temel dikdörtgenimizin içersine yerleştirecek olursak;