Css İmport Kullanımı

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

 Ö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.

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.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link