Önceki yazılarımızda CSS Nedir ve CSS Seçiciler kavramına değinmiştik. Bu yazıda bir stil dosyasının HTML sayfasına nasıl ekleneceğini gösterceğiz.
Tarayıcı (browser) bir stil sayfasını okuduğunda, HTML belgesini stil sayfasındaki bilgilere göre biçimlendirir. CSS’ i tanımlandığı konuma göre üç gruba ayırabiliriz. Bunlar; Harici (External) CSS Stilleri, Dahili (Internal) CSS Stilleri ve Satır içi(Inline) CSS stilleridir.
Harici CSS Stili:
Harici bir stil sayfasıyla, sadece bir dosyayı değiştirerek tüm web sitesinin görünümünü değiştirebilirsiniz. Genellikle .css uzantısı kullanan dosyalardır. Harici olarak oluşturulan bu dosyada bulunan CSS kodları sitedeki Html sayfalarının baş kısmına <head> ..</head> bloğu içine bağlanır.
1 2 3 4 5 | <head> <link rel="stylesheet" type="text/css" href="stil.css"> </head> |
Bağlandığı sayfanın sayfa özelliklerini, sayfada bulunan metinler, başlıklar ve diğer nesnelerin biçimlerini ve konumlarını belirler.
Herhangi bir metin editöründe harici stil sayfası yazılabilir. Dosya herhangi bir html etiketi içermemelidir. Stil sayfası dosyası bir .css uzantısı ile kaydedilmelidir.
Dahili CSS Stili:
Tek bir sayfanın benzersiz bir tarzı varsa, dahili stil sayfası kullanılabilir. Bir HTML belgesinin <head> </head> bloğu içerisine style etiketi ile tanımlanır.
CSS kodları HTML kodları içerisinde kullanıldığı için bu stil türüne Gömülü CSS Stilleride denir.
Dahili CSS Stilinin Harici CSS Stiline göre dezavantajı: Dahili CSS Stili sadece bulunduğu HTML sayfasını etkileyecektir. Sitede aynı biçime sahip olmasını istediğiniz web sayfaları için tekrar biçimlendirme kodlarını eklemeniz gerekecektir. Bir web sitesinde onlarca hatta yüzlerce sayfa olabileceğini düşünürsek bu iş zahmetli olacaktır. Ayrıca bir biçimi örneğin sitedeki başlıkların rengini değiştirmek istediğinizde harici stil dosyasında sadece .css dosyasındaki ilgili bölümü değiştirmeniz yeterli olacakken, dahili CSS kullanırsanız her bir sayfaya girerek ilgili biçim özelliğini değiştirmeniz gerekecektir.
Dahili CSS stili kullanımı:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> |
Satır İçi CSS Stili:
Dahili CSS stilleri gibi HTML kodları içerisinde gömülü halde kullanılır. Ancak dahili stillerde olduğu gibi sayfanın baş tarafında tanımlanmaz. Dolayısıyla genel bir biçimlendirme sağlamaz.
Sayfa içinde tek bir öğe için benzersiz bir stil uygulamak için satır içi stil kullanılabilir. Bu stil türü pek tercih edilen bir yöntem değildir. Kullanımı aşağıdaki gibidir.
1 2 3 | <h1 style="color:blue;margin-left:30px;">Örnek Başlık</h1> |
Sayfamızda kullanabileceğimiz stiller bunlardır.
Soru: Bir HTML öğesi için birden fazla stil belirtildiğinde hangi stil kullanılır?
Böyle bir durumda satır içi stil en yüksek önceliğe sahiptir ve harici ve dahili stilleri ve tarayıcı varsayılanlarını geçersiz kılacaktır.
1 Yorum