Geçtiğimiz iki sayıda HTML'den bahsetmiştik. Web sayfaları hazırlamak için kullanılan (X)HTML, bazı durumlarda yetersiz kalmaktadır. Bunun için geliştirilen CSS (Cascading Style Sheets - Yığmalı Stil Sayfaları) HTML'le beraber kullanılarak biçimlendirme konusunda eksik kaldığı yönleri tamamlar. Bu yazımızda CSS'in ayrıntılarına değineceğiz.
Sayfalarınıza CSS ile stil verirken kullanabileceğiniz 3 temel kodlama şekli vardır:
<p style="color: red;">kırmızı</p><style>
p{ color: red; }
</style><link rel="stylesheet" href="stil.css" type="text/css" />CSS kodları, temel olarak üç kısımdan oluşur. Sayfa içinde hangi etiketleri değiştireceğinizi gösteren "seçiciler", bunların içinde değiştirmeyi istediğiniz "özellikler" ve bu özelliklere vermek istediğiniz "değerler". Her seçiciden sonra küme parantezi açılır ve bu küme parantezi kapatılana kadar, özellik-değer çiftleri, aralarında ":", sonlarında ";" olacak şekilde ifade edilir. Küme parantezlerini kapamadan önce noktalı virgül kullanılmayabilir. Beyaz (white space) karakterlerin önemi yoktur. Yani boşluk, tab ve satır başı karakterleri dikkate alınmaz. /* */ işaretleri arasına yorum ve açıklamalar yazılabilir. Bunlar, tarayıcı tarafından dikkate alınmaz. Buna göre örnek CSS yapısı şöyledir:
secici1
{
ozellik11: deger11;
ozellik12: deger12;
}
/* Yorum
Satırları */
secici2, secici3
{
ozellik21: deger21;
ozellik22: deger22;
ozellik23: deger23
}
Hangi etiketleri biçimlendirmek istediğiniz seçiciler çeşitli formlarda ifade edilebilir. Yukardaki örnekteki gibi aynı özellikleri vermek istediğiniz birden fazla seçici, aralarına virgül koyarak yazılabilir. Aşağıda CSS'teki seçici türleri gösterilmiştir:
body {background-color:purple;}
body etiketinin arkaplan rengini mor yapar.
h1.patates {font-family:Verdana;}
sadece sınıfı patates olan h1'lerin fontunu Verdana yapar.
img#patates {border:2px;}
sadece id'si patates olan resimlerin etrafına 2px kalınlığında border çeker.
*.patates {color:yellow;}
.patlican {color:yellow;}
sınıfı patates olan bütün etiketlerin yazı rengini sarı yapacaktır. Bu işaretin kullanılması isteğe bağlıdır. Yani ikinci örnek de ilk örnekteki gibi tüm etiketlere etki eder ve sınıfı patlican olan tüm etiketlerin yazı rengini sarı yapar.
div.patates h1 {font-size:20;}
sınıfı patates olan div'in altındaki h1'lerin font büyüklüğünü 20 yapar.
h1 + p {color:yellow;}
sadece h1 etiketinin arkasından gelen paragraflardaki yazı renginin sarı olmasını sağlayacaktır.
a[href="http://e-bergi.com"] { color:red; }
sadece adresi "http://e-bergi.com" olan linklerin rengini kırmızı yapacaktır.
a:link { color: "#0000ff" } /* Standart linkler */
a:visited { color: "#ff00ff" } /* Ziyaret edilmiş linkler */
a:active { color: "#ff0000" } /* Aktif linkler */
a:hover { color: "#00ff00" } /* Fare ile üzerine gelinen nesneler */
li:first-child { font-size: 20px } /* Bir etiketin, üst etiket içindeki ilk örneği */
p:first-line { font-weight: bold } /* Bir paragrafın ilk satırı */
p:first-letter { font-weight: bold } /* Bir paragrafın ilk harfi */
Bu yazımızda CSS'in tüm özelliklerine değinmeden, sadece metin biçimlendirme özelliklerini kullanarak pratik yapalım. Sonraki yazımızda, CSS'in ayrıntılarını inceleyebiliriz. CSS'te metin biçimlendirme için aşağıdaki özellikleri kullanabiliriz:
Metin biçimlendirmeyle ilgili özelliklerin etkilerini görmek için metin özellikleri sayfasına bakabilirsiniz. Dosya açıkken sağ tıklayıp "sayfa kaynağını göster" diyerek kodunu inceleyebileceğinizi unutmayın. Yazı dizimize önümüzdeki ay arkaplan, font, çerçeve gibi çeşitli konulardaki özelliklere değinerek devam edeceğiz...
| Yazarın Üslubunu Beğendiniz mi?: | ||
| Yazının İçeriği Yeterli mi?: | ||
| Konu İlginizi Çekti mi?: |
Bu derginin içeriği, Creative Commons lisansı ile korunmaktadır.
Kaynak göstermek ve link vermek şartıyla ticari olmayan amaçlarla yazılarımızı kullanabilirsiniz.
©2007-2008 ODTÜ Bilgisayar Topluluğu