Css Dersleri: Nesne Özelliklerini Genelleştirme

24 Ağustos 2008 Yorum Yok

Sayfa tasarımında CSS’den yararlanacaksak style=”…” parametresini kullanmamız şart değil,sayfa özelliklerini <style>…</style> kodları arasında da tanımlayabiliriz.<style>…</style> kodları <head>…<head> bölümünde; bir fonksiyonmuşcasına yer alır. (Fonksiyonları JavaScript ve VBScript derslerinde ayrıntılı olarak göreceğiz.

CSS kullanımını anlatabilmek için aşağıdaki iki örneği inceleyelim. İlk örnekte style=”…” parametresi kullanılıyor. İkincisinde ise <style>…</style> kodları kullanılmaktadır.

aktadır.

Bu uygulamanın aynısını <style> koduyla aşağıdaki şekilde yapabiliriz:

Şimdi geldik “N’aptık?” köşesine. İlk uygulamada <p>, <h1> ve <h4> kodlarını style=”…” parametresi ile bu kodlara bazı özellikler atandı. Örneğin <p>…</p> arasındaki metinin sayfanın iki yanına yaslanması, renginin bordo olması ve font büyüklüğünün 12pt olması sağlandı. İkinci uygulamada ise her koda style=”…” parametresi atamak yerine, tüm stil özellikleri kodların başında ;<head>…</head> bölümünde, <style>…</style> kodları arasında kod kod tanımlanmıştır. Bu iki uygulama ile aynı sonuca ulaşıyoruz. İlk uygulamanın daha kısa sürdüğü görünüyor, ancak bunun nedeni stil özellikleri tanımlanan kodların birer tane olması. Mesela sayfada <p> kodu çok sayıda yeralsaydı, CSS ile kod sayfası çok daha kısa olacaktı. Bununla birlikte, stil özelliklerini değiştirmek istediğimizde hiç zorlanmayacağız. Ayrıca hata yapma olasılığımız CSS genelleştirmesi ile azalacaktır.

CSS’nin yapısı; uygulamamızdan da görüleceği üzere, şöyledir: KOD {ÖZELLİK: değer}. Eğer koda birden fazla özellik atayacaksak, tıpkı style=”…” parametresinde olduğu gibi stil özellikleri arasına “;” işareti konur: KOD {ÖZELLİK1: değer1; ÖZELLİK2: değer2; ÖZELLİK3: değer3} gibi. Stil özelliklerini yanyana yazabileceğiniz gibi, uygulamada olduğu gibi altalta da yazabilirsiniz:

KOD
{
ÖZELLİK1:değer1;
ÖZELLİK2:değer2;
ÖZELLİK3:değer3
}

Ayrıca aynı stil özelliklerini taşıyacak olan kodları gruplayabilirsiniz: