CSS Dersleri Bölüm 2 – ID ve Class ile CSS kullanımı
ID ve Class Seçicileri
HTML elementlerini biçimlendirmenin ötesinde CSS kendi seçicilerinizi id ve class olarak oluşturmanızı sağlar.
ID Seçici
ID seçici yegane tek bir element için stillendirme yapar.
HTML elementinin id özelliğinin değeri kullanılır ve css dosyasında ‘#’ değeri kullanılarak tanımlama yapılır ve biçimlendirilir css’te.
Örnek; menu id’sine sahip element için css yazımı;
#menu
{
text-align:center;
color:red;
}ID’yi sayıyla başlatmayın Firefox’ta çalışmaz çünkü.
Class Seçici
Class seçici, html elementler grubunu biçimlendirmek için kullanılır. ID seçicisinin haricinde, class seçici birçok kez kullanılabilir.
Bu da sayılar ile başlamamalı çünkü Internet Explorer desteklememekte.
Aynı class ile belirli birçok HTML elementini şekillendirebilirsiniz.
HTML’nin class özelliğini kullanarak ve css’te başına nokta koyarak tanımlarsınız bu seçiciyi.
Örnekte merkez class’ına sahip bir css stilini göreceksiniz;
.merkez{text-align:center;}Şunu da yapabilirsiniz class ile; sadece belirlediğiniz HTML elementlerinin class tarafından etkilenmesini sağlayabilirsiniz.
Mesela tüm p etiketlerine merkez class’ı uygulanır bu da hepsini merkeze alır tanımdan yola çıktığımızda.
p.center {text-align:center;}CSS Kullanımı
4 yol ile CSS’i kullanabilirsiniz;
- Harici bir stil dosyası,
- Dahili bir stil dosyası
- Satır içi stili,
- @import yöntemi ile stillendirme,
Harici stil dosyası
Harici stil dosyası stiller birçok sayfaya uygulandığında en ideali. Harici stil dosyasıyla tüm sitenin görünüşünü tek bir yerden değiştirebilirsiniz. Yalnız tüm sayfalar css dosyasına bağlanmak zorunda <link> etiketi ile head bölgesi içinde.
Örnek;
<head> <link rel="stylesheet" type="text/css" href="stilim.css" /> </head>
Harici stil dosyası herhangi bir text editor programında yazılabilir. HTML etiketleri içermez. “*.css” uzantısı ile kaydedilir.
Örnek;
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}Özellik değeri ile sayılar/veriler arasında boşluk bırakılmaz IE’de çalışır fakat diğerlerinde çalışmaz.
Dahili stil dosyası
Tek bir belge ve yegane stil kullanıldığı zaman idealdir. HTML sayfasının head bölgesinde <style> etiketi kullanılarak tanımlanır.
Örnek;
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>Satır içi stiller
Satır içi stil, stil dosyasının avantajlarını sunum sırasında elinden alıyor bu yüzden idareli olarak kullanmalısınız.
style özelliğini kullanarak ilgili etiketin içinde kullanılarak tanımlanır. Ve herhangi bir css özelliğini içerebilir.
Örnek;
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Çoklu stil dosyası
farklı stil dosyalarında bazı özellikler aynı seçici için atanmışsa, değerler en belirgin yazılmış olan stil dosyasından alınır.
Örneğin;
h3 seçicisi için,
h3
{
color:red;
text-align:left;
font-size:8pt;
}ve bir satır içi stil dosyasındaki h3 seçicisi için de,
h3
{
text-align:right;
font-size:20pt;
}bu sayfanın h3 stili
color:red; text-align:right; font-size:20pt
böyle olacaktır.
Çoklu stiller bir taneye
Stiller;
- HTML elementi içinde
- head bölgesinde
- bir harici dosyada tanımlanır
İpucu; bir tek html belgesine çoklu stil dosyaları aktarılabilir.
Sıralama
Bir html stili için çoklu atamaya nasıl bir stil uygulanacak peki?
Genel olarak konuşursak tüm stiller sanal olan yeni bir stil dosyasına aşağıdaki kurallar ile ve dorduncusu en yüksek dereceye sahip olarak uygulanır;
- tarayıcı varsayılanı
- harici dosya,
- dahili stil dosyası
- satır içi dosya,
Yani satıriçi olan en yüksek dereceye sahip. Yani ezip geçen stil kendileri.
Not; Dahili stil dosyasından sonra bağlanırsa harici stil dosyası, harici stil dosyası ezer dahili stilleri.
Bu dersimizde burada biter. Bu sayede temel CSS eğitimini almış oldunuz. Önümüzdeki derslerde görüşmek üzere…