Web-Sayfalarına-CSS-Ekleme-Yolları_emresupcinMerhaba 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.

Yazar
Yazar
Bilgisayar Programcısı, Web Tasarımcı, Üniversite Öğrencisi...
Twitter Facebook Google Linkedin Flickr YouTube

Önceki Yazı:Arama Motorlarına Kayıt (Robots.txt) İşlemi Nasıl Olur?

Sonraki Yazı:Svchost.exe Virüsü Nasıl Temizlenir?

YORUMLAR
SİZ DE CEVAP YAZABİLİRSİNİZ
Bu yazı hakkında görüşünüzü belirtin.

ES Web Tasarım Web Tasarım Blog Teması Emre Supçin Bu tema ES Web Tasarım tarafından düzenlenmiştir. Hiçbir şekilde kopyalanamaz.