Web Style Sheets” Kavramı ve CSS (Cascading Style Sheets = Yığılmalı Stil Kağıtları):
CSS (ingilizce açılımı Cascading Style Sheets olan Türkçeye çevrildiğin de ise Yığılmalı Stil Kağıtları) bizi HTML’in kalıplaşmış olan stil etiketlerinden bir bakıma kurtarıyor.
CSS kod kümesi sayfamızın <head> </head> etiketleri arasına yazılıyor.
“Style Sheets” kavramı oldukça geniş bir teknolojik yaklaşımı ifade ediyor. Açıkçası CSS konusu bu teknolojinin sadece bir bölümünü oluşturmakta olup, Style Sheets teknolojisi çerçevesinde CSS’den başka XSL, XSLT, DSSL gibi biçimlendirme teknikleri ve dillerinden de söz etmek mümkündür.
Bir web sayfasının tasarım elemanları (stil öğeleri) denilince aklımıza şunlar geliyor;
- · arka planlar,
- · başlıklar, yazılar, fontlar,
- · tablolar,
- · listeler,
- · renkler ve görsel biçimler,
- · bağ renkleri, efektler,
- · imaj, katman vb. nesneler ve bunların sayfa üzerindeki yerleşimleri vs.
“Web Style Sheets” kavramı; işte bu tasarım elemanları üzerinde tam denetim sağlamak ve web dökümanlarının görünümlerini tayin etme işinde tasarımcılara ekstra güç kazandırmak için geliştirilmiş bir teknolojik yaklaşımı ifade etmektedir.
“Style Sheets” teknolojisini kullanmak demek, stiller belirlemek suretiyle belge biçimlendirmek demektir. Burada web dökümanlarının nasıl görüneceğini tayin etmek üzere geliştirilmiş bir takım kurallar sözkonusudur.
W3C’nin sitesinde “Web Style Sheets” teknolojisi çerçevesinde CSS, CSS1, CSS2, CSS3, CSS-P, XSL, XSLT, XPath, DSSL gibi kavramlardan sözedilmekle birlikte temelde 2 “Style Sheet” dili olduğu ifade edilmektedir.
Bunlar;
1- 1- CSS (Cascading Style Sheets),
2- 2- XSL (eXtensible Style Language)
Kursumuzda CSS konusunu ele alacağız.
CSS (Cascading Style Sheets)
CSS; çok daha etkin web sayfası biçimlendirebilmek amacıyla HTML’ye destek olması için oluşturulmuş bir işaretleme dilidir.
CSS’ye, herhangi bir web dökümanındaki yazı, başlık, font, arkaplan (background), imaj, katman, tablo ve liste gibi tasarım elemanlarının (stil öğelerinin) HTML kodlamasındaki uygulanış ve belirtim kurallarını belirleyen bir “web style sheets” teknolojisidir. Bu teknolojinin geliştirilmesindeki en temel amaç, HTML’nin sayfa biçimlendirme işlevlerini ekstra katkılarla arttırmak ve tasarımcıya çok daha etkin sayfa yapma imkanları sağlamaktır.
HTML belgesi (web sayfası) tarayıcıya yüklendiğinde yaptığımız stil tanımlamaları deyim yerindeyse üst üste yığılarak (basamaklandırılarak) ele alınır ve stil tanımlamasındaki yönteme bağlı olarak değerlendirilir. Yani belgedeki stil tanımlamalarının nerede yapıldığına bakılarak komutlar bir nevi basamaklandırmak suretiyle kademe kademe işlenir ve sayfa ekranda öyle gösterilir. Burada CSS komutlarının tarayıcılar tarafından işletilmesinde bir basamaklandırma modeli sözkonusudur. Bu nedenle stiller belirlemek suretiyle belge biçimlendirme olayına “Cascading Style Sheets” adı verilmiştir.
CSS’nin belli başlı faydaları;
- daha iyi sayfa kontrolu (tek dosya ile tüm sitenin kontrol edilebilmesi imkanları),
- - kolay renk yönetimi,
- - etkin kenar boşluğu denetimleri,
- - metin biçimlendirme, gölgeleme olanakları,
- - geçişler gibi görsel etkiler yaratabilme olanakları,
- - nesne konumlandırma kolaylıkları,
CSS Syntax Sözdizimi – Genel Kavramlar
CSS kodu oluşturmanın en basit yolu HTML kodlamasında olduğu gibi herhangi bir metin editöründe (NotePad vs.) elle kodlama yapmaktır. Çünkü harici CSS dosyaları (örneğin “style.css”) da dahil olmak üzere CSS kodları da HTML dökümanları gibi ASCII (plain-text) formatındadırlar. Bu nedenle CSS kodlamasını basit text editörleri yardımıyla yapılabilir.
HTML ile web sayfası tasarımcılığında CSS kavramı önemli yer tutar. Bu nedenle iyi bir tasarımcı olmanın koşullarından birisi de CSS konusunu bütün yönleriyle iyice öğrenmektir.
Bir style sheet ifadesi, selektör ve bildirim olmak üzere 2 ana kısma ayrılır. Bildirim kısmı da yine aynı şekilde özellik ve değer olmak 2 bölümden oluşur. Bu söylediklerimizi aşağıda şematik olarak görebiliriz.
En yalın CSS kodlaması;
HTML’de yer alan ve stili belirlenebilen yani “selector” kimliği taşıyan etiketlerden herhangi birisini, örneğin H (Heading) etiketini baz alarak CSS kodlamasındaki en yalın hali ifade eden bir kod satırı yazalım. Aşağıda bildirim ve selectör kavramları gösterilmektedir. SELEKTÖR (selector) bir style sheet bildiriminin ilk öğesine verilen isimdir. Selektör CSS’lerde hangi etiket ile ilgili işlem yapacağımız seçmeye yarar.
Bildirim (decleration) kısmının da kendi içinde ÖZELLİK ve DEĞER olarak 2 temel bileşene ayrıldığını görmekteyiz.
H1{color:blue}
color:özellik(property)
blue:değer (value)
Yukarıda belirttiğimiz CSS kod satırına (Style Sheet) dikkat ederseniz, temel bileşenlerin biraraya getirilmesinde kullandığımız { } ve : şeklindeki noktalama işaretlerinin de bu yalın haldeki kod satırının tamamlayıcı öğeleri olduğunu görürüz.
Burada birbir önemli husus da; <STYLE> … </STYLE> etiketi arasındaki stil ifadelerinde, değer ataması yapmak için yazılan sözcükler ” veya ‘ işaretleri ile sınırlandırılmaz. Örneğin aşağıdaki ifade yanlıştır. H1 {color: “blue”} CSS2 ile kurallaşan bu hususa özen göstermek gerekmektedir.
CSS kapsamında ayrıca tasarımcı tarafından oluşturulabilen ID (kimlik) ve CLASS (sınıf) türünde 2 tip selektör daha vardır.
11 Haziran 2010
#1
Nice fill someone in on and this post helped me alot in my college assignement. Say thank you you for your information.