Bu yazımızda Css’te import kullanımını öğreneceğiz. Örneğin bir tasarım yaptığımızı düşünelim. Tasarım için yazdığımız tüm Css kodlarını tek dosya halinde tutarsak ilerleyen zamanlarda boyutu çok büyüyeceği için biraz karışabilir. Neyi nerede yazdığımızı bulmakta zorlanabiliriz.
Eğer tasarımda belirli kısımlar için yazdığımız Css kodlarını ayrı ayrı Css dosyalarına yazarsak daha düzenli olacağından yönetilebilirliği arttırmış oluruz.
Örneğin menü kısmı için yazdığımız Css kodlarını navbar.css, içerik kısmı için yazdığımız Css kodlarını content.css, footer kısmı içinde footer.css dosyalarına yazdığımızı düşünelim.
Bu şekilde menü ile ilgili bir değişiklik yapma ihtiyacı olduğunda hemen navbar.css dosyasını açıp gerekli değişiklikleri yapabiliriz. Diğer türlü hepsi tek Css dosyasında olduğunda biraz daha karışık hale gelebiliyor.
Artık import kullanmanın avantajını öğrendiğimize göre nasıl kullanabileceğimize bakalım.
Tüm ayrı ayrı oluşturduğumuz Css dosyalarını birleştirmek için site.css dosyası oluşturalım ve bu dosyanın içerisine bunları ekleyelim.
site.css dosyasının içeriği
|
1 2 3 4 5 6 7 |
@import url("navbar.css"); @import url("content.css"); @import url("footer.css"); |
Önemli Burada dosyalarınızın yolunu doğru yazdığınızdan emin olun.
Daha sonra oluşturduğumuz bu dosyayı Html sayfamıza link vermeyi unutmayalım.
|
1 2 3 |
<link href="site.css" rel="stylesheet" /> |
Gördüğünüz gibi daha derli toplu bir kod yazmış oluyoruz.
Biraz önceki örneğimizde url olarak import etmiştik. Farklı kullanım şekilleride bulunuyor. Şimdi de onlara bakalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* Url olarak kullanımı */ @import url("navbar.css"); /* String olarak kullanımı */ @import "navbar.css"; /* Sadece yazdırma durumunda print.css dosyasını dahil et */ @import "print.css" print; /* Ekran genişliğinin maximum 992px olduğu durumlarda tablet.css dosyasını dahil et */ @import "tablet.css" screen and (max-width: 992px); |
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
