Selektörler (seçiciler):
Bir style sheet ifadesindeki ilk öğelere “selektör” adı verilir. Bu bir HTML etiketi olabileceği gibi, SINIF (class) veya KİMLİK (ID) niteliğinde tasarımcı tarafından tanımlanabilen selektörler de olabilir. Eğer ilk öğe bir HTML etiketi ise bu “HTML Selektörü” olarak adlandırılır. Şimdi bu selektörleri içeren style sheet ifadelerine bir bakalım; Bu stil ifadeleri harici bir .css dosyasında olabileceği gibi, <head> ..</head> etiketleri arasına da konabilir
Yukarıdaki stil ifadelerinde görüldüğü üzere;
. işareti ile başlayan selektörlere sınıf (class),
# ile başlayan selektörlere ise kimlik (ID) tipinde selektör adı verilir.
Buradaki örnek stil ifadelerinin bildirim (deklerasyon) kısımlarında ise CURSOR özelliğine birtakım değerler atanmaktadır. Bunların herhangi bir web dökümanı içerisinde uygulanmasına gelince, kod satırları şöyle olabilir;.
Yukarıdaki kod satırları web dökümanının <body> .. </body> etiketleri arasında yer almalıdır
<STYLE TYPE=”text/css”>
body { cursor: crosshair }
.yardim { cursor: help }
#bekle { cursor: wait }
</STYLE>
<body>
<P STYLE=”color: #c0c0c0″><b>AÇIKLAMA: Mouse imlecini aşağıdaki cümlelerin üzerine götürünüz!. imleçteki değişimlerr dikkat ediniz</b></p>
<br>
<font size=”5″>
<span>Bu cümlede imleç değişir.</span>
<br><br>
<P>Bu cümlede de imleç değişir.</p>
</body>
Bazı Özel Karakterler:
Yukarıda anlattığımız selektörler yerine * ve > olmak üzere 2 joker karakteri kullanabiliriz… Örneğin;
*{font-color: red}
Bu ifade sayfadaki bütün etiketlere “kırmızı font rengi” stilini uygular.
> karakteri ise çocuk selektörler tanımlar. Örneğin;
ul > li {list-style-type: decimal}
Bu ifade UL etiketini ebeveyn olarak kabul eder ve UL içindeki LI öğelerini çocuk selektör olarak görür. Böylece sadece UL listelerindeki LI öğelerine stil belirtimi uygulanmış olur.
Pseudo Classes – Sınıfımsılar
CSS’de kullandığımız kodlarda da bazı yetersizlikler vardır. Bunlar normal etiketlerle karşılanamayan durumlar için düşünülmüş kontrol elemanlarıdırlar. Bütün sınıfımsıların önünde : (iki nokta üst üste) işareti bulunur.
Örnek:
A:visited {color: maroon}
ifadesi sınıfımsı kullanımına dair bir örnek teşkil eder. CSS2 ile tanımlanmış sınıfımsıları (pseudo-classes) aşağıdaki tabloda görebiliriz;
| :first-child | Bir öğenin ilk çocuk öğesi |
| :first-line | Bir paragrafın biçimlendirilen ilk satırı |
| :first-letter | Bir paragrafın ilk harfi |
| :link | Henüz ziyaret edilmemiş linkler |
| :visited | Ziyaret edilmiş linkler |
| :hover | İmlecin o anda üzerinde durduğu öğe |
| :active | O anda etkin olan öğe |
| :focus | Odakta olan öğe |
| :lang | Geçerli dil tanımı |
| :before | İçeriği bir öğeden önceye konumlandırır |
| :after | İçeriği bir öğeden sonraya konumlandırır |
Örnek:
<STYLE TYPE=”text/css”>
.ilksatirbuyuk:first-line{
font-size:310%;
font-weight:bold;
}
</STYLE>
Body bölümünde yer alacaktır.
<p align=”justify”>
Cim Bom Galatasaray
</p>
<br>
<p align=”justify”>
Cim Bom Galatasaray! Dikkat edelim class ifadesi yok!
</p>
ÖZELLİKLER:
Bir web dökümanının tasarım elemanları (stil öğeleri) daha önce de ifade ettiğimiz gibi döküman gövdesi, arka planlar, başlıklar, yazılar, fontlar, tablolar, listeler, renkler ve görsel biçimler, bağlar, efektler, imaj, kutu modeli, katman vb. ile bunların sayfa üzerindeki yerleşimleri gibi birtakım nesnelerden oluşur. CSS içinde bu nesneleri kontrol edebilmek için belirli sayıda “PROPERTIES” (Özellik) tanımlanmıştır. Web sayfası oluştururken yapılan stil belirtimlerinde, yukarıda sözünü ettiğimiz tasarım elemanlarıyla ilişkilendirilebilen özellikler baz alınarak, bu özelliklere birtakım değerler (values) atanır. Örneğin FONT (EN ÇOK KULLANILAN ÖZELLİK) öğesini ele alırsak, bu öğenin özellikleri ve bu özelliklere atanabilecek değerler şöyledir;
Font Özellikleri:
| font-family | arial, verdana, times, courier vs. bold |
| font-style | normal, italic, oblique, inherit |
| font-size | xx-small, small, medium, large, x-large, xx-large, larger, smaller, inherit, geçerli yüzde, geçerli uzunluk |
| font-variant | normal, small-caps, inherit |
| font-weight | normal, bold, bolder, lighter, 100-900, inherit |
| font-stretch | normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condenced, expanded, semi-expanded, extra-expanded, ultra-expanded, inherit |
| font-size-adjust | none, geçerli sayı, inherit |
| font | font-style, font-variant, font-weight, font-size, line-height, font-family, inherit |
Style Sheet Kullanım Metotları:
Bir HTML dökümanında CSS kodlaması yapmanın, yani stil tanımlamasında bulunmanın 4 farklı metodu vardır. Bunlar Inline (İç), Embedded (Gömülü), External (Harici Bağlantı) ve Importing (İthal Etme) şeklinde isimlendirilmektedir. Tabii bu dört metodun hepsinin bir arada kullanıldığı bir beşinci metod’tan da sözetmek mümkün. Buna da “karma metod” adını verebiliriz.
- 1. 1. INLINE (İç) Metotu:
Bu yöntemle; bir HTML dökümanı içerisinde, stili belirlenebilen herhangi bir HTML etiketinin kendi içine stil tanımlaması yapılabilir. Bu metotta çift tırnak olamsına dikkat edilmelidir. <head>…</head> etiketleri içine yazılması gibi durum söz konusu değildir.
Örnek:
<p style=”color: blue”> … </p>
Böyle birşey yaptığımızda, yani bir HTML etiketine stil ataması yaptığımızda tarayıcılar tarafından bu atama en büyük öncelikle dikkate alınır. Diğer stil belirtimleri geçersiz olur. Bu yöntemi kullanabilmek için ayrıca 2 etiketten yararlanılır. Bunlar <DIV> ve <SPAN> etiketleridir.
<div style=”font-color: blue”>
…
</div>
ve diğer etiket,
<span style=”font-color: blue”>
…
</span>
Bu iki etiket arasındaki fark şudur;
<div> etiketi blok düzeyinde işlev görür. Yani kapsadığı aralıktaki bütün öğeler bir blok mantığıyla ele alınır ve bu aralıkta bütün HTML öğeleri yer alabilir. Ayrıca <div> etiketi sonlandığında bir satır atlatır. <span> etiketinde böyle bir şey sözkonusu değildir. Bu yüzden <span> etiketini cümle içlerinde rahatlıkla kullanabiliriz.
2- 2- EMBEDDED (Gömülü) Metot:
Bu yöntemde stil tanımlamaları <head>…</head> etiketleri arasında yer alacak şekilde yapılır. Ve bu amaçla <style> etiketinden yararlanılır. Örneğin;
<style>
<!–
body { background: #c0c0c0;
background-attachment: fixed; }
–>
</style>
Buradaki ‘<!–’ ve ‘–>’ ifadeleri stil kodlarını eski web tarayıcılardan saklamak için kullanılmaktadır. BODY ifadesi stil tanımlamasının selektörü, diğer ifadeler ise bu selektöre atanan stil bildirimleridir.
3- 3- EXTERNAL (Linked – Harici Bağlı) Metot:
CSS kodları çok uzun olabilir. Bunun için CSS kodlarımızı ayrı bir not defteri sayfasında yazarız ve uzantısını .css yaparız. Daha sonra bunu sayfamıza bağlarız.
Sadece sayfamızın başına yazacağımız CSS etiketlerini Notdefterine yazmak ve uzantısını .html değil de .css yapmak.
“ali.css” dökümanını, bağlanacak olan “.html” dökümanlarınızın olduğu klasöre kopyalanır. Ve bu dosyanın sayfaya eklenmesi için aşağıdaki ifade yazılır;
<link rel=”stylesheet” href=”ali.css”>
etiketini sayfanızın <head> </head> etiketleri arasına yazılması gerekir.Böylece .css uzantılı dosyayı sayfanıza link yolu ile eklenmiş olur.
Bu yöntemi kullandığımızda bütün bir siteyi stil tanımlamaları açısından denetim altına almış oluruz. Örneğin sitemizdeki tüm sayfaların arkaplan rengini değiştirmek istediğimizde “ali.css” dosyasındaki tek bir değişiklikle bunu gerçekleştirebiliriz. Aksi durumda sitedeki tüm sayfalar için bunu tek tek yapmak zorunda kalırdık.
4- 4- IMPORTING (İthal Etme) Metotu:
Bu yöntemde ise kullanılmak istenen stil tanımlamaları ayrı bir dosyadan ithal edilir. Bu amaçla harici bir stil dosyasını ithal etmek için @ import komutu kullanılır. Örnek vermek gerekirse; web sayfasının <head>…</head> etiketleri arasına aşağıdaki gibi bir kod satırı yerleştirilir;
<STYLE>
<!– @import url;
… stil kodları
–>
</STYLE>
NOT: Eğer bir web sayfasında yukarıda saydığımız bütün yöntemleri de birarada kullanırsak bunların tarayıcılar tarafından okunma sırası şu şekildedir;
Harici stil -> Gömülü stil -> İç stil
Ancak, okunan stil tanımlamalarının geçerlilik sırası ise tam tersidir;
İç stil -> Gömülü stil -> Harici stil
Yani CSS uyumlu bir tarayıcı herhangi bir web dökümanında bütün stil yöntemleri de uygulanmışsa ilk olarak harici dosyayı, sonra gömülü tanımlamaları ve daha sonra da iç stil tanımlamalarını okur. Ve iş sayfayı ekranda göstermeye gelince öncelikle “iç stil” tanımlamalarını geçerli kılar. Sonra gömülü stildeki tanımlamaları, son olarak ta harici dosyadaki tanımlamaları dikkate alır. Görüldüğü üzere burada iç stil gömülü stile baskın rol oynamaktadır. Aynı şekilde gömülü stil de harici stil üzerinde baskın olur. Böyle bir durumda, tanımladığımız stillerin değerlendirilmesi açısından, tarayıcı ile web sayfası arasındaki ilişkide bir nevi “basamaklama” olayı sözkonusudur. CSS’deki “Cascading” kelimesi de zaten buradan kaynaklanmaktadır.
CSS Standartları ve W3C:
CSS’nin gelişimi W3C tarafından kontrol edilmekte olup, şu ana kadar Cascading Style Sheets hakkındaki gelişmeler CSS1 ve CSS2 şeklinde iki versiyonda (level) toplanmıştır. CSS3 için ise konsorsiyumun çalışmaları halen sürmektedir. CSS hakkında herhangi bir hususta tereddüte düştüğünüzde ilk bakacağınız yer bu konsorsiyumun teknik belgeleri olmalıdır.
World Wide Web Konsorsiyumu için;
