Buradasınız: Emre Supçin / Css / Web Sayfalarına CSS Eklemenin Yolları Nelerdir?

Web Sayfalarına CSS Eklemenin Yolları Nelerdir?

Web Sayfalarına CSS Ekleme Yolları emresupcin - Web Sayfalarına CSS Eklemenin Yolları Nelerdir? Merhaba Arkadaşlar,

Bugün bayağı yazı yazdık biliyorum ama eğitim kutsaldır 🙂 Şaka bir yana bu akşamın son yazısını CSS üzerine yazmak istiyorum. Blogumda CSS hakkında bayağı bilgi mevcut, bazı eksiklikler var onları da zamanla karşılaştıklarımız ile gideriyoruz.

O eksikliklerinden birini daha buldum. Yaptığımız css’leri web sayfamıza nasıl ekleriz veya hangi yollardan eklerin onun üzerinde durmak istiyorum. Size göre en kolay veya uygun yol hangisi ise onu tercih edebilirsiniz.

Web sayfalarına CSS kodu eklemenin 3 yolu vardır:

• Harici bir CSS dosyasından,
• HTML içinde <style> etiketi arasında,
• Etiketlerin style parametresine değer atayarak.

Harici CSS Dosyası ile CSS Ekleme

Bu yöntemde HTML dosyasından ayrı bir dosya oluşturularak .css uzantısı ile kaydedilir. Daha sonra HTML sayfasına yazılacak bir satırlık bir kod sayesinde CSS dosyası HTML’ye tanıtılır. Örneğin style.css adında bir CSS stil dosyamız olduğunu varsayalım. Bu dosyayı HTML dosyasına tanıtabilmek için, HTML dosyasının <head> etiketleri arasına şu kodların yazılması gerekir:

1 <link href="style.css" type="text/css" rel="stylesheet" />

Bu sayede HTML dosyası CSS dosyasını tanıyacaktır. CSS dosyasının HTML ile aynı klasörde olmadığı durumlarda href parametresini buna göre düzenlemek gerekir. Örneğin CSS dosyası tema adındaki bir klasörün içindeyse href parametresinin değeri “tema/style.css” olmalıdır.

Harici olarak CSS dosyası eklemenin bir diğer yolu ise @import metodudur. Bu yöntemin farkı CSS dosyasının web tarayıcı tarafından daha önce yorumlanmasıdır. Böylece biz CSS kodunu eklemeden önceki bölümler de CSS dosyasına göre biçimlendirilecektir. Bu yöntemin kullanımı yine <style> etiketleri arasına yazılan şu kodlarla sağlanır:

1 <style type="text/css">

2 @import "style.css";

3 </style>

CSS dosyalarını harici olarak eklediğimizde tüm siteyi biçimlendirebiliriz.

Style Etiketi Kullanılarak CSS Ekleme

Bu yöntemde kullanmak istediğimiz CSS stilleri HTML dosyasında (veya ASP, PHP, vs.) <head> etiketleri arasında, <style> etiketi kullanılarak yazılır:

1 <style type="text/css">

2 body {background-color:#666;}

3 #header {width:800px; margin:0 auto;}

4 //diğer CSS stilleri

5 </style>

Bu yöntem genellikle tasarım aşamasında, aynı dosya içerisinde kolayca değişiklik yapıp sonucu görebilmek amacıyla kullanılır. Bu yöntemle sadece tek bir sayfayı biçimlendirebiliriz.

Etiketlerin Style Parametresi ile Css Ekleme

Bu yöntem CSS dosyamızdaki genel tanımlara uymayan, sadece kendisine özgü bir biçimi olan ve örneğin sadece bir defa kullanılacak bir biçim için; yeni bir CSS kuralı oluşturmak yerine bu işi elemanın style parametresine yazarak çözmek istediğimiz durumlarda işe yarayabilir. Fakat genel olarak sayfayı biçimlendirmek için bu yöntem kullanılmaz. Örneğin sitemizde tasarım gereği, sadece bir h4 başlığı mavi renkte olacaksa bu başlığa CSS kuralı oluşturmak yerine aşağıdaki kodu kullanabiliriz:

1 <h4 style="color:blue;">Emre Supçin</h4>

Bu yöntemle sadece tek bir HTML elemanını biçimlendirebiliriz.

Sonuç olarak CSS eklerken, farklı durumlarda kullanılması uygun olan farklı yöntemler mevcuttur. Fakat günümüzde, CSS kodlarını harici olarak eklemek benimsenmiştir.