11.Stil Şablonları (CSS)
Stil şablonları (CSS-Cascading Style Sheets-Basamaklı stil sayfaları) oluşturduğunuz sayfalar için stil oluşturmaya yarar. Bu şablonlar istenildiği zaman kullanılmaktadır.Bir çok programda hazır şablonlar olduğu gibi örneğin Word programında hazır yazı şablonları,resim şablonları ve şekil şablonları kullanıldıgı gibi css ile web sayfalarımızın kullanacağı hazır yapıları oluşturmuş oluruz.
Html' de stil ayarlama işlemi sınırlı ve zor olduğundan html' nin bu eksikliği css ile giderilmiştir.Aynı zamanda şablon oluşturma ile o şablonu istediğiniz sayfada da kullanabilirsiniz.Böylelikle tasarımcıya hız kazandırabilir.
Html ile biçimlendirme işlemleri her defasında ayrı ayrı tanımlanmaktadır fakat css ile bir defa tanımlayıp bütün sayfada yada tüm web sayfalarında da kullanılabilmektedir.Herhangi bir değişiklik işleminde tüm sayfada yada sayfalarda değişiklik yapmak yerine css şablonunda yapılan değişiklik tüm sayfayı sayfaları etkilesi sağlanmaktadır.
Css stilleri sayfadaki her nesne için kullanılabilir.
CSS kodları HMTL kodlarının içine yazılır. Türüne göre body veya head bölümlerinde yer alabilir. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinden çağrılabilir.
Css'nin Yapısı:
Stil şablonlarının yapısı incelendiğinde CSS kodunun iki parçadan oluştuğu görülmektedir : bir seçici ve bir veya birden fazla parametre.Aşağıdaki resimde css'nin yapsı görülmektedir.
Seçici genelde biçimi değiştirilmek istenen HTML öğesidir. Her bir ifade ise bir özellik ve onun değerinden oluşmaktadır. Ayrıca, bir CSS ifadesi her zaman noktalı virgül ile sonlanır ve ifade grubu ise süslü parantez arasına alınır.
Bir HTML öğesinin biçimini değiştimenin yanı sıra, CSS kullanıcılara “id” ve “sınıf” seçicisi olarak kendi seçicilerini de düzenlemelerine olanak sağlamaktadır.
Css' de 3 tür seçici vardır.Bunlar sınıf,id ve etiket seciçicileridir.Aşağıda bu seçicilerden bahsedilmiştir.
1 Sınıf seçicisi:
Bir sınıf seçicisi bir grup öğenin biçimini belirlemek için kullanılır.Sınıf seçicisi birçok öğede sıklıkla kullanılmaktadır. Bu durum da kullanıcıya belirli bir biçimini, birçok HTML öğesine uygulamaya olanak sağlamaktadır. Sınıf seçicisi, HTML sınıf özelliğini kullanılır ve nokta (.) ile tanımlanır.
Örnek kullanımlar:
.resim_kenarlik {
border: solid 1px #CCC;
}
.ders_notu_1{
font-variant:normal;
letter-spacing:normal;
line-height:18.2px;
text-transform:none;
white-space:normal;
}
2 Id seçicisi:
Id seçicisi ise tek bir öğeye belirli bir biçim vermek için kullanılır. Id seçicisi HTML öğesinin id özelliğini kullanır ve “#” işareti ile tanımlanır.
Örnek Kullanımlar:
#footer {
height: 100px;
color: #FFF;
}
#genel {
width: 940px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
}
3 Html etiket seçicisi:
Html etiketlerine biçim vermek içi kullanılır.Sayfadaki hangi etikete verildiyse o sayfada kullanılan etiket heryerde belirlenen özellikte olur.
h3 {
padding: 0px;
margin: 0px;
}
body {
margin: 0px;
}
Şu ana kadar sadece şablon oluşturmadan bahsedildi.Şimdi oluşturulan bu seçicileri yani css'leri kullanmaya geldi.
CSS kullanımı:
1. Yerel kullanımı:
Stil şablonları yerel olarak kullanıldığında tek bir sayfada sadece bir kez kullanılırlar. Bu durumda bir HTML etiketi için özel olarak tanımlanmış olurlar. Aşağıdaki örnekte paragraf etiketine ait özellikler ve değerleri yerel olarak değiştirilmiştir.
<p style="background:#333; color:#FFF">css</p>
Burada paragraf etiketine css uygulamış olduk.Burada kullanılan css sadece bu paragrafa etki eder.
2. Genel kullanımı:
Html belgesinin <head> bölümüne yazılır ve tasarımı yapılan html dosyasının tamamı üzerinde etkili olur.Sayfada istenilen yerde kullanılır fakat başka bir sayfa da kullanılamazdır.
Yukardaki resimde style etiketiyle css oluşturulacağı belirtildi.Bu etiket arasına seçicileri oluşturacağız.
Yukarıdaki resimde genel kullanıma acık css tanımlaması yapılmış oldu.Bu sayfamızın istenilen yerinde kullanılabilir.
Yukarıdaki resimde ise head bölümünde tanımlanan css'lerin sayfa içerisinde kullanımını görmektesiniz.
3. Bağlantılı kullanımı:
Stil şablonları .css uzantılı olarak kaydedilen ayrı bir dosya içerisinde yer alırlar. Böylece bu .css dosyası birçok sayfanın aynı şekilde görüntülenmesine olanak sağlamakt adır ve sitedeki tüm sayfalara etki eder.
Aşağıda bir web sitesine ait dosyalar gözükmektedir.Bu dosyalardan gri bölümdeki sitil.css dosyası harici css dosyamızdır.
.css stil dosyasının HTML dosyasına eklenmesi için de <link> etiketi ile beraber kullanılmalıdır.eğer ekleme işlemi yapılmaz sa stiller gözükmez ve kullanılamazdır.
Aşağıdaki resimde stil dosyanının eklenmesini göreceksiniz.
.css stil dosyasının HTML dosyasına eklenmesi için de <link> etiketi ile beraber kullanılır.