Harici Css Dosyası Oluşturma ve Kullanma
Oluşturacağımız stilleri sitemizdeki tüm sayfalarda kullanacaksak, bu stil şablonlarını uzantısı .css olan bir dosyada yazabiliriz.
Bu stil dosyasını istediğimiz web sayfalarına bağlayarak o sayfalar için geçerli olmasını sağlayabiliriz.
Bu sayede sitenin tasarımında bir değişiklik yapmak istediğimizde sadece bu dosyayı düzenleyerek tüm sayfaların değişmesini sağlayabiliriz.
Bir web sayfasına, stil dosyası uygulamak için o web sayfasının head kısmına şu kodu eklemeliyiz:
<link rel=”stylesheet” type=”text/css” href=”dosyaYolu.css” />
Harici stil dosyası içerisinde, stillerimiz aşağıdaki gibi yazılabilir:
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 10pt;
color: #000;
}
.onemli{
font-weight: bold;
color: #F00;
text-decoration: underline;
}
#header {
font-size: 48pt;
font-weight: bold;
background-color: #CFF;
}
...
...
Birden Fazla Stil Dosyası Kullanma
Bir web sayfasına birden fazla stil dosyası da bağlanabilir. Farklı stil dosyalarında aynı etiketler veya seçiciler tanımlanmış ve aynı özellikler farklı şekillerde biçimlendirilmiş ise en son okunan stil sayfasındaki özellikler geçerli olacaktır.
Bu durum aynı özelliğin hem harici stil dosyasında, hem de head kısmında biçimlendirilmesi durumunda da geçerlidir.
Şöyle bir örnekle bunu açıklayalım.
h1 etiketi için stil1.css dosyasında;
stil2.css dosyasında ise;
yazılmış olsun. Belgenin head kısmı da şu şekilde olsun:
<style type="text/css">
h1 { color: green; }
</style>
<link href="stil2.css" rel="stylesheet" type="text/css" />
<link href="stil1.css" rel="stylesheet" type="text/css" />
Bu durumda h1 etiketi mavi renk olacaktır. Çünkü en son okunan stil dosyası stil1.css'dir ve o dosyada h1 mavi yapılmıştır.
Şunu da belirtmeden geçmeyelim: Yerel stil şablonları en yüksek önceliğe sahiptir. Etiket içerisinde belirtilen bir stil, head kısmında ya da harici stil dosyasındaki kuralların hepsini ezecektir.
harici stil dosyası kullanmanın faydaları avantajları, harici css dosyası kullanımı, harici stil dosyası nasıl kullanılır
KONU İLE İLGİLİ ÖRNEKLER
|
Web sitelerinin CSS kodlarını görme
|
|
Ziyaret ettiğimiz bir sitenin CSS kodlarını görmek için;
Sağ tıklayarak "Kaynağı Görüntüle" komutu verin.
Gelen Html kodları arasında Head kısmında harici dosyanın belirtildiği yeri bularak, dosya ismine tıklayın.
Harici Css dosyası görüntülenecektir.
23056 kez okundu.