Özgür YAMAN

Bilişim Teknolojileri Öğretmeni

Web Sayfalarına CSS Eklemenin Yolları

Yazan: · Tarih: · Güncelleme:

Post Views: 6.958

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:

<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:

<style type="text/css">
@import "style.css";
</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:

<style type="text/css">
body {background-color:#666;}
#header {width:800px; margin:0 auto;}
//diğer CSS stilleri
</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:

<h4 style="color:blue;">Mavi Başlık</h4>

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

Sonuç olarak…

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.

ETİKETLER:

BENZER YAZILAR